Internet Explorer 6 (IE6) has extra white space gap after a empty, fixed size div with a background-image

I was trying to fix a small display issue with one of our pages in IE6. I had an unordered list that we set the background color on and wanted to add rounded images to the top and bottom to give it a nice look.

The rounded top image

The HTML

<div class="container">
   <div style="height: 6px; width: 190px; background-image: url(../images/top.gif); background-repeat: no-repeat;">
   </div>
   <ul style="background-color:#763000;">
       <li><a href="#">Item 1</a></li>
       <li><a href="#">Item 2</a></li>
       <li><a href="#">Item 3</a></li>
   </ul>
   <div style="height: 6px; width: 190px; background-image: url(../images/bottom.gif); background-repeat: no-repeat;">
   </div>
</div>

Simple enough. Everything works great in IE7, Firefox, Chrome, etc... I get a report of extra white space after the top rounded image. I track down a system running Windows XP with IE6 and I fire it up. Sure enough, a bit of white space after the top div. But why....

The Problem

I tried everything that seemed to make sense. Checked margins, padding, etc... Everything was either good or changing it did nothing. Unfortunately in IE6 I didn't have access to my favorite tools like Firebug, so it was even more frustrating. Eventually I figured it out and I think I know what's going on.

IE6 assumes a font-size of 20px. Since my background-image was only 6px in height, when I set the height on the div it was ignored. The div would try to shrink to my set height, but would end up limited by the assumed font-size of 20px. By setting the font-size to something smaller in height than my desired 6px, it would solve the problem. Remember this when dealing with empty divs IE6. Hope it helps someone.

The HTML that works

By setting the font-size style in the "empty" div, IE6 allows the div to shrink to my desired height of 6px.

<div class="container">
   <div style="height: 6px; font-size:0em; width: 190px; background-image: url(../images/top.gif); background-repeat: no-repeat;">
   </div>
   <ul style="background-color:#763000;">
       <li><a href="#">Item 1</a></li>
       <li><a href="#">Item 2</a></li>
       <li><a href="#">Item 3</a></li>
   </ul>
   <div style="height: 6px; font-size:0em; width: 190px; background-image: url(../images/bottom.gif); background-repeat: no-repeat;">
   </div>
</div>

Centering an Element via CSS vs JavaScript...

We recently ran into a situation where we were dynamically showing and centering model popup windows in an ajaxified environment. Our initial implementation had one down side.

We were showing and dynamically centering our div/panels via JavaScript. The windows would very briefly show up in its default location before jumping to center. Not a huge problem, but very annoying.

Our initial approach looked something like this. Statically build a hidden div/panel and when the user triggers a pop up dialog, call the CenterPanel method from JavaScript and show the panel. We were calculating the screen height and width and making it available globally.

The JavaScript process looked something like this...

CenterPanel("<%= SendToGeneralQueuePopupPanel.ClientID %>");

function CenterPanel(panelId){
  var panel = document.getElementById(panelId);
    if (panel) {
      panel.style.top = ((screenHeight / 2) - (GetSize(panel.style.height) / 2)) + 'px';
      panel.style.left = ((screenWidth /2) - (GetSize(panel.style.width) / 2)) + 'px';
  }
}

The result was a panel that would show up, then jump to the center of the screen. (Annoying)

After getting a bit of time to think about the issue, I remembered a much simpler way to center a control with pure CSS rather than dealing with problematic JavaScript at all. I'd used this technique in other projects and it makes things quite a bit more simple and stops the panel from jumping around the screen.

The CSS method...

We define a Panel to use as the pop that applies our modalPopup CssClass. Notice that the panel's Width is 200 and it's Height is 60.

<asp:Panel ID="PanelPopup" runat="server" CssClass="modalPopup" Width="200" Height="60">
<div style="text-align:center;">
Are you sure you wish to continue?

</div>
<div style="text-align:center;">
<asp:Button ID="ButtonYes" runat="server" Text="Yes" OnClick="ButtonYes_Click" />

<input id="ButtonNo"
type="button" value="No"
onclick="return HidePopupPanel('PanelPopup', '<%= PanelPopup.ClientID %>');" />
</div>
</asp:Panel>

The modalPopup CSS...

.modalPopup{
//Other CSS
left:50%;
margin-left:-100px;
top:50%;
margin-top:-30px;
}

The CSS above sets the left edge of the panel to be aligned with the center of the browser and then adjusts the left margin of the panel by subtracting 100 pixels (which happens to be half of the panel's width.) This centers the panel horizontally. In the same way, the panel is centered vertically by setting the top of the panel to the middle of the screen and then adjusting the top margin by subtracting 30 pixels which is half of the panel's height.

You can do a lot of fun stuff by using this technique. Setting the left, top, right or bottom of a control and then modifying the margins. Play around with it...