SitePoint Sponsor

User Tag List

Results 1 to 7 of 7

Hybrid View

  1. #1
    SitePoint Member
    Join Date
    Sep 2012
    Location
    Queensland, Australia
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Positioning problem with #inner element with Chrome

    I can't work out how to fix a positioning problem with #inner which doesn't display correctly in Mac Version 10.8.2 Google Chrome Version 22.0.1229.79. The #inner is pushed down by about 212px. But in Firefox and Safari (all latest versions) it displays correctly.

    In Chrome: http://www.diigo.com/item/image/2ow5n/8mqb
    In Firefox: http://www.diigo.com/item/image/2ow5n/2eom
    Website Link: http://www.leadershipqld.com.au/

    Can anyone help?

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,112
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Hi nikcree . Welcome to the forums.

    Hm, tricky. Somehow, it seems to be the JavaScript causing troubles. With JS off, the slideshow disappears altogether. One thing I'd suggest is to set a height for the slider-wrap div in the CSS, such as

    Code:
    #slider-wrap {height: 614px;}
    That way, the div below might get less confused trying to find its position. Worth a try, anyway.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  3. #3
    SitePoint Member
    Join Date
    Sep 2012
    Location
    Queensland, Australia
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the suggestion ralph.m. I set the height of the slider-wrap and it pushed the #pagewrap done OK but the #inner does not seem to position correctly. It should be higher as in Firefox.

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,112
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Have you removed the style? I don't see it there. It would be interesting to see it in place, as I suspect that's the first step, if not the whole solution. Maybe even post a test page with that style in there.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  5. #5
    SitePoint Member
    Join Date
    Sep 2012
    Location
    Queensland, Australia
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Got it now. Altered the CSS as follows and this did the trick:

    Code:
    #slider-wrap {
    background: none repeat scroll 0 0 #EEE;
    margin: 0 0 -170px;
    padding: 0;
    position: relative;
    z-index: -100;
    }
    
    #pagewrap {
    background: url('images/shadow.png') no-repeat scroll center 0 transparent;
    padding: 0;
    position: relative;
    clear: both;
    top: -170px;
    }
    Thanks for your help

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,112
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Glad you found a solution. The only thing I didn't like about that solution (and why I didn't suggest it) is that it creates a big gap before the footer. I guess you could pull that up too, but it's not ideal.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."


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
  •