Question

I have a website with an image that is absolutely positioned in the header. It looks like it’s working everywhere but IE6/7. My image is positioned absolutely within a header that has relative positioning. The image continues to push down the height of the header.

/*div*/
#header{padding:0;overflow:visible;position:relative;min-height:140px;margin:0;}
/*image*/
#bod{position:absolute;top:0px;left:-95px;}

I tried to change to a fixed height but that screwed up the cart item on the right hand side.

The website is greatcaesars.com.

If anyone has a suggestion on what I might do to fix this, I’d appreciate it.

Answer 1

In older versions of IE, height is treated a lot like min-height, and min-height doesn’t work at all.

Try this:

#header{padding:0;overflow:visible;position:relative;min-height:140px;margin:0;}
#header{height: 140px;}
html > body #header{height: auto;}

The use of > to indicate immediate children, isn’t recognised by older versions of IE.