Jump to content

Archived

This topic is now archived and is closed to further replies.

johnnyk

Help with IE bullshit

Recommended Posts

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.

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites
why not get rid of the external div - its not really needed in the html..

just set the border to

border: 3px double #f00;

Share this post


Link to post
Share on other sites
That won't work, because, if you look more closely, you see that he has two separate border colours.

Share this post


Link to post
Share on other sites
sorry - wasn't looking....

have a look for css ie hacks

this 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]

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites
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]

Share this post


Link to post
Share on other sites
[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.

Share this post


Link to post
Share on other sites

×

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.