IE vs. Mozilla Div Sizing
Ran into a problem today that I really should have forseen: as usual I coded a site so it all lines up perfectly in IE, flip over to Mozilla and it's all out of whack. I realized the reason right away: in terms of calculating widths, IE measures from border to border; Mozilla uses content. This apparently is only a problem in Windows IE less than version 6.0.
I did a search and to my surprize found that you can tell the broswer how to calculate it. I am used to IE's way, so I like border-to-border widths. Stick this in your stylesheet to force Mozilla to do it that way:
div {
-moz-box-sizing:border-box;
box-sizing:border-box;
}
(Found on this board)
This of course makes all div tags calculate this way, but you can stick it in any specific div tag if you want.
For a better explanation of the box-sizing property, I found an article on WebFX.
September 2nd, 2004 at 8:45 pm
After I wrote that I realized my IE is 6.0 - so obviously it's more than a problem than just with IE less than 6.0.
September 4th, 2004 at 3:03 am
It's rare that no body has answered to this before. Mozilla is not broken, in a webstandards way, is IE which is broken.
The way mozilla render boxes is the same way all standard compliant browsers does it, so, this workaround will fix the weirdness in mozilla (because it's a mozilla-only property) but not in Safari or Opera.
here is the box-model as it's supposed (by W3C) to be rendered and here the ultra-famous "Tantek box-model hack" which helps making IE to render pages correctly.
Now, it's easier to develop for an modern browser and then make the necessary hacks for making it work in IE
Sorry for my so-bad english. Please edit me for any gramatical errors.
BTW. I like a lot you site, but regularly it's too advanced for me, i'm glad i've finded a topic to comment in.
September 4th, 2004 at 8:37 pm
Sounded like a great idea to use this because my site looks a bit funky on Firefox and Mozilla. Unfortunately — I tried implementing this code in my stylesheet and saw no difference. Doesn't this also affect Firefox? I have three columns and my leftbar in Firefox looks squished but if I change the px values — then IE screws up. I thought this little code would fix it — is that right?
September 17th, 2004 at 6:23 pm
I'm having a problem on site with graphic headers in the left sidebar not lining up flush against the adjoining cells. They look fine in Mozilla, but in IE there is a space between the graphics and the box below them.
Any ideas?
November 2nd, 2004 at 10:50 am
I also find this problem in my site.
it is strage.
å°–é”湿疣