Jump to content


Photo

Help with IE bullshit


  • Please log in to reply
8 replies to this topic

#1 johnnyk

johnnyk
  • Members
  • PipPipPip
  • Advanced Member
  • 126 posts

Posted 21 August 2006 - 02:36 AM

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:
#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>

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 and 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.
Rediscover the Web:
<a href="http://www.spreadfir...;t=219"></a><br />

#2 wildteen88

wildteen88
  • Staff Alumni
  • Advanced Member
  • 10,482 posts
  • LocationUK, Bournemouth

Posted 21 August 2006 - 08:57 AM

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

<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>
I also got rid of the positioning too.

#3 ToonMariner

ToonMariner
  • Members
  • PipPipPip
  • Advanced Member
  • 3,342 posts
  • LocationNewcastle upon Tyne, UK

Posted 21 August 2006 - 11:14 AM

why not get rid of the external div - its not really needed in the html..

just set the border to

border: 3px double #f00;
follow me on twitter @PHPsycho

#4 moberemk

moberemk
  • Members
  • PipPipPip
  • Advanced Member
  • 695 posts

Posted 21 August 2006 - 01:57 PM

That won't work, because, if you look more closely, you see that he has two separate border colours.
Disclaimer: No matter how harsh I may be, I'm always IMO only.

#5 ToonMariner

ToonMariner
  • Members
  • PipPipPip
  • Advanced Member
  • 3,342 posts
  • LocationNewcastle upon Tyne, UK

Posted 21 August 2006 - 02:07 PM

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 ;)

http://css-discuss.i...ge=BoxModelHack
follow me on twitter @PHPsycho

#6 johnnyk

johnnyk
  • Members
  • PipPipPip
  • Advanced Member
  • 126 posts

Posted 23 August 2006 - 06:29 PM

New problem

#div {
margin-left: 158px;
padding: .5em;
}

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.
Rediscover the Web:
<a href="http://www.spreadfir...;t=219"></a><br />

#7 ToonMariner

ToonMariner
  • Members
  • PipPipPip
  • Advanced Member
  • 3,342 posts
  • LocationNewcastle upon Tyne, UK

Posted 23 August 2006 - 11:26 PM

put your page up and I'll see if I can help...
follow me on twitter @PHPsycho

#8 dustinnoe

dustinnoe
  • Members
  • PipPipPip
  • Advanced Member
  • 187 posts
  • LocationWarner Robins, GA

Posted 04 September 2006 - 10:28 AM

Use this DOCTYPE so that IE6 will render the box model properly

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">


#9 dbrimlow

dbrimlow
  • Members
  • PipPipPip
  • Advanced Member
  • 712 posts

Posted 22 September 2006 - 08:43 PM

Use this DOCTYPE so that IE6 will render the box model properly

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">


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.

Dave

I am always amazed by no matter how much I know, I know I don't know as much as I thought I knew.  - D. Brimlow.




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users