homepage Welcome to WebmasterWorld Guest from 54.242.126.9
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
Why is height: ; so inconsistent?
Height attribute inconsistent across different browsers
Bluestreak

10+ Year Member



 
Msg#: 3496976 posted 6:58 pm on Nov 5, 2007 (gmt 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!

 

Marshall

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 3496976 posted 9:47 pm on Nov 5, 2007 (gmt 0)

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

10+ Year Member



 
Msg#: 3496976 posted 10:35 pm on Nov 5, 2007 (gmt 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. :-)

penders

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



 
Msg#: 3496976 posted 12:35 am on Nov 6, 2007 (gmt 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.

Xapti

WebmasterWorld Senior Member 5+ Year Member



 
Msg#: 3496976 posted 12:52 am on Nov 6, 2007 (gmt 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).

Bluestreak

10+ Year Member



 
Msg#: 3496976 posted 5:23 pm on Nov 6, 2007 (gmt 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.

penders

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



 
Msg#: 3496976 posted 7:41 pm on Nov 6, 2007 (gmt 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.

Bluestreak

10+ Year Member



 
Msg#: 3496976 posted 10:10 pm on Nov 6, 2007 (gmt 0)

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

Xapti

WebmasterWorld Senior Member 5+ Year Member



 
Msg#: 3496976 posted 4:15 am on Nov 7, 2007 (gmt 0)

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

Bluestreak

10+ Year Member



 
Msg#: 3496976 posted 5:01 am on Nov 7, 2007 (gmt 0)

LOL, this is true. :-)

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved