McWilliams’ World

<blasphemy>

Mozilla/FireFox is stupid. I hate making sure my CSS works on it.

</blasphemy>

Yeah, I’ll go to Hell for saying FireFox is retarded.

I’m not doing anything out of the ordinary. Standard stuff CSS based layout and such, but for some reason my code works beautifully in IE but when I check my work in FireFox = annoying crap.

HTML:

<div id=”main”>
<div id=”content”>
<h1>some text here</h1>
<!– … more stuff … –>
</div>
</div>

CSS:

body{
margin : 0;
padding : 0;
text-align : center;
font-family : Arial,Helvetica,sans-serif;
background : #fff;
}

#main {
height : 600px;
background : #000 url(../images/body-bkg.jpg) 50% 100% no-repeat;
}

#content {
text-align : left;
width : 700px;
margin : 20px auto;
}

#content h1 {
background : url(../images/cosmicgroove.gif) 50% 0 no-repeat;
height : 90px;
color : white;
font-size : 3em;
width : 100%;
}
#content h1 span {
display : none;
}

Results

As expected, IE looks fine. The #main div remains flush with the window, the #content div is pushed down 20px from the top and all is well in my world.

In FireFox what happens? FireFox decides to push #main and everything else down 20px revealing a white border (the body’s background color).

The fix?

Mozilla obviously doesn’t like the top margin setting on the #content div or the H1 which is somehow forcing everything down. I had to remove the top margins and replace it with top padding. This also goes for the H1 - no top margin as well. Stupid.

So the CSS of the #content and H1 now looks like:

#content {
text-align : left;
width : 700px;
margin : 0 auto;
padding : 20px 0 0;
}
#content h1 {
background : url(../images/cosmicgroove.gif) 50% 0 no-repeat;
height : 90px;
color : white;
font-size : 3em;
width : 100%;
margin : 0 0 20px;
}

Sometimes I wonder. I have no problem making things work between browsers (I have to, it’s my job) but it sure is a pain when things seem very plain and simple but don’t pan out that way. Good thing 95% of our web visitors use IE.

Certain “web standards” always bugged me.

Take for example the “box model issue“. IE defines how a “box” works one way while others handle it another way.

IE’s way (and the way I think) works like this. You have a box, you may have a border around the box and padding around the stuff inside that box. You now set a dimension on that box - oh let’s say 400px wide. From edge to edge, border to border, content and all, IE and myself says that the box should be 400px. End of story. It is a box - right?

Not so with the “web standard” crowd. They say the 400px width assignment defines the “content” of the box and does not include the border or padding (whoever heard of putting padding on the outside of a box?). So if I have defined a 400px wide box, apply a 2px border and 10px worth of padding, my “box” is technically 24px wider because of the padding and border (left + right = extra width). Retarded - I know.

So now every time you deal with setting dimensions on a container you have have to either avoid using “width” or “padding” or “border” or use funky math or some other hack to make sure you “box” remains the size you want across most browsers. But that’s why they pay me the big bucks (not really). 

This entry was posted on Friday, September 14th, 2007 at 8:46 am and is filed under Whatever. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.