CSS Display Bugs in IE

Float Drop Bug

This bug occurs when you have a floating box and the content that should be next to it is pushed underneath. It is a well known bug and has many solutions. The best solution is to avoid using CSS and use tables for this kind of layout. Sometimes this is not possible, so we must hack the CSS until it does what we want.

As an example, suppose you have a fixed width main content area, say 800 pixels wide. On the left is a floating sidebar that has float: left and is 200 pixels wide. We want the main body of content to fill the rest of the space.

  <div style="width: 800px;">
    <div style="float: left; width: 200px;">
       Sidebar content goes here.
    </div>
    <div class="body">
       Rest of content should flow around the sidebar
    </div>
  </div>

In IE, the contents in the body can end up below the sidebar rather than to the right of it. To fix this, make sure all content in body is less than the width of the body area, which is 800 - 200 = 600 pixels wide. Then modify the body CSS definition,

.body {
  display: inline;
  width: 600px;
}

Header Background Color Vanishes

Problem: A colored header, such as the blue screenlet-header style, loses its background color if it touches the top of the screen. This generally occurs when there is a floating element next to the header.

This problem is most noticable when creating orders in the OFBiz ordermgr. Some of the headers have yellow links in them, and when the blue background does not show up, it looks really ugly.

We fixed the problem with the CSS tag .subSectionHeader in opentaps.css, which is why we prefer to use that over screenlet-header. To fix it for screenlet-header or other styles that might have a problem,

.screenlet-header {
  _height: 1em;
}

The height is interpreted by IE as the minimum height that the div should span, forcing it to color at least that much. IE is the only browser that understands the underscore, so this is a safe hack.