CSS Problems, site looks crappy in Mac

[chanoc]

I was wondering why my site looks fine in Windows using Firefox and IE, but not Firefox, IE and Safari for Mac. See site at bottom "Chanoc's Web site!".

The site is layed out in CSS 2.0 and XHTML. The css page is extention /chanoc.css. Thanks for any suggestions.

 

[Blackheart]

Your site's CSS doesn't validate.

 

[Littleodie914]

Hmm... I can't tell you exactly what's wrong without dissecting the code, but make sure you have the margin-top set to "0px" for your div's containing the stuff that's not aligning right. You aren't using tables, so there shouldn't be any trouble with cellpadding/spacing.

 

[Littleodie914]

Ah, nevermind, figured it out. The problem lies within the classes you're creating in your chanoc.css file. For example, with the #left class that the navigation div, you have the position set to absolute, and then you're defining a custom distance from the top of the page. This will cause problems, as different browsers leave a different amount of space (a few pixels) from the top of the window before actually beginning the HTML. I'd suggest setting the positions to "position: relative;" and then working from there. It's much less problematic than setting exact coordinates. Good luck!

 

[chanoc]

Thanks for the input, but even setting #left to relative did not solve it. Although most my visitors use Windows. I get a lot of hits from Latin America, where Macs are a novelity. Chanoc is my nickname given to me by Mexican friends, and also the name of a comic book character from Mexico.

Windows
3049
75.5 %

Macintosh
799
19.7 %

Unknown
164
4 %

Linux
26
0.6 %

Oh well, I am going to tweak, tweak, tweak that damn code until it looks good for the 20% of Mac users - including myself.

 

[mnkeybsness]

Using %s for margins, widths, paddings, etc... is a really really bad idea. I am going to just go out on a limb and say that using %s for all of that is the problem.

 

[Mitthrawnuruodo]

One small thing: I used to have trouble with my css files when I added commentaries to more than one line... a simple /* comment or whatever */ after the cone on a single line worked fine, but when I tried:
/*
More lines
More commentaries
*/
...I got into trouble...

And, as said above: Both css and xhtml must validate. Start with the xhtml, then clean up your css...