ie6 shadow issue

Question

Demo: http://jsbin.com/esupex/2

i have shadow on the box and its making the div go on the new line and if i remove the shadow, the div goes back on the same line. following are the screenshots.

ie6 shadow break-line error - full image :

ie6 no shadow (this is just to show what it looks like after no shadow, but we do need shadow) - full image :

final layout should look like this. this screenshot is from firefox - full image :

following is the line that is causing the issue and i dont know how to solve it:

filter: progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=140, Color='#eeeeee');

Answer 1

Add a negative margin to the box being rendered too low if you MUST have a shadow in IE.

http://jsbin.com/esupex/36

I added modified the to be:

#playerNavBox {
  height:36px;
  margin-right: 260px;
  *margin-top: -43px;
}

Answer 2

Do you work with a fixed or fluid layout? The problem is the most right div cannot position itself next to the left one. Give the left one a float left and a fixed width in px or % and all should be fine.

If your layout is fluid: note that borders, shadow, margin and padding in px do not play well with % and should never ever be on the same elements

Also, in IE6 if you give an element a float and on the same side a padding or margin, it will be double the margin/padding you specified. like described here:

http://davidwalsh.name/prevent-double-margin-padding-ie6-css-float

For IE6 you could use a border instead of a shadow to get more or less the same look.

Answer 3

reducing the margin and defining the width fixes the problem.

old css:

#playerNavBox {
        height:36px;
        margin-right: 260px;
        background-color:#fff;
    }

new css:

#playerNavBox {
    height:36px;
    margin-right: 260px;
    background-color:#fff;
    /* ie6 shadow fix */
    *width:81%;
    *margin-right: 250px;
}