Why is height: ; so inconsistent?

Height attribute inconsistent across different browsers

[Bluestreak]

I'm trying to set a static block to an absolute height of 90px, but for some reason, the height is inconsistent across different browsers from Opera to Safari. In Opera it's just a few pixels too short, while in Konqueror it's a few pixels too long. In Safari it's off by a mere pixel I think. But regardless it's never consistent. Is this simply an issue of how browsers render the height attribute or is there a way to fix it? Here's the CSS of the block with the absolute height, and then the CSS of the block that comes after it:

.center-banner {
border-color:#3A3B43;
/**/
color:#FFFFFF;
background-color:#1C2023;
border-width: 1px;
border-style:solid;
padding:.7em;
margin-bottom:5px;
font-size:10pt;
height:90px;

.center-widget {
border-color:#3A3B43;
color:#FFFFFF;
background-color:#1C2023;
border-width: 1px;
border-style:solid;
padding:1em;
margin-bottom:5px;
font-size:10pt;
}

Any help appreciated!

[Marshall]

Different browsers have different default margin, padding and height settings for different elements such as <div>, <p>, <h> and so on. A lot of times while a <div> may be set to a specific height, a <p> element may throw it off. A solution is to reset the global settings with:

* {
margin: 0;
padding: 0;
}

This will set all elements to zero. The down side is, it will set all elements to zero so you will have to define these attributes for each element.

One thing I have noticed, it is usually the <p> or <h> that throws everything off in my layouts, not the <div>.

Marshall

[Bluestreak]

Thanks for the reply Marshall. I think I have the global elements reset already but I'll check to be sure. I have one hr element that comes before these particular blocks so if you're right that might be what's throwing everything off. :-)

[penders]

Assuming you have a valid DOCTYPE and Opera, Konqueror and Safari all obey the W3C Box Model [w3.org] (?) then your .center-banner, as you have defined it in your CSS, does not have an overall height of 90px.

(Only with the Traditional Box Model - IE (quirks mode) - would the overall height be 90px)

The height property in CSS (according to the standards) refers to just the height of the content area, on top of this goes padding, border and margins. So the overall height of your container is:

90px + 5px + (2 * 0.7em) + (2 * 1px) = 97px + 1.4em
(height + margin-bottom + padding + border)

Are all browsers obeying the W3C Box Model? How are browsers treating the 0.7em? (A relative dimension based on the font-size of the parent.) Certainly with a mix of (none px) units I can see problems in trying to get it pixel perfect cross-browser.

[Xapti]

Well not all browsers follow the box model for form elements (or at least aren't consistant with eachother - ovbiously), since they are tricky. Because of this, it has been suggested (I tend to ignore it) that the easy *{} universal reset is not a good idea (I don't rmember the specifics).

[Bluestreak]

Thanks for the suggestions!

Certainly with a mix of (none px) units I can see problems in trying to get it pixel perfect cross-browser.

I tried using all pixels instead and that churned out even more unpredictable results, which really surprised me, so I just went back to using the "0.7em" There seems to be no rhyme or reason to the differences between browsers, but the good thing is all the blocks are still cleared of each other, despite being a few pixels off, so I'm just going to leave it alone and count my blessings.

[penders]

...the good thing is all the blocks are still cleared of each other, despite being a few pixels off, so I'm just going to leave it alone and count my blessings.

To be honest, that's what I aim for. IMO HTML + CSS was never intended to create pixel perfect layouts (although it can be done to a certain extent with CSS and the situation is getting better). Afterall HTML is a markup language, not a page layout language, intended primarily for the sharing of information.

[Bluestreak]

Ahh if only we lived in a pixel perfect world. :-D

[Xapti]

It would be stupid if we did. people with bad vision would be rejected from society

[Bluestreak]

LOL, this is true. :-)