#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2011
    Posts
    2
    Rep Power
    0

    Question Image does not position correctly in Safari 4


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

    The site looks great in Firefox 3.6, IE 7 and IE8 but one image on the home page will not align to the right in Safari 4.x.
    The image of the pastors floats to the left and directly over the Flash slideshow in Safari 4 while in the proper place in the others.

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

    Code:
    style="position:absolute; border:0;margin-top: -4px;*margin-top:-10px;"
    Any ideas why this doesn't work right in Safari and what I can do to fix it?

    Thanks!

    ks
  2. #2
  3. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,124
    Rep Power
    4309
    Welcome to DevShed Forums, kirks61.

    It's not being positioned correctly because it's absolutely positioned without a set left or right offset and following a left floated element. This is an edge case where not all browsers display it the same.

    To fix it, give "position:relative" and "height:362px" to "#slideshow-wrapper" and "right:0" to the <img>.

    Auto-playing anything that makes a sound on a web page will annoy a lot of people. At the very least, you should provide an obvious way to mute it.

    I also recommend you avoid using image maps.
    Spreading knowledge, one newbie at a time.

    Learn CSS. | PHP includes | HTML Validator | CSS validator

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2011
    Posts
    2
    Rep Power
    0
    Great! Thanks for the welcome and the suggestions! It worked!

    As for the auto-playing with audio, some clients just want what they want and I just leave them alone. I'm trying to stay on top of this ever-changing sea of web technology and just am having to do what I can, especially when I'm working in the tight confines of a text-box to add images and Flash content is a small area. So, an image map was the best I could do in this situation and puny-budgeted project!!

IMN logo majestic logo threadwatch logo seochat tools logo