CSS & image gaps

I'm having trouble displaying a row of images using css

[Captaffy]

I've been reading WebmasterWorld for about two weeks now, and it's been very enlightening. Generally I like to try and figure things out for myself, but on this issue I have to admit defeat.

I'm trying to display a row of images (each image is a tab), so that it will look like a row of folder tabs (see Amazon.com).

I first tried it using a table - where each image was in a cell on one row - and that worked perfectly.

I figured I would be able to get the same effect just by wrapping up the images in a span with white-space set to nowrap.
Unfortunately, there is a gap between each image, and I can not get rid of it. I've tried setting all the margins to 0px, and same with padding.

Here is some of my code (simplified, but even then I still can't get it to work :o )

<span style="white-space: nowrap;">
<img src="test2.gif" alt="menu1" />
<img src="test2.gif" alt="menu2" />
<img src="test2.gif" alt="menu3" />
<img src="test2.gif" alt="menu4" />
<img src="test2.gif" alt="menu5" />
<img src="test2.gif" alt="menu6" />
<img src="test2.gif" alt="menu7" />
</span>

[MCookie]

Hi, Captaffy,
if your simplified code represents the real thing, putting them on one straight line might do the trick.

[Captaffy]

putting them on one straight line might do the trick

Thanks MCookie!
I'm really surprised something so simple did the trick!

Can anyone explain to me why that happens?

[mivox]

Well, I know a line break/new line actually displays as "/n" if you have a text editor set to display invisible characters. I think some browsers are unable to completely ignore 'invisible' characters like that... so all those newline marks probably cause the gaps.

[pageoneresults]

You could have also put them in a <div> container and specify display:inline; if I'm not mistaken. All of our images for graphic navigation are in <div>s.

<edited> Typo, thanks Nick!

[edited by: pageoneresults at 7:21 pm (utc) on July 30, 2002]

[pageoneresults]

> Well, I know a line break/new line actually displays as "/n" if you have a text editor set to display invisible characters.

That is one reason why I work with code that contains no line breaks (broken tags). If I have to scroll horizontally for a 1/4 mile while viewing my html, then so be it! ;)

[Nick_W]

Only Slightly mistaken pageone: display: inline;

Although I don't think you'd even need that, I'm pretty sure they'll be inline by default.

Nick

[rewboss]

Newlines count as whitespace. Spaces and tabs also count as whitespace.

Unless you are using <pre> or whitespace: pre; browsers will convert any whitespace they find in an HTML document to a single space. Usually, text books tell you that "more than one space in a row is collapsed into a single space", which is true, but only half the story. Every time you hit the carriage return in your source code, you are adding whitespace, and that whitespace is converted into a space.