SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Enthusiast
    Join Date
    Oct 2007
    Location
    Hillsborough NH
    Posts
    80
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Need some help with IE9 my main home slider is all messed up

    Hello. My site is almost done and looks pretty good in everything except IE9 because the main slider on the homepage is for some reason shooting off to the right of the viewport....any ideas on how I can get this to work fine in IE9?

    http://futsal.firsttracksmarketing.com/

    Please help!

    Thanks.
    Matt Nelson
    Nelson Design Studios
    www.nelsondesignstudios.com

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,374
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Try adding clear:both to the slider as it looks like its snagging on the logo.
    Code:
    #loopedSlider .container {
        clear: both;
    
    }

  3. #3
    SitePoint Enthusiast
    Join Date
    Oct 2007
    Location
    Hillsborough NH
    Posts
    80
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Nope. That didn't do it. Added it like you listed it and thought maybe you meant to post that as this

    #loopedSlider .content {
    clear:both;
    }

    because there is no container that matches what you suggested....but I think you are onto something with the logo....I have that set with a Z-index on the #header of 1 and then the slider container shifted up with a negative margin of -35px. Any other ideas with this additional info? IE is the only thing it doesn't seem to work with...SURPRISE!

    Thanks.
    Matt Nelson
    Nelson Design Studios
    www.nelsondesignstudios.com

  4. #4
    SitePoint Enthusiast
    Join Date
    Oct 2007
    Location
    Hillsborough NH
    Posts
    80
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    quick update...when I removed the negative margin on the main slider it looked fine in IE9 but I really want to create that overlay look I have in the other browsers...any way to make it work for both?
    Matt Nelson
    Nelson Design Studios
    www.nelsondesignstudios.com

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,374
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Sorry the code I gave you was a cut and paste from firebug but I must have copied the wrong section.

    This is the code you need.

    Code:
    .business #loopedSlider  {
        clear: both;
    }
    It's from custom css line 408.

    The issue is exactly as I described and the element snags on the logo in some browsers due to the negative margin so you must clear the logo. (Its broken in Firefox also.)

    If you want the slider to slide under the logo then add a negative bottom margin to #logo.

    #logo{margin-bottom:-40px}

    You can't have a top margin on a cleared element that follows a float because the margin slides under the float so you need to do it the other way around and use a bottom margin on the floated element instead.

  6. #6
    SitePoint Enthusiast
    Join Date
    Oct 2007
    Location
    Hillsborough NH
    Posts
    80
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That did the trick! Thanks so much!
    Matt Nelson
    Nelson Design Studios
    www.nelsondesignstudios.com


Tags for this Thread

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
  •