s

Posts Tagged with "ie sucks"

IE double margin float bug

Sep 15, 2006  -  Comments

I'm sure most people have come across this bug once or twice (or a hundred times). You have a div with a set width and it's floated left or right. You also give it a margin on the same side that it's floated to push it away from the edge of the containing area. Works great everywhere . . . EXCEPT IE! Of course. Your CSS might look something like this:

#box {
  width: 200px;
  float: left;
  margin-left: 20px;
}

The problem with IE/Win is that it doubles the margin that's on the same side as the float. Why does it do this, you ask? Because it's IE. If it behaved the way it was supposed to, it would be Firefox.

There's actually a really simply fix for this. All you have to do is add the magical display:inline to your div, so your final code would be:

#box {
  width: 200px;
  float: left;
  margin-left: 20px;
  display: inline;
}

You can find this hack and many more at this great CSS resource Web site.

Tagged: xhtmlcssie sucks

IE giving small divs a minimum height

Jun 12, 2006  -  Comments

I ran into a funny problem recently. I had to build an odd layout for a new website at work that involved text following a bending curve. Well, I just gave different padding to each of the <p> tags to accomplish the flowing effect. There were also divider lines between each paragraph that were shorter horizontally than the paragraphs. So, to get around this, I figured I could just create a div with a set width, a height of 2px, and a border-bottom. Of course, this worked fine in all browsers. . . except IE.

For some reason, the div in IE defaulted to a height of around 10px. This was very odd seeing as how I specified a height of 2px in the CSS. Well, after some playing around and a little Google-ing I figured out the problem. Apparently, IE will override the height property if the line-height is greater than the height. So, to get around this little problem, simply set your line-height to a value equal to or less than the desired height of the div.

Here is my code:

.line {
   width: 218px;
   height: 2px;
   line-height: 1px;
   border-bottom: 1px solid #CED9DF;
}

Update: After some more research into the problem, it turns out that IE 6 thinks the height of your div is only as small as your font-size. So, instead of setting your line-height to zero or a small number, set your font-size, like so:

.line {
   width: 218px;
   height: 2px;
   font-size: 0;
   border-bottom: 1px solid #CED9DF;
}

Tagged: xhtmlcssie sucks