Marshall
msg:3497105 | 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
msg:3497155 | 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
msg:3497252 | 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
msg:3497262 | 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
msg:3497878 | 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
msg:3498047 | 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
msg:3498196 | 10:10 pm on Nov 6, 2007 (gmt 0) |
Ahh if only we lived in a pixel perfect world. :-D
|
Xapti
msg:3498384 | 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
msg:3498405 | 5:01 am on Nov 7, 2007 (gmt 0) |
LOL, this is true. :-)
|
|
