IE7/IE8 spacing with position:absolute?

Question

See: http://bit.ly/cq4bYF

Problem is the vertical-alignment on the carousel and < > buttons. Chrome and FireFox load accurately. IE7/IE8 the elements should be another 20px lower.

Anyone know a Solution?

Thank You!

Answer 1

Looks like you have to make a new style sheet to fix this, make a new stylesheet, and put it in a conditional statement under the stylesheet you already have in your header. Then in the new stylesheet put the following code. That should work. If you can't figure out how to create just an IE stylesheet go to http://css-tricks.com/how-to-create-an-ie-only-stylesheet/

#header_slider{
z-index:1;
position:absolute;
margin-top:20px;
width:500px;
height:320px;
overflow:hidden;
}

To get the Conditional statement put the following code under where you have the stylesheet called

<!--[if IE ]>
    <link rel="stylesheet" href="The/url/to/your/new/ie/stylesheet.css" />
<![endif]-->