SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Evangelist
    Join Date
    Oct 2005
    Posts
    405
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Google Chrome not floating fiv under <ul> list

    I've got a layout which can be found at http://hottech.rollertestingserver.c...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.c...water-heaters/

    Can anyone advised what might be causing this issue?

    Thanks

  2. #2
    SitePoint Enthusiast
    Join Date
    Jan 2009
    Location
    Michigan
    Posts
    70
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #3
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,570
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    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.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  4. #4
    SitePoint Evangelist
    Join Date
    Oct 2005
    Posts
    405
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #5
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,570
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    The images are 340px high, so set the slider to have some top padding .
    Code:
    #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.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •