CSS Glitch in Firefox; ok in IE7

[MyndFyre]

Take a look at http://www.robpaveza.net/blog/template.html - both in Firefox and IE.

IE displays the page exactly as I wrote the CSS: the body has no margins, and so the top is flush with the top of the browser.   It also aligns the bottom image to the right of the main centered content area (I might have tried to do a margin-right: 30px on that, but I don't want it and it wasn't being obeyed anyway).

The weird behavior in Firefox is that there is an unknown offset from the top of the browser window to the top of my content which is causing the gradients to not match up.  Also, Firefox is not obeying my margin-top requirement on the bottom div; it should be offset from the content block by 30px.

When I look at the DOM in FireBug, I don't see ANYTHING highlighted when I mouseover the top <div>, but when I mouseover the bottom <div>, the whole page lights up.

Also, HTML and CSS passed W3C validation.

Any thoughts?

[Barabajagal]

Instead of margin: 0 0 0 0; , try:

Code Select Expand

position: absolute;
top: 0px;
left: 0px;
margin: 0px;

[MyndFyre]

That doesn't work; I want the content horizontally centered.  Again, it appears correctly in IE.

[Barabajagal]

Oh, then don't do left: 0... or the position: absolute... crap. I don't know.

[Replica]

Do this

in the style sheet for

body {
margin:0;
padding:0;
text-align:center;
}

then for a main "wrapper" of the site add

#wrapper (or whatever you call yours) {
margin:0 auto;
text-align:left;
width:(whatever)
}

[Dale]

If you want the content box horizontally aligned, set the body {text-align: center;} and your contentbox to {margin-left: auto; margin-right: auto;}

[Imperceptus]

Also the wierd offset is because one of your browsers doesn't compensate correctly for the scrollbar on the side of the screen.

Firefox isn't so reliable anymore. I test with google chrome and IE.