Absolut Positioning Issue on Safari 5 on MAC

Hello to all,

I have a weird issue on a project I just completed, http://www.hydroholistic.com/ with Safari 5 - MAC version, but because I don’t have a MAC is quite hard for me to test.

I tested it on Safari for Windows, of course, and it displays ok.

Many items on which I’ve done image replacement are moved a bit downard, enough to make it look like the entire site is broken.

Is there anyone that has ever had a similar problem?

Thanks a lot.

Federico

Browsercam is expensive but there is a sticky thread in one of the design forums where groups of people show their interest to reduce the cost.

This charset thing is interesting, I don’t even know why I’m using that here… oh yes, because for some strange reasons my css file was not UTF-8, but that didn’t fix it anyway… so now I can just delete that bit.

Thanks again!

Yes the charset in the css is seldom (if at all needed) and the rules are as stated in the reference.

You’ll rarely need to use an @charset rule in your style sheets. A user agent can deduce the character encoding of a CSS style sheet in four different ways, and if all of those fail, it uses a default.
For an external style sheet, a user agent will look for the following items:

  • a charset attribute in a Content-Type HTTP header (or similar) sent by the web server
  • a Unicode byte order mark, or an @charset at-rule
  • a charset attribute specified in the <link> tag from which the HTML document links to the style sheet
  • the encoding of the referring document or style sheet

This list defines the items in order of descending priority, and the first one that’s found will determine the style sheet’s encoding. If none are found, the user agent will assume the character encoding is UTF-8.

I made a copy of your header locally and uploaded for testing and removing the comments above the charset does make it work in Safari so you should be all set to go. :slight_smile:

seems fine on my mac.

I testing it on my Mac using Safari 4 and it looks jumbled also. Do you have any code you can drop here so we can take a look?

I tried to remove the charset directive. I’ll ask to some people to have a look and tell me if they still get the problem - I hope not!

Thanks!

This is weird!
Anyone else with Mac OS X and Safari 5 has tested it?

A friend confirmed is fixed!!
Thanks a lot!

I’m relieved cos a week ago I though “maybe I should stop making such complex layouts” !! LOL

@ Paul

Hey, I’ll try your fix, thanks a lot!

I didn’t know browsercam.com, it seems really cool! I was trying to use browsershots.org but I couldn’t get any screenshot from there.

This charset thing is interesting, I don’t even know why I’m using that here… oh yes, because for some strange reasons my css file was not UTF-8, but that didn’t fix it anyway… so now I can just delete that bit.

Thanks again!

Ok I’ve just spotted the bug :slight_smile:

You have comments above the charset which is not allowed. The charset must be the first thing on the page.

In Safari some rules go missing if there’s is something above the charset and you are losing the reset of the body’s margins thus causing a difference in position of the image.

Just move the comments after the charset and it will be ok.

Here’s some browsercam shots that show it broken in safari 4 and earlier by sfarai 5 looks ok.

http://www.browsercam.com/public.aspx?proj_id=526268

No one else ever had this problem?

This is the css code: http://www.hydroholistic.net/theme/style.css

I’m thinking of borrowing a mac to do some testing on… does safari have some debugging tools?

Thanks a lot.

Looks fine in Safari 5 on my mac (osx 10.6.4) so it may be os specific which will be hard to debug I’m afraid.