johnnyk Posted August 21, 2006 Share Posted August 21, 2006 This is only a problem because IE is evil.I want my div to have two borders. To do that, I do something like this:[code]#menu {width: 150px;height: 300px;position: absolute;top: 0;left: 0;border-right: 3px solid #999999;border-bottom: 3px solid #999999;border-left: 3px solid #999999;background-color: #000000;}#menuwrap {width: 156px;height: 303px;border-right: 1px solid #ff0000;border-bottom: 1px solid #ff0000;border-left: 1px solid #ff0000;}<div id="menuwrap"> <div id="menu"> </div></div>[/code]Now that looks fine in Firefox and I'm sure it looks fine in every browser but IE. IE puts the border of #menu inside the element because IE is pure evil. So that messes the whole thing up. When viewed in IE, it looks like #menuwrap is 6 pixels too wide and 3 pixels too high (or about that, whatever, it looks too big). How can I make this thing look good in IE [b]and[/b] in real browsers? I don't wanna use the IE conditional thing because I have another problem related to this that it will not help with. Quote Link to comment Share on other sites More sharing options...
wildteen88 Posted August 21, 2006 Share Posted August 21, 2006 I have IE7. SO i dont know what version of IE you have. But I increased the widths by 1px so they are even. All browsers displays correctly[code]<style>#menu { width: 150px; height: 300px; border-right: 2px solid #999999; border-bottom: 2px solid #999999; border-left: 2px solid #999999; background-color: #000000;}#menuwrap { width: 156px; height: 304px; padding-left: 2px; border-right: 1px solid #ff0000; border-bottom: 1px solid #ff0000; border-left: 1px solid #ff0000;}</style><div id="menuwrap"> <div id="menu">Hello world</div></div>[/code]I also got rid of the positioning too. Quote Link to comment Share on other sites More sharing options...
ToonMariner Posted August 21, 2006 Share Posted August 21, 2006 why not get rid of the external div - its not really needed in the html..just set the border toborder: 3px double #f00; Quote Link to comment Share on other sites More sharing options...
moberemk Posted August 21, 2006 Share Posted August 21, 2006 That won't work, because, if you look more closely, you see that he has two separate border colours. Quote Link to comment Share on other sites More sharing options...
ToonMariner Posted August 21, 2006 Share Posted August 21, 2006 sorry - wasn't looking....have a look for css ie hacksthis is the first on google and i used to use it a lot - now i code my html so i don't have to screw with ie ;)[url=http://css-discuss.incutio.com/?page=BoxModelHack]http://css-discuss.incutio.com/?page=BoxModelHack[/url] Quote Link to comment Share on other sites More sharing options...
johnnyk Posted August 23, 2006 Author Share Posted August 23, 2006 New problem[code]#div {margin-left: 158px;padding: .5em;}[/code]In real browsers, once the text in the div reaches the right edge of the viewport it wraps, but in IE the div expands 158px to the right, the same size as the marign, and then wraps. Quote Link to comment Share on other sites More sharing options...
ToonMariner Posted August 23, 2006 Share Posted August 23, 2006 put your page up and I'll see if I can help... Quote Link to comment Share on other sites More sharing options...
dustinnoe Posted September 4, 2006 Share Posted September 4, 2006 Use this DOCTYPE so that IE6 will render the box model properly[code]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[/code] Quote Link to comment Share on other sites More sharing options...
dbrimlow Posted September 22, 2006 Share Posted September 22, 2006 [quote author=dustinnoe link=topic=105010.msg427646#msg427646 date=1157365734]Use this DOCTYPE so that IE6 will render the box model properly[code]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[/code][/quote]Contrary to initially reported claims, IE 6 does NOT conform to Standards with the strict XHTML doctype. I have been fighting IE 6 to behave for 2 years.Among others, it does not support min-width, max-width; you need to muddy your clean code by using "conditional comments.It is nearly impossible to help you without seeing the rest of your css and in context within a webpage. IE is very strange when it comes to "cascading" and can handle it differently than a real browser. It also uses its own defaults for items you don't actually put in your css (like a:visited).But, a problem I had for ages was trying to specify and use all fixed widths and px sized fonts.A part of your problem could be using em font sizes within a fixed width container or vicea versa.Try either using flexible containers or fixed fonts.Assuming your #menu is the content and #menuwrap is the container:#menu { width: 100%; height: 100%; border-right: 2px solid #999999; border-bottom: 2px solid #999999; border-left: 2px solid #999999; background-color: #000000;}#menuwrap { font-size:0.9em; width: 20%; height: 100%; padding-left: 2px; border-right: 1px solid #ff0000; border-bottom: 1px solid #ff0000; border-left: 1px solid #ff0000;}The other problem you are having is that you do not specify a width for your div:#div {margin-left: 158px;padding: .5em;}Paddings, Margins, Borders are the big killers in any IE; it is the dreaded "box problem" in a nutshell. But here you are designating a flexible padding! YE! GADS! IE is going to go to town with that! Since you haven't designated a width for the DIV IE's flex padding is going to determine it for you.I would love to see what you are trying to do with this. If it works in real browsers but blows upin IE, then the fix is right at your fingertips. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.