Hey i have never fully understood the Box Model and why IE like to screw things up so bad but i have a simple page that looks great in FF but of course IE screws with the spacing and alignment. please take a look any help will be really appreciated.
Tek-Tips is the largest IT community on the Internet today!
Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!
-
Congratulations Chris Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!
IE BoX Model Help
- Thread starter mRko81
- Start date
BillyRayPreachersSon
Programmer
If you're talking about the large white block just under the right of the logo in IE, you can cure that by changing this:
to this:
effectively removing 40 px in IE.
However, I suggest that you really cut down on your CSS - perhaps evern start again. You have an awful lot of CSS that isn't used, as a great deal of your site is commented out (making it even harder for us to work out what you really need / do not need)... so from what I can see that you do have in, you can remove a whole load.
Hope this helps,
Dan
Coedit Limited - Delivering standards compliant, accessible web solutions
[tt]Dan's Page [blue]@[/blue] Code Couch
[/tt]
Code:
#container {
padding-left: 200px; /* LC fullwidth */to this:
Code:
#container {
padding-left: 200px; /* LC fullwidth */
_padding-left: 160px; /* LC fullwidth */effectively removing 40 px in IE.
However, I suggest that you really cut down on your CSS - perhaps evern start again. You have an awful lot of CSS that isn't used, as a great deal of your site is commented out (making it even harder for us to work out what you really need / do not need)... so from what I can see that you do have in, you can remove a whole load.
Hope this helps,
Dan
Coedit Limited - Delivering standards compliant, accessible web solutions
[tt]Dan's Page [blue]@[/blue] Code Couch
[/tt]
Dan's fix will probably temporarily fix your display, but the problem is in your css that is full of hacks. IE's box model has been fixed in IE6, which has been around since 2001.
I stripped your code ofall most unnecessary stuff and the page displays the same in both browsers. Here are a few pointers on how to do it right:
1. Create a valid standard css that should work in all browsers and test it. If it fails in some, double check that everything is ok and if it really is, look online if the difference you're experiencing is documented somewhere. If it is not, and you find no other workaround, ONLY then employ a hack to deliver different styling to IE and others.
2. Never, NEVER, absolutely NEVER, stick elements that are bigger inside containers that are smaller -- while this would be perfectly acceptable in standards compliant browsers, because a child can hang over the parent, if you're looking for browser compatibility, you cannot afford yourself to do that.
3. Don't float what doesn't need to be floated and don't clear when there's nothing to clear.
I stripped your code of
1. Create a valid standard css that should work in all browsers and test it. If it fails in some, double check that everything is ok and if it really is, look online if the difference you're experiencing is documented somewhere. If it is not, and you find no other workaround, ONLY then employ a hack to deliver different styling to IE and others.
2. Never, NEVER, absolutely NEVER, stick elements that are bigger inside containers that are smaller -- while this would be perfectly acceptable in standards compliant browsers, because a child can hang over the parent, if you're looking for browser compatibility, you cannot afford yourself to do that.
3. Don't float what doesn't need to be floated and don't clear when there's nothing to clear.
- Thread starter
- #4
Vragabond's advice is on target as usual.
-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd
One of the best places to look is , where they've documented many IE quirks and the ways to work around them.
-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd
- Status
Similar threads
- Locked
- Question