0

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?

Chris
  • 2,630
  • 3
  • 31
  • 58
user460114
  • 1,848
  • 3
  • 31
  • 54
  • It looks like you have a predefined height on all of the div's containing the news. On IE-9 text running into each due to the height not being tall enough for the text.. either shrink text or increase height or limit number of characters. – AbstractChaos Sep 14 '12 at 10:56

3 Answers3

0

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.

Chris
  • 2,630
  • 3
  • 31
  • 58
  • Oh, the reason newer browsers work is because the height of the parent container `class="latest-news-container"` is set to height 135px so this stops the child from growing any higher. You could actually remove the height completely from `class="latest-news-content"` and let it grow to 100%, in this case the height of its parent. – Chris Sep 14 '12 at 11:02
  • div.latest-news-content li{height:134px; !important} solved this. – user460114 Sep 14 '12 at 11:48
0

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

JDandChips
  • 9,780
  • 3
  • 30
  • 46
0

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

Baz
  • 36,440
  • 11
  • 68
  • 94
alabamaliquidsnake
  • 1