IE Margin Bug and a Border Fix

Posted by: Travis Schmeisser on Friday August 25, 2006

Last week, while surrounded by laptops during a debugging session I found an odd IE bug.

The bug was forcing open the bottom and top of a container div.

The Bug Caught in Action

Here’s what the layout should look like: See how the dotted lines stop at the top of the circle numbers?

Correct Layout

Now, here’s what it looked like in IE: See how the dotted lines extend to the top and bottom?

Layout Mucked up by IE

Huh?

I wasn’t sure if the entire element was expanding or just the background was breaking out. It seems weird, but then again IE also duplicates characters.

The Code That Makes it Happen

The HTML (with dummy copy in place):


  <div id="steps">
  <div class="step">
  <img src="_img/iconStep1.gif" border="0" alt="Step 1" />
  <h3>Discover</h3>
  <p>Our exercises are easy and thorough. You'll learn a lot!</p>
  </div> <!-- close .step -->
  <div class="step">
  <img src="_img/iconStep2.gif" border="0" alt="Step 2" />
  <h3>Reveal</h3>
  <p>Find all the aspects of your dream home inside!</p>
  </div> <!-- close .step -->
  <div class="step last">
  <img src="_img/iconStep3.gif" border="0" alt="Step 3" />
  <h3>Build</h3>
  <p>Take your results to your builder and get your dream home!</p>
  </div> <!-- close .step -->
  <div class="clear"></div>
  </div> <!-- close #steps -->

The CSS:


#steps {
  margin: 0 0 20px 0;
  background: #fff url(../_img/dashSteps.gif) repeat-y top center;
}
#steps a:link, #steps a:visited {
  color: #11244f;
  text-decoration: none;
}
#steps a:hover, #steps a:active {
  color: #89b7d7;
  text-decoration: none;
}
div.step {
  float: left;
  margin: 0 20px 0 0;
  width: 145px;
  text-align: center;
}

The Solution!

As I was poking around trying to figure out the problem with the usual methods I hit it. I added a border to the top and bottom to confirm where the element was begining and ending and it snapped right into place!


#steps {
  border-top: 1px solid #fff;
  border-bottom: 1px solid #fff;
  margin: 0 0 20px 0;
  background: #fff url(../_img/dashSteps.gif) repeat-y top center;
}

Simply switching the declaration to match the background color gives us the IE fix, while not taking anything away from our smarter browsers. Best of all – no hacks!

Filed under: Code, Resources