IE6 and 7 bug causing a big headache

Question

Hey guys, I've spent hours looking at this, and am hoping a fresh pair, or even a more experience pair of eyes on this may help get it solved. Whilst IE6 support isn't especially needed, IE7 is, and that's causing problems for my image scroller.

Can anyone possibly take a look and see what's causing the massive spacing above and below the image within its parent div? You'll be able to see better in IE6 as IE7 doesn't display the overflow.

Heres the link : http://www.qwibbledesigns.co.uk/preview/aurelius/

I'm really grateful to anyone who has a look at this and can offer up any speculation, or solutions to whats happening.

Matt

Answer 1

I can't really tell and don't have the debugging tools for IE installed, but seeing as the extra space plus the image are exactly one viewport height (100%) tall, I think it's one of these:

.roundabout-moveable-item img { 
 ....
 height: 100% 
 }

or the

font-size: 100%

from your reset stylesheet.

I will learn tomorrow whether I was right.

Night!

Answer 2

Try adding these to roundabout-moveable-item (one at a time to see if one works):

.roundabout-moveable-item { display: inline; ... }

.roundabout-moveable-item { line-height: 0; font-size: 0; ... }

Answer 3

Does this help?

.roundabout-moveable-item a{ 
 position:absolute;
 left:5px;
 top: 5px;
}

Answer 4

I am going through something similar ATM. Have a look at this thread:

http://doctype.com/ie7-div-positionabsolute-problem

Seems that it's something to do with absolute positioning, there are a few suggestions that you can try. For me none worked reliably in all browsers and i had to do an IE specific hack to offset the margin of the absolutely positioned element like so:

/margin-top: -50px;

Only IE picks up this style, the rest of the browsers disregard it due to / in the beginning of the line.

Answer 5

Your inline styles for the li are setting huge font sizes for IE

<li class="roundabout-moveable-item roundabout-in-focus" style="z-index: 400; position: absolute; filter: alpha(opacity=100); WIDTH: 600px; zoom: 1; height: 300px; font-size: 500px; top: -1px; left: -52px;" degrees="0" startPos="600,300,500" current-scale="1.0000" jQuery1262819600298="2">

The inline styles for firefox for the same li is

<li class="roundabout-moveable-item roundabout-in-focus" style="position: absolute; left: -52.5px; top: -1.5px; width: 600px; height: 300px; opacity: 1; z-index: 400; font-size: 12px;" degrees="0" startpos="600,300,12" current-scale="1.0000">

It is the font-size:500px in IE vs. the font-size:12px in FF that is causing the extra space.

Answer 6

Try adding:

position: relative;

to your debugging area of code (at the top of http://www.qwibbledesigns.co.uk/preview/aurelius/css/reset.css)