I need some quick HTML/CSS help.

[Michael]

The site I am working on is PerSquare.com, and I'm having trouble with the header. If you look at the site, you'll see there is a gap between the image and the navigation bar. I need that gap to be exactly 1 pixel, and I can't figure it out. The html is:

<div id="container">
	<div id="header">
		<div id="tag">
		<img src="http://www.persquare.com/wp-content/themes/w2_dnd/images/header.jpg" style="border:0" />
		</div>
		<div id="navcontainer"><ul class="navlist">

<li class="current_page_item"><a href="http://www.persquare.com">home</a></li>
<li class="page_item"><a href="http://www.persquare.com/about/" title="About">About</a></li>
<li class="page_item"><a href="http://www.persquare.com/press/" title="Press">Press</a></li>
<li class="page_item"><a href="http://www.persquare.com/contact/" title="Contact">Contact</a></li>
<li><a href="http://www.persquare.com/wp-admin/">Site Admin</a></li>

		</ul>
	</div>
</div>

And this CSS for this part is:

#container {
width : 920px;
margin : 0 auto;
}
#header {
margin-bottom : 7px;
background : none repeat scroll 0% 0%;
width : 100%;
min-height : 60px;
}
#header h1 {
float : left;
font-size : 3em;
line-height : 1em;
text-transform : uppercase;
display : inline;
margin : 10px 0;
}
#tag {
float : right;
text-decoration : none;
text-align : right;
color : #9c9c9c;
background : inherit;
padding : 0px;
}
#tag a {
background : none;
height : auto;
text-decoration : none;
}
#tag a:hover {
color : #fff;
background : none;
text-decoration : none;
}
#tag img {
border : none;
background : none;
}
#tag span {
background : inherit;
color : #444444;
font-size : 1.5em;
}
#navcontainer ul {
padding-left : 0;
margin-left : 0;
background-color : #3c3c3c;
color : white;
float : left;
width : 100%;
}
#navcontainer ul li {
display : inline;
text-transform : uppercase;
}
#navcontainer ul li a {
padding : 0.2em 1em;
background-color : #3c3c3c;
color : white;
text-decoration : none;
float : left;
border-right : 1px solid #fff;
}
#navcontainer ul li a:hover {
background-color : #494949;
color : #eee;
}

Any help is greatly appreciated.

 

[Zurvan]

Change

#tag img {
border : none;
background : none;
}

to

#tag img {
border : none;
background : none;
padding-bottom: 1px;
}

Get Firefox, and download the Firebug application. You can play with the CSS, and see the changes as you make them. Makes life 100 times easier for this.

 

[Michael]

Any idea why that didn't work in IE? Worked beautifully in FF and Opera though! Thanks man.

 

[Barrucadu]

Because IE is a pain. I have long ago given up on trying to make my designs work perfectly in IE - as long as it looks roughly like what it does in Opera and FF, i'm happy.