IE is stupid

I had some odd layout problems with the menu of this site when I finally got around to testing it in IE. The following will give a brief look at what the problem was…

View in Internet Explorer
View in Mozilla Firefox
The following CSS gives us two very different results in IE and Firefox. (IE is on the left, Firefox on the right.)

#menu ul {
	margin: 0px 0px 1em 0px;
	padding: 0.5em 1em 1em 1.5em;
	background: #3f424a;
        font-family: "Verdana", "Arial", "Helvetica", sans-serif;
	border: 1px solid #ffa623;
}
#menu ul.submenu {
	margin: -0.5em 0px 0px 0px;
	padding: 0.5em 1em 0em 1em;
	border: 0px;
}

The HTML code in use is basically the following (without the line breaks):

<ul>
  <li>First item</li>
  <li>Secong item
    <ul class="submenu">
      <li>First submenuitem</li>
      <li>Second submenuitem</li>
    </ul>
  </li>
  <li>Third item</li>
</ul>
<ul>
  <li>First item in second menu</li>
  <li>Second item</li>
</ul>

Even giving the top-level <ul>‘s a class and changing the CSS to the following
doesn’t help.

#menu ul {
	background: #3f424a;
        font-family: "Verdana", "Arial", "Helvetica", sans-serif;
}
#menu ul.rootmenu {
	margin: 0px 0px 1em 0px;
	padding: 0.5em 1em 1em 1.5em;
	border: 1px solid #ffa623;
}
#menu ul.submenu {
	margin: -0.5em 0px 0px 0px;
	padding: 0.5em 1em 0em 1em;
	border: 0px none white;
}

Moving the CSS into the elements style-attributes does nothing to improve the
situation. There is some obscure bug in IE that is giving me this headache. But
what could it be?

Quite apparently the problem is that IE ignores the fact that the submenu has
its own style declarations that should override the earlier styles.

To fix it, the following needs to be done:

#menu ul {
	margin: 0px 0px 1em 0px;
	padding: 0.5em 1em 1em 1.5em;
	border: 1px solid #ffa623;
	background: #3f424a;
        font-family: "Verdana", "Arial", "Helvetica", sans-serif;
}
#menu ul.submenu {
	margin: 0px;
	padding: 0px 1em;
	border: none;
}

Yes, I admit it. My original CSS was a convoluted mess. But I have an
explanation for it: it the reduction in the margin originally wasn’t the same
as the size of the padding. And it all still worked in Firefox.

But should this be titled Stupid developer instead of the current
title? I think not (of course ;). While IE bashing is a common hobby of
many Web developers, there is a good reason for it.
Too many of its bugs have been known for a long time and nothing is done
to fix them.

Even in this case, the way IE behaves is completely illogical. Instead of
obeying the none setting in the border when there are mutually conflicting
rules in the CSS of the class, it ignores all of the rules of the class.
Who is IE to decide when to ignore the rules? After all, the first version
of the CSS is valid.

But, one bug down. On to fixing the next bug…

Leave a Reply