SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Aug 2004
    Location
    Massachusetts, USA
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Small gap between image and horizontal nav bar in IE

    The layout I'm working on displays fine in Firefox and Mozilla, but in IE I get a small gap between my header image and the horizontal menu bar (an unordered list), which are in two seperate div layers. The layout in question can be seen at http://www.lodenocity.com/layout-flowers/index.htm.

    I've spent a while researching the problem, but nothing I've tried has worked. Every margin and padding I can find is set to zero, I've tried the height:1% hack, and I don't think IE's 3-px jog bug is responsible because neither of the layers in question are floated. There aren't any extra spaces in my code that IE could interpret as asked-for gaps.

    Here are my stylesheet and the important part of the html.

    Code:
    body{
    	background-image: url(http://www.lodenocity.com/layout-flo...lue-orange.jpg);
    	background-attachment: fixed;
    	background-repeat: repeat;
    	text-align: center;
    }
    
    #container{
    	width: 720px;
    	border-top: 1px #000000 solid;
    	border-bottom: 1px #000000 solid;
    	border-left: 1px #000000 solid;
    	border-right: 1px #000000 solid;
    	margin-right: auto;
    	margin-left:auto;
    	text-align: center;
    	padding: 0;
    	background-color: #E7EBF4;
    	background-image: url(http://www.lodenocity.com/layout-flo...lue-orange.jpg);
    	
    }
    
    #container:after{
    	content: ""; 
    	display: block; 
    	height: 0; 
    	clear: both; 
    }
    
    #header{
    	border: 0;
    	width: 720px;
    	height: 164px;
    	margin: 0 0 0 0;
    	padding: 0 0 0 0;
    	vertical-align: bottom;
    }
    
    #topnav{
    	padding: 0px;
    	margin-bottom: 25px;
    	margin-top: 0px;
    	border-top: 1px solid #000000;
    	border-bottom: 1px solid #000000;
    	background-image: url(http://www.lodenocity.com/layout-flo...lue-orange.jpg);
    	vertical-align: top;
    }
    
    * html #topnav{
    	height: 1%;
    }
    
    #menu ul {
    	margin-left: 0;
    	padding-left: 0;
    	display: inline;
    	margin-top: 0;
    	padding-top: 0;
    	} 
    
    #menu ul li {
    	margin-left: 0;
    	padding: 0px 50px;
    	border-left: 1px solid #000000;
    	list-style: none;
    	display: inline;
    	margin-top:0;
    	padding-top: 0;
    	}
    	
    #menu ul li.first {
    	margin-left: 0;
    	margin-top: 0;
    	padding-top: 0;
    	border-left: none;
    	list-style: none;
    	display: inline;
    
    	}
    
    #main{
    	width: 720px;
    	text-align: center;
    
    }
    
    #content{
    	text-align: left;
    	margin-left: 15px;
    	margin-top: 15px;
    }
    
    #content #sidebar{
    	float: right;
    	width: 150px;
    	text-align: left;
    	vertical-align: top;
    	margin-left: 15px;
    }
    
    
    
    <http Content-Type: text/html; charset=ISO-8859-1>
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    
    <head profile="http://gmpg.org/xfn/1">
    <title>Lodenocity.com</title>
    	
    
    <link href="flowers_blue-orange.css" rel="stylesheet" type="text/css" />
    
    <body>
    
    <div id="container">
    
    <div id="header">
    <img src="http://www.lodenocity.com/layout-flowers/header_blue-orange.jpg" alt="Lodenocity.com" class="header" />
    </div><div id="topnav">
    <div id="menu">
    <ul>
    <li class="first">Home</li>
    <li>About</li>
    <li>Books</li>
    <li>Icons</li>
    <li>Links</li>
    <ul>
    </div>
    
    </div>
    
    <div id="content">
    
    <div id="sidebar">
    <p>content content content content content 
    content content content content content content 
    content content content content content content 
    content content content content content content 
    content content content content</p>
    </div>
    
      <p>content content content content content 
    content content content content content content 
    content content content content content content 
    content content content content content content 
    content content content content content content 
    content content content content content content </p>
    
    </div>
    </div>
    </body>
    </html>
    I've seen several posts about this on the forums, but no one's ever offered an answer. I'm going crazy here, so appreciate some help.

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,338
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    I got a 4040 on your page but the first thing to try is setting the image to display block.
    e.g.
    Code:
    #header img {display:block}
    Images are treated as text and leave room for descenders. Setting the image to display block usually cures the problem. (Also setting an explicit height on the header can sometimes work also.)

    Paul

  3. #3
    SitePoint Member
    Join Date
    Aug 2004
    Location
    Massachusetts, USA
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That fixed it! Thanks so much!


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
  •