How to remove 1px Space Between Horizontal Div

I can’t seem to get rid of the 1px space between my header and menu div. Here is the code. I have also attached a screenshot so you can see the space between the header and menu. Any help would be appreciated.


#header
{
	margin: 3px 3px 0 3px;
	height: 100px;
	background: url('head_bg.jpg') repeat-x;
	-moz-border-radius: 10px 10px 0 0;
	border-radius: 10px 10px 0 0;
	clear:both;
}
			
#header .logo
{
	margin: 20px 0 0 20px;
	color: #FFF;
	font-size: 200%;
	float: left;
	display: block;
}
			
#menu
{
	margin: 0 3px;
	background: url('menu_bg.jpg') repeat-x;
	padding: 10px 20px;
	clear:both;
				}
			
			
			
#menu li
{
	display: inline;
				
}
			
#menu li a
{
	padding: 10px 20px;
	border-right: 1px solid #A0A0A0;
	color: #000;
	text-decoration: none;
	font-weight: bold;
	font-size: 90%
}

#menu li a:hover
{
	padding: 10px 20px;
	background: #f0f0f0;
	text-decoration: underline;
}
#menu li a.current
{
	background: #F0F0F1;
}

HTML


<div id='wrapper'>
			<div id='header'>
				<div class='logo'>Your Site Name</div>
			</div>
		
			<div id='menu'>
				<ul>
					<li><a href='#' class='current'>Menu 1</a></li>
					<li><a href='#' >Menu 2</a></li>
					<li><a href='#' >Menu 3</a></li>
					<li><a href='#' >Menu 4</a></li>
					<li><a href='#' >Menu 5</a></li>
					<li><a href='#' >Menu 6</a></li>
				</ul>
			</div>
...

If you could give a link to the actual page where this is happening (even if it’s only a ‘dummy’ page), that would make it easier for us to see what’s going on and what’s causing the problem.

In which browser do you see this gab? Just saw example in IE8, FF3m Opera and Chrome and they all looked the same to me except the border-radius in IE8

sure. The link is http://www.hoa-community.com/skin.html.

Notice the white space between the header and the menu

I see it in FF 3.6, IE 8 & IE 9 Beta

Hi,

The gap is actually a white space on top of your image :slight_smile: Hust set the top position of the background-position property to about -3px and the gap disappears.

However, I would also change your code to something more solid like this.


#menu {
    margin: 0 3px;
    background: url('menu_bg.jpg') rep[B]eat-x 0 -3px;[/B]
   [B] padding: 0 20px;[/B]
    clear:both;
 [B]   overflow:hidden;[/B]
  [B]  height:36px;
    line-height:36px;[/B]
}
#menu li {
    display: inline;
}
#menu li a {
 [B]   padding:0 20px;[/B]
    border-right: 1px solid #A0A0A0;
    color: #000;
    text-decoration: none;
    font-weight: bold;
    font-size: 90%;
  [B]  float:left;[/B]
}
#menu li a:hover {
[B]/* padding removed as no need to duplicate*/[/B]   
 background: #f0f0f0;
    text-decoration: underline;
}


Thank you. I would have never noticed that

Darn Paul beat me to this…
but actually I worked on it locally… no image… and you do have a 1letter gap… white space bug… when viewed in FF 3.6/ Saf 4 on a mac.

We had a fine discussion about this here: :slight_smile:

anyhow, good solution to try is this:


#menu li
{
    display:-moz-inline-box;      
    display:inline-block;  
    word-spacing:0;  
}

#menu ul {   
 word-spacing:-1em;  
letter-spacing:0;

    list-style:none;
    display:table;
    width:100%;
      }