Question

This is my code for a drop down menu. I pulled the code from a tutorial that produced this: http://www.webdesigndev.com/wp-content/uploads/2009/07/fancydropdown.html

But instead of text navigation I have images as you can see in the CSS attached to the span id’s. With this code, I’m given the dropdown menus for each span correctly, I just can’t get rid of the white space between them.

I know a new line in HTML between divs/spans create whitespaces, but I want to know a way to rid of them in CSS.

<div id="menu">
<ul class="tabs">
<li class="hasmore"><a href="#"><span id="bird"></span></a>
    <ul class="dropdown">
        <li><a href="#">Menu item 1</a></li>
        <li><a href="#">Menu item 2</a></li>
        <li class="last"><a href="#">Menu item 6</a></li>
    </ul></li><li class="hasmore"><a href="#"><span id="wild"></span></a>
    <ul class="dropdown">
        <li><a href="#">Menu item 1</a></li>
        <li><a href="#">Menu item 2</a></li>
        <li class="last"><a href="#">Menu item 6</a></li>
    </ul>
</li>

</ul>
</div>

This is some CSS that applies:

#menu ul
{
margin: 0 auto;
}

ul.tabs
{
display: table;
margin: 0;
padding: 0;
list-style: none;
position: relative;
}

ul.tabs li
{
margin: 0;
padding: 0;
list-style: none;
display: table-cell;
float: left;
position: relative;
}

ul.tabs a
{
position: relative;
display: block;
}

#bird {
background-image:url(images/birdingnav.png);
width:80px;
height: 20px;
text-indent:-9009px;
font-size: 0px;
border: 0;
}

#wild {
background-image:url(images/wildernessnav.png);
width:119px;
height: 20px;
text-indent:-9009px;
font-size:0px;
border: 0;
}

What do I need to do to this code in CSS to get rid of the white space that appears between my span images?

Answer 1

Try setting display: inline-block on the image elements. Spans are supposed to be inline, so the best solution would be to not use spans at all, but since you said don’t change the html…

See how there’s no spaces between the images in this fiddle: http://jsfiddle.net/rVTZc/