www.webdeveloper.com
Results 1 to 4 of 4

Thread: Image Does Not Position Correctly in Safari & Chrome

  1. #1
    Join Date
    Dec 2012
    Posts
    2

    Image Does Not Position Correctly in Safari & Chrome

    Hi,
    I'm new here so I hope I posted this in the right spot.

    I have a site that I have created in WordPress using a pre-designed theme that I heavily customized.
    http://www.bfhs.com/

    The site looks great in Firefox 17.0.1, IE 9, and Chrome 23 but one image on the footer will not align properly in Safari 5.1.7 (but only on certain pages). The image in the footer of the cat and dog appears out of place on some pages while in the proper place in the others.

    Here's a snapshot of what it's supposed to look like: Good Positioning. And this is what it looks like on some pages in Safari: Bad Positioning

    I'm certain it's the Safari Float Bug. I have the image positioned absolutely within a div positioned relatively.

    The image is using inline styles to overcome the limitations of this particular WordPress theme.

    Code:
    Code:
    <a href="http://www.bfhs.com/available-animals/"><img src="http://www.bfhs.com/wp-content/themes/bfhsgreen/images/catdogsidefooter.png" style="margin-top: -140px; position: absolute; max-width: 210px" overflow="visible" z-index="999" ></a>
    Is there a fix for this?

    Thanks!

    Jake

  2. #2
    Join Date
    Oct 2012
    Posts
    55
    why not just use position:fixed;

  3. #3
    Join Date
    Dec 2012
    Posts
    2
    Quote Originally Posted by drunken_dev View Post
    why not just use position:fixed;
    I tried that and it makes the entire element disappear (in all browsers).

  4. #4
    Join Date
    Oct 2012
    Posts
    55
    For starters you have a <div class = "gototop"> with a <p> that holds the picture starting in this div and end in the next <div class ="creds">.

    This might confuse some Browsers as you are overlapping classes and/or ids, I did not check exactly if you are but I think you might be.

    You have used a lot of divs, multiple classes and IDs, it is all looking a bit confusing.

    I think you could start by simplifying the divs and classes as you have a lot of elements doing something that should normally take two divs.

    Things like this with html DTD that does not use closed tags can lead to some confusion.

    Cut it down simplify it. Vaidate it! as well! http://validator.w3.org/ Your page comes up with 9 errors!

    Get your HTML working first.

    BTW Nice page.

    Cheers

    Dan
    Last edited by drunken_dev; 12-10-2012 at 06:18 PM.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles