SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Addict
    Join Date
    Jul 2006
    Posts
    379
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Very quick IE6 question, adding space bottom?

    Just a quick one if someone wouldnt mind helping.

    This site 3 containers the top one is adding alittle gap to the bottom of its div.

    Css
    Code:
    * { margin:0; padding:0 }
    
    body {
    	font-size:62.5%;
    	background-color: #F2F2F2;
    }
    
    .separater {clear: both;}
    
    
    /********************************* Structure Styles Go Here ********************************/
    
    
    /* >>>>>>>>>>>>>wrappers<<<<<<<<<<<<<<-*/
    
    div#bodyWrapper{
    	width:912px;
    	margin-right: auto;
    	margin-left: auto;
    }
    
    /* >>>>>>>>>>>>>containters<<<<<<<<<<<<<<-*/
    
    div.containerTop{
    	background-image: url(../assets/build/containers/top.gif);
    	height: 10px;
    	width: 912px;
    	
    }
    
    div.containerMIddle{
    	background-image: url(../assets/build/containers/middle.gif);
    	background-repeat: repeat-y;
    	height: 450px;
    }
    
    div.containerBottom{
    	background-image: url(../assets/build/containers/bottom.gif);
    	height: 20px;
    	width: 912px;
    }
    Html

    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=UTF-8" />
    <title>Untitled Document</title>
    <link href="styles/importer.css" rel="stylesheet" type="text/css" />
    </head>
    
    <body>
    
    <div id="bodyWrapper">
      <div class="containerTop"></div>
      
      <div class="containerMIddle"></div>
      
      <div class="containerBottom"></div>
      
    </div>
    </body>
    </html>
    I know its something simple but i cannot figure it out

  2. #2
    SitePoint Addict
    Join Date
    Jul 2006
    Posts
    379
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    My apologies i have added

    Code:
    /* IE 6 Hack */
    * html div.containerTop {
    font-size:0&#37;;
    }
    and it seems to have fixed it.

    Would anyone mind explaining why.

    When there is padding to the left, i add display:inline and it fixes. Padding on the bottom add font-size:0% and that fixes it.

    Will that always be the case, if it crops up again?

  3. #3
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    IE6 treats height like min-height and will increase the set height to make room for content if needed. Even if there is no text, it will still make room for it, so a small height container needs a small height font defined for it as well.

  4. #4
    SitePoint Addict
    Join Date
    Jul 2006
    Posts
    379
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thought i would bump this as its the same question on a recurring problem which the above fix i used before not always working.

    Why does IE 6 add padding to the bottom and/or the top of things and how do i get round it???
    Code CSS:
    /*************************************************************************************************
     
    Structure
     
    **************************************************************************************************/
     
     
     
    div#wrapper{width:800px; margin-right:auto; margin-left:auto}
     
    div#headerWrapper{height:126px; float:left; width:800px}
     
    div#contentWrapper{background-image:url(../assets/build/contentBackground.gif); background-repeat:repeat-y; height:200px; float:left; width:800px}
     
    div#footerWrapper{background-image:url(../assets/build/footerBackground.gif); height:210px; float:left; width:800px}
     
     
    /*************************************************************************************************
     
    Site Header
     
    **************************************************************************************************/
     
     
    div#branding{float:left; width:800px; margin-bottom:32px}
     
    div#branding h1{background-image:url(../assets/build/logo.gif); height:32px; width:234px; margin-top:15px; margin-left:10px}
     
    div#branding h1 a{display:block; height:32px; width:234px; text-indent:-7000px}
     
    ul#mainNav{height:50px; float:left; list-style:none; display:inline}
     
    #mainNav li{list-style:none; display:inline}
     
    #mainNav li a, #mainNav li a:visited{float:left; border-right:1px solid #fff; font-size:1.2em; text-decoration:none; color:white; padding-top:0; padding-right:7px; padding-bottom:0; padding-left:7px}
    #mainNav li a:hover, #mainNav li a:active{text-decoration:underline}
     
    #mainNav li#lastChild a{border-right-style:none}

    The padding at the bottom of branding seems to be adding a few pixels more in IE 6

    Not a huge problem which i wouldnt mind figuring out so i know what to do in the future

    Many thanks for any help.

  5. #5
    SitePoint Addict
    Join Date
    Jul 2006
    Posts
    379
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Is it a known problem or dependent on the situation why IE adds padding to the top and bottom?

  6. #6
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Would need to see a link to the site online - quite often such irregularities are due to a combination of things.

  7. #7
    SitePoint Addict
    Join Date
    Jul 2006
    Posts
    379
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here it is, an ever so slight couple of pixels from the body to the banner in IE6.


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
  •