Where's the whitespace coming from?! ( 5 Views )

1. I've been trying to put together a template and no matter what way I code it, I continually run into a problem with extra whitespace. If you view the following page - http://www.acquiweb.com/fmnsoft/index2.htm - you will see that for the image under the menu and to the right of the logo theres exactly 3px of white space. I've split this design which is 770px wide into 2 with a left and right col. Both cols sit in a div with a border-left of 6px.
   
   The logo is 312px wide so the left col is then 318px leaving 452px for the right col. Only when I make the containing div 773px will the image appear under the menu, if I revert to 770px it jumps below the left hand content. I've margins, padding and borders all set to 0. At the moment I'm only testing in IE5.5, please tell me this is some weird quirk as I'm totally baffled! [img]images/smilies/frown.gif[/img]
   
   Here's the css behind the page above.
   

   Code:

   ---

   body {
background-color: #ffffff;
margin: 0px;
padding: 0px;
font-family: verdana, helvetica, arial, sans-serif;
font-size: 78%;
color: #000000;
}

p, address, li {
font-style: normal;
font-size: 1.0em;
padding: 0.3em;
}

h1 {
font-family: verdana, helvetica, arial, sans-serif;
font-weight: bold;
font-size: 1.3em;
padding: 0.5em;
}

#masthead {
width: 770px;
height: 37px;
}

#menu {
width: 770px;
margin: 0px;
padding: 0px;
border-left: 6px solid #495D75;
}

#menu ul {
margin: 0px;
padding: 0px;
display: inline;
}

#menu ul li {
margin: 0px;
padding: 0px;
display: inline;
list-style: none;
}

#content {
width: 773px;
margin: 0px;
padding: 0px;
border-left: 6px solid #495D75;
}

.left {
float: left;
width: 312px;
}

.right {
margin-left: 312px;
width: 452px;
}

.logo {
width: 312px;
height: 97px;
margin: 0px;
padding: 0px;
}

ul.news li {
padding: 0.2em;
list-style-image: url(../pics/news-bullet.gif);
}

hr.newsdiv {
background-image: url(../pics/news-divider.gif);
width: 311px;
height: 7px;
text-align: left;
}

   ---

   
   
   (baycan, Ecuador)


2. Try removing all white space from your HTML code. This may not be your problem, but sometimes when a line of code spans multiple lines, IE interprets it as a space.
   
   Andy
   
   
   (ilknur, Cocos (Keeling) Islands)


3. Thanks Andy, I tried that as I know with inline lists that can be a problem too but it didn't resolve it. I'm having to revert to tables which stinks :(
   
   
   (sevda, Lesotho)


4. I believe it might be your list causing the space. Try removing the margin (and any padding) from the UL :)
   
   Great work with the design BTW :)
   
   
   (feridun, Cocos (Keeling) Islands)


5. Thanks platinum but menu doesn't have a margin or padding
   
   

   Code:

   ---

   #menu {
 width: 770px;
 margin: 0px;
 padding: 0px;
 border-left: 6px solid #495D75;
}
#menu ul {
 margin: 0px;
 padding: 0px;
 display: inline;
}
#menu ul li {
 margin: 0px;
 padding: 0px;
 display: inline;
 list-style: none;
}

   ---

   
   
   (ali, Kazakhstan)

Related Topics ... (or search in 1.720.883 topics !)