How do I get rid of white spaces between spans without manipulating the HTML?

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

Answer 1

This is a common problem. More common with inline-block than inline, as inline usually means it's in the flow of text, where white space is relevant. With inline-block, people are using it for layout, and the white space becomes a problem.

There is a new CSS property specifically trying to deal with this issue - white-space:collapse; and white-space-collapse: discard;, but sadly it isn't supported by any of the major browsers yet. So that's not an option.

In the absence of that, the solutions to this tend to be a bit hacky.

One common solution is to set the container element to font-size:0;. This effectively renders the white space irrelevant; it's still there, but doesn't take up any space. The downside here is that you then need to set the font-size back again for the internal elements. If you're using a dynamic layout, with em based font-sizes, this can be tricky to handle.

Switching the layout to a float:left layout will remove this issue, but introduces other problems. Personally I've never liked working with float, but it might be the answer for some cases.

You could also use Javascript to remove the spaces, but that really is a hack.

Other than that, re-arranging the HTML code to remove the spaces is the most likely best solution. I know it's not the one you wanted though.

Answer 2

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/

Answer 3

From this style:

#menu ul li a:hover span {
    background: url("images/topselectionright.png") repeat scroll right top transparent;
}

remove

right top

Answer 4

If I understand you correctly, maybe ul { font-size:0 } would help?