Welcome to WebmasterWorld Guest from 22.214.171.124
Forum Moderators: not2easy
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" />
<edited> Typo, thanks Nick!
[edited by: pageoneresults at 7:21 pm (utc) on July 30, 2002]
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! ;)
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.