Welcome to WebmasterWorld Guest from 50.19.0.90

Forum Moderators: not2easy

Message Too Old, No Replies

Why is height: ; so inconsistent?

Height attribute inconsistent across different browsers

     
6:58 pm on Nov 5, 2007 (gmt 0)

Junior Member

10+ Year Member

joined:May 31, 2002
posts: 157
votes: 0


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!

9:47 pm on Nov 5, 2007 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member 10+ Year Member

joined:Sept 4, 2001
posts: 2143
votes: 7


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

10:35 pm on Nov 5, 2007 (gmt 0)

Junior Member

10+ Year Member

joined:May 31, 2002
posts: 157
votes: 0


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. :-)
12:35 am on Nov 6, 2007 (gmt 0)

Senior Member

WebmasterWorld Senior Member penders is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month

joined:July 3, 2006
posts: 3123
votes: 0


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.

12:52 am on Nov 6, 2007 (gmt 0)

Senior Member

WebmasterWorld Senior Member 5+ Year Member

joined:Mar 18, 2007
posts:671
votes: 0


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).
5:23 pm on Nov 6, 2007 (gmt 0)

Junior Member

10+ Year Member

joined:May 31, 2002
posts: 157
votes: 0


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.

7:41 pm on Nov 6, 2007 (gmt 0)

Senior Member

WebmasterWorld Senior Member penders is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month

joined:July 3, 2006
posts: 3123
votes: 0


...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.

10:10 pm on Nov 6, 2007 (gmt 0)

Junior Member

10+ Year Member

joined:May 31, 2002
posts: 157
votes: 0


Ahh if only we lived in a pixel perfect world. :-D
4:15 am on Nov 7, 2007 (gmt 0)

Senior Member

WebmasterWorld Senior Member 5+ Year Member

joined:Mar 18, 2007
posts:671
votes: 0


It would be stupid if we did. people with bad vision would be rejected from society
5:01 am on Nov 7, 2007 (gmt 0)

Junior Member

10+ Year Member

joined:May 31, 2002
posts: 157
votes: 0


LOL, this is true. :-)
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members