In a page I have a drop down menu (in the #header div) and a h2 title (in the #content div, which is separate from the #header div).  Somehow, adding "position:relative" to the h2 will break the layout of the drop down menu.

I am using a background image next to the h2 title. IE6 messes up the alignment  (I want the image to stick out to the left of both the title and content) and so I added the following fix:

#content #main h2{
    display:block;
    position:relative; 
    left:-50px;
    padding-left:50px;
    margin:0;
    line-height:40px;
    background-position:0;
    }

The position:relative line causes the drop-down menu to break the following ways:

  • no background is displayed (becomes transparent)
  • the padding around the links in the drop down become too small and prevents the user from being able to click on the bottom links (the drop down folds back prematurely)

What makes it even weirder is that they are two independent elements (one is not a child of the other) so their CSS formatting should not interact.

The problem is solved by removing the position:relative property. This makes the graphic aligned with the text. I ended up wrapping the text in its own div and indenting it.