saliences.com : Browser Bugs : CSS Sliding Doors IE (6,7) Bug

-
Content
+
Projects
+
Cars
+
Etcetera
+
Technologies

Description

The Sliding Doors of CSS avoids using inline links citing apparent display bugs in certain browsers. The eight links at the top of the page demonstrate a bug in IE 6 and 7 when it comes to attempting to perform CSS Sliding Doors using inline elements. If you resize the window so that there is not enough space to display all eight links on one line, then the amount of space reserved via paddings and margins gets collapsed as much as possible to make room. This is completely counter to every other browser. Luckily this bug is fixed in IE 8.

Below is a picture of what this looks in IE7 when the the div element overflows:

Notice how the red border around the text ”Link 1“ is hugging the text on the left side even though all of the li elements are styled the same way? This only happens when the contents of the div overflow the container.

The HTML that exposes this collapsing bug:

<div class="slidingDoorsBug">
  <ul>
    <li><a href="#">Link 1</a></li>
    <li><a href="#">Link 2</a></li>
    <li><a href="#">Link 3</a></li>
    <li><a href="#">Link 4</a></li>
    <li><a href="#">Link 5</a></li>
    <li><a href="#">Link 6</a></li>
    <li><a href="#">Link 7</a></li>
    <li><a href="#">Link 8</a></li>
  </ul>
</div>

The CSS Styles that are applied:

div.slidingDoorsBug {
    white-space: nowrap;
}
div.slidingDoorsBug ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
div.slidingDoorsBug ul li {
    display: inline;
    padding: 0 5px 0 0;
    margin: 0;
    border: solid 1px red;
}
div.slidingDoorsBug ul li a {
    border: solid 1px blue;
    padding: 5px 15px;
    white-space: nowrap;
}