SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Enthusiast
    Join Date
    Nov 2002
    Location
    Cornwall, UK
    Posts
    74
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    strange gap problem

    I've got a strange gap in my page and have searched everywhere for an answer but have had no luck so far

    This is the code for my page and I know that it is the .header-bottom div that is causing the problems but not sure how to fix it. I'm hoping someone out there will have some ideas as I'm all out

    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    <STYLE type=text/css>
    <!--
    *{margin:0;padding:0}
    .header-top { background-color:#990000;}
    .tl div{background:url(lft-corner.gif) no-repeat top left;width:100%;}
    .tl {background:url(rgt-corner.gif) no-repeat top right;width:100%;height:10px;}
    #header h1 {font-size:1em;background:url(header-bg.gif) repeat-x top left; width:100%;height:40px;}
    .header-bottom {background:url(base-bg.gif) repeat-x top left;width:100%;height:10px;}
    #globalnav {background-image:url(nav-bg.gif); width:100%; height:30px;margin-top:0;}
    #globalnav li{font-size:0.8em; line-height:30px;list-style:none;display: inline;}
    -->
    </STYLE>
    </head>
    <body>
    <div id="header">
    <div class="header-top">
    <div class="tl"><div></div></div>
    </div>
    <h1></h1>
    <div class="header-bottom"></div>
    </div>
    <div id="globalnav"></div>
    </body>
    </html>
    Many thanks

    Alix

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

    Its hard to see without all your images so I'm guessing that this is your problem. Ie won't render an elements height less than the current font size/line height unless you set font:size to zero or use overflow:hidden.

    Code:
    .tl {background:url(rgt-corner.gif) no-repeat top right;width:100%;height:10px;overflow:hidden;}
    .header-bottom {background: url(base-bg.gif) repeat-x top left;width:100%;height:10px;overflow:hidden;}
    Hope that's it

  3. #3
    SitePoint Enthusiast
    Join Date
    Nov 2002
    Location
    Cornwall, UK
    Posts
    74
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thank-you

    Many thanks - it worked! I'll add that to my list of things to check now.

    Alix

  4. #4
    SitePoint Enthusiast
    Join Date
    Jan 2005
    Location
    victoria
    Posts
    26
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I love it when you search for solution to your problem and you find it first try!!

    Paul, once again, THANKS!!!

    - Allan


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
  •