Take the 2-minute tour ×

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.


share|improve this question
I like the theme. –  SLaks Jan 6 '10 at 22:48
err which image has spacing problems? –  Hogan Jan 6 '10 at 22:51
Cheers for picking that up SLaks, it's obviously one of those late night typing errors ^^ –  Qwibble Jan 6 '10 at 23:47
add comment

6 Answers

up vote 2 down vote accepted

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.

share|improve this answer
You are a life saver. Unsure why the Jquery does that, but I've fixed it with an overriding value in my stylesheet, and I'll contact the author of the Jquery carosuel with the bug. Thanks Emily –  Qwibble Jan 6 '10 at 23:47
add comment

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.


share|improve this answer
add comment

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; ... }
share|improve this answer
add comment

Does this help?

.roundabout-moveable-item a{ 
 top: 5px;
share|improve this answer
add comment

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


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.

share|improve this answer
add comment

Try adding:

position: relative;

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

share|improve this answer
add comment

Your Answer


