Button images in line

[boxhead]

I have several images which make up a horizontal navigation bar. They are wrapped in a span with the following css:

span.mainnav{
margin:0;
padding:0;
display:inline
}

The only problem is that the buttons have a gap between each one, unless i put all the code on one line. This becomes a bit cumbersome to use, so is they a way I can stop this?

cheers

monkey

[Raffles]

The display:inline you have there is redundant, as SPAN elements are inline elements by default.

Inline elements (like SPAN) show whitespace within them and, as IMG elements are also inline elements by default, the space between them is showing.

A solution is to use a DIV instead and to float the images. Floating will make the images have block display by default, and this will cause the whitespace between them to be ignored.

Alternatively, you could put them all in a list and then float the LI elements. This would probably be a more semantically sensible solution.

[boxhead]

The display:inline you have there is redundant, as SPAN elements are inline elements by default.

Inline elements (like SPAN) show whitespace within them and, as IMG elements are also inline elements by default, the space between them is showing.

A solution is to use a DIV instead and to float the images. Floating will make the images have block display by default, and this will cause the whitespace between them to be ignored.

Alternatively, you could put them all in a list and then float the LI elements. This would probably be a more semantically sensible solution.

OK - I started with the LI method but not using float - how would i do that?

cheers

[RyanReese]

float:left; the <li>'s.

Unless yo uare going to do the floating option it will show the white space (minus a few exceptions)

Also Raffles, floating doesn't make it a block box, but it makes it block level. Floating does not imply display:block;

Straight from Tommy.

[Raffles]

I should have chosen my words a bit more carefully.

Incidentally, display:table-cell will achieve the intended effect, but its level of support makes it a less attractive solution that floating.

[boxhead]

Thanks all - with a bit of trial and error, i;ve sorted it now!

Cheers again

[Paul O'B]

float:left; the <li>'s.

Also Raffles, floating doesn't make it a block box, but it makes it block level. Floating does not imply display:block;

Straight from Tommy.

To clarify a little

Floating makes the element generate a block box that is floated (either left or right as specified). It is not the same as display:block and it is not the same meaning as a "block level element" (which refers to html).

If you floated a list item it should still remain as a display:list-item but also floated. Unfortunately it seems that IE6/7 actually change it to display:block which is why the bullet disappears in floated lists.