Gap in page in Chrome, fine in FF and IE

Discussion in 'Web Design, HTML And CSS' started by hgolov, Aug 26, 2010.

  1. hgolov

    hgolov New Member

    Joined:
    Aug 26, 2010
    Messages:
    7
    Likes Received:
    0
    Trophy Points:
    0
    HI,
    I have been asked to make css changes to an existing site. At one point we noticed that one page has a large vertical gap between the header and the main content, ONLY in chrome - it looks fine in ie7, ie8, and ff.
    Does anyone have any ideas how to solve this?
     
  2. shabbir

    shabbir Administrator Staff Member

    Joined:
    Jul 12, 2004
    Messages:
    15,375
    Likes Received:
    388
    Trophy Points:
    83
    Unless you can show us it would not be possible to suggest anything on the same.
     
  3. hgolov

    hgolov New Member

    Joined:
    Aug 26, 2010
    Messages:
    7
    Likes Received:
    0
    Trophy Points:
    0
    Thanks -
    diettv DOT com SLASH register DOT php
     
  4. shabbir

    shabbir Administrator Staff Member

    Joined:
    Jul 12, 2004
    Messages:
    15,375
    Likes Received:
    388
    Trophy Points:
    83
    Try to move the style element just after the form in the header and see if it is taking the space.
     
  5. hgolov

    hgolov New Member

    Joined:
    Aug 26, 2010
    Messages:
    7
    Likes Received:
    0
    Trophy Points:
    0
    Thanks for your help. This didn't work. Any other ideas?
     
  6. ManzZup

    ManzZup New Member

    Joined:
    May 9, 2009
    Messages:
    278
    Likes Received:
    43
    Trophy Points:
    0
    Occupation:
    Production Manager:Software @ ZONTEK
    Location:
    Sri Lanka
    Home Page:
    http://zontek.zzl.org
    err really confusing but cna you post the code for the main style?
     
  7. hgolov

    hgolov New Member

    Joined:
    Aug 26, 2010
    Messages:
    7
    Likes Received:
    0
    Trophy Points:
    0
    There is a ton of css here - the style sheet is over 5000 lines!
    The content div has the following css:
    Code:
    #content {
    margin:0 auto;
    overflow:hidden;
    padding-bottom:56px;
    padding-top:12px;
    width:100%;
    }
    The header div
    Code:
    #header  {
    height:145px;
    margin:0 auto;
    position:relative;
    width:100%;
    }
    The last div in the header, just above the content div:
    Code:
    #header .header_box {
    color:#FFFFFF;
    font-size:17px;
    height:36px;
    left:0;
    line-height:35px;
    overflow:hidden;
    position:absolute;
    top:106px;
    width:100%;
    }
    and the first div inside the content is:
    Code:
    sign_up  {
    float:left;
    padding-left:20px;
    padding-right:10px;
    width:647px;
    }
    Any ideas? Thank you so much for your time.
     
  8. ManzZup

    ManzZup New Member

    Joined:
    May 9, 2009
    Messages:
    278
    Likes Received:
    43
    Trophy Points:
    0
    Occupation:
    Production Manager:Software @ ZONTEK
    Location:
    Sri Lanka
    Home Page:
    http://zontek.zzl.org
    not sure but juz try t=chagin the top: values (sometime chrome get it wrong)
    n juz dont use posotion:absolute too mch
    i5s gonna mess thngs up later
     
  9. hgolov

    hgolov New Member

    Joined:
    Aug 26, 2010
    Messages:
    7
    Likes Received:
    0
    Trophy Points:
    0
    Thanks for your reply. I'm afraid that if I change the values for top, it will get messed up in other browsers. Do you have any other ideas
     
  10. shabbir

    shabbir Administrator Staff Member

    Joined:
    Jul 12, 2004
    Messages:
    15,375
    Likes Received:
    388
    Trophy Points:
    83
    May or may not and so try testing it.
     

Share This Page

  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Dismiss Notice