Google Chrome not floating fiv under <ul> list

HTML & CSS
1

I’ve got a layout which can be found at http://hottech.rollertestingserver.co.uk/technology/solar-boosted/

There is a <div #oLinkArea> underneath the scrolling <ul> list and in Google Chrome on certain pages this wont appear underneath but stays at the top.

It doesn’t happen in FF but Chrome only and also doesn’t always occur on the other pages using the same template such as http://hottech.rollertestingserver.co.uk/technology/instantaneous-water-heaters/

Can anyone advised what might be causing this issue?

Thanks

2

At first glance, i’d add a float:left to the <ul id=“slider”>. That way your clear:both will clear the float which should make your div#oLinkArea appear directly below it.

If this doesn’t work, let me know and i’ll dig a little deeper.

3

The slider has absolutely positioned <li>'s in it, so other content has no idea it’s actually there. I’ll give you that hint for now, along with this hint…You need to make that space not able to be overlapped by static content.

4

Thanks Guys,

Still not having any luck. I tried floating left and also I noticed it is only happening on those sliders that only contain images within the <li> so I added some css styling giving this a height and float but still no luck.

Any more advice?

5

The images are 340px high, so set the slider to have some top padding :).

#oGridHolder #oGridTwoLayout #oGridLayoutRight #slider{height:340px;}

It’s ok to have a height set here because it’s not like the images will be any bigger.