2 pixel gaps between images - need fresh eyes - CSS forum at WebmasterWorld - WebmasterWorld

Forum Moderators: not2easy

Message Too Old, No Replies

2 pixel gaps between images - need fresh eyes

ianmassey

8:07 pm on Apr 9, 2007 (gmt 0)

10+ Year Member

I am sure this is something i'm overlooking, because it worked fine before I re-did my images. it's for a menu bar. 5 images horizontally inside an 800px wide div, images are 445, 85, 85, 85, and 100 px in width, respectively. No matter what I try, there is a 2 pixel wide gap between each image in the bar. I've double checked the images, they are all clean. here's the code:


<div id="navbar">
<ul>
<li><img src="images/navbar_01.png" width="445" /></li>
<li><img src="images/navbar_02_U.png" width="85" /></li>
<li><img src="images/navbar_03_D.png" width="85" /></li>
<li><img src="images/navbar_04_D.png" width="85" /></li>
<li><img src="images/navbar_05_D.png" width="100" /></li>
</ul>
</div>

and the css:


img {
margin: 0;
padding: 0;
border: 0;
}
#navbar {
width: 800px;
height: 74px;
position: absolute;
margin: 190px 5px 0px 5px;
}
#navbar ul {
list-style: none;
margin: 0;
padding: 0;
display: inline;
}
#navbar li {
display: inline;
margin: 0;
padding: 0;
}

any ideas?

thanks in advance.

Dabrowski

8:36 pm on Apr 9, 2007 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

I think this comes from a linebreak in the markup between your LI's. As they're inline elements, the browser is changing the linebreak into a space (' ') charater. Try sticking them all on 1 line, I know it's a bit untidy.

<li>img></li><li>img></li><li>img></li><li>img></li>

Fotiman

8:57 pm on Apr 9, 2007 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

Top Contributors Of The Month

That is what is causing it. An alternative to putting it all on one line would be to put your line breaks inside the tags. For example:


<div id="navbar"> 
<ul 
><li><img src="images/navbar_01.png" width="445" /></li 
><li><img src="images/navbar_02_U.png" width="85" /></li 
><li><img src="images/navbar_03_D.png" width="85" /></li 
><li><img src="images/navbar_04_D.png" width="85" /></li 
><li><img src="images/navbar_05_D.png" width="100" /></li 
></ul> 
</div>

Still, not especially pretty to look at, but might be slightly easier to work on.

Xapti

6:54 am on Apr 10, 2007 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

2px, if you measured it exactly, is ridiculously small. I could not see a normal space from linebreak causing only 2px. What browsers do you get this space in? I'm not sure if it does anything, but you can also try border:0 . Some people use it... but I'm not sure why. It's never helped me yet.

If the space really is the problem... perhaps changing font size to 0px, or 1px or something, would work, so that you don't have to make your code ugly.

[edited by: Xapti at 6:56 am (utc) on April 10, 2007]

Dabrowski

10:14 am on Apr 10, 2007 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

Xapti, please try this code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Broken</title>
<style>
.red{background: red;}
.blue{background: blue;}
.green{background: green;}
</style>
</head>
<body>
<p><span class='red'>Red</span><span class='blue'>Blue</span><span class='green'>Green</span></p>
<p>
<span class='red'>Red</span>
<span class='blue'>Blue</span>
<span class='green'>Green</span>
</p>
</body>
</html>

This proves the linebreak theory, on IE7 the gap is 4px, but a gap nontheless.

Ianmassey, please let us know if this has fixed the problem.