IE css issues with news roller

Question

We have a news roller here http://www.businesseventsydney.com.au/home-page-test.cfm in the right nav column. It works great in FF and Chrome, but in IE, news stories are running into each other.

Can someone shed any light on what may be going wrong with it?

Answer 1

This seemed to work correctly in IE8, what version are you using?

Anyway, I was able to reproduce putting it into Compatibility Mode or IE7 mode.

Identifying the problem, it seems the container div which has overflow: hidden correctly set, is set to a very large height. This is the div I am referring to:

<div class="latest-news-content" style="visibility: visible; overflow: hidden; position: relative; z-index: 2; left: 0px; height: 399px; ">

I set the height to 130px and it seemed to solve the issue. The more interesting question is why does this not happen in all browsers, I've yet to investigate.

Answer 2

Sometimes there is a difference between IE versions and other browsers when it comes to pixel spacing. A work around for this would be to have an IE specific style for the ul and li elements. I would recommend that you wrap your current in line css (regardless):

<ul style="top: -465px; height: 1380px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; list-style-type: none; position: relative; z-index: 1; ...

<li style="width: 199px; height: 115px; overflow: hidden; float: none; ...

into separate classe(s) , and switch them out in IE 9 browsers for the amended versions. You probably only need to tweak the top value for the ul element, and the height of the li element

Answer 3

add position:relative to div.latest-news-container