Weird Mac/Safari Problem

Marston

Ok, my website displays pretty much fine on a PC using IE and FireFox, but when I try to view it with Safari on a Macintosh, there's like a huge amount of padding at the top of the page (it's supposed to have no padding at all)...

My stylesheet can be found here.

Could someone help me?

riv

What do you mean "huge" padding? There's only a 10px gap.

What you can do to fix this is to start off your CSS document with "* {padding: 0; margin: 0;}". That is known as a global whitespace reset, and it would get rid of all the whitespace that needs getting rid of. Of course, you will need to specify the padding and margin later in the CSS file, like "p {margin-bottom: 10px;}". That's what I do with all of my CSS documents, to make sure there isn't any whitespace where there's not supposed to be any.

Marston

I have that already, though... Sad

I also forgot to mention that all of my code (css and html) is W3C compliant.

riv

Then I do not know what the problem is... Maybe it's a bug in WebKit. Try submitting it as a bug in WebKit.

Marston

riv

The rendering engine that Safari uses. http://webkit.opendarwin.org/

By the way, you might consider centering your website by using "margin: 0 auto;" on your div that contains your content and your header. That might also fix the problem...

Marston

Could work - I don't have a Mac to test it on right now, but the only problem is that IE doesn't render the auto attribute properly (or it just ignores it).

Is there any sort of workaround?

novisdesign

I viewed your page through Safari 2.0.3. And I found no 'huge' padding on the top of the page. The header is only around 10 px from the top of the window. Hope that helps.

adhoc

In http://xzact.frih.net/scripts/home.css you have:

#Header table{
width: 100%;
margin-top: 10px;
}

Remove the margin-top: 10px; and it disappears. Why it's messing up like that I won't try to guess.. But you might start with using a more recent doctype etc if you want standards-compliant behavior.