Floating div disappears when background-color added to parent div in IE7

Strangely, this happens with IE7 and not IE6.

Set Up:
Inside of the mother div is a floating div (with graphics and a Flash audio player—but the content is unimportant since I’ve tried it without the Flash). The child floating div has a border all the way around.


Problem:
When I add a background-color to the mother div, the child below the top border disappears. It’s still “visible” to the cursor (hovers still work), but no visual.


Solution:
Add position: relative on the child element. Happiness ensues.

From now on, any IE6 and IE7 visual glitches will be attacked with position: relative and zoom: 1. It seems that either one or the other works in 80% of cases.

Select tag z-index glitch in IE

I thought this was fixed for IE7, but not so.

Set Up:
We have a page with 3 tabbed divs; only one is displayed at a time, while the others are display: none. The default div that displays on load contains a select tag which changes the content in a table inside that div based on date. The second div displays a dynamically generated table in standard HTML. The third and last div contains a Flash movie.


Problem:
In IE 6 & 7, when the second tab is clicked to hide the first div and display the second div, there is a mystery horizontal rule (at the same height as the top of the table in the first div). This line seems to be on the top layer, and causes anything below the line to be unclickable.


Solution:
Quickie: remove the <select> tag and use something else (custom slider or create the select menu as a DHTML drop-down instead).

This sounds like it could be fixed with the jQuery iframe method, but we haven’t tried it yet.

But what I want to know is why the select still creates the bug when it’s containing element has display: none. Does display: none mean that all the included elements are still lurking underneath? This makes no sense since normally, display: none causes the page to change size.

Solution for double margin bug in IE6

Here’s another one to cross off.

Problem:
Float a child block and add a margin on the same side as the float (so, margin-left if float: left, margin-right if float: right), and IE5-6 doubles the margin value.

Insane, right?

Solution:
For a long time, I simply halved the margin value in an IE conditional. Which is unacceptable when the margin value is odd.

But now, there’s a better solution. In the IE5-6 conditional:

.fix_doublemargin { display: inline; }

Happiness ensues!

Credit: P.I.E.