Welcome to WebmasterWorld Guest from 23.22.79.235

Forum Moderators: not2easy

Message Too Old, No Replies

CSS & image gaps

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

   
6:00 pm on Jul 30, 2002 (gmt 0)

10+ Year Member



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>

6:07 pm on Jul 30, 2002 (gmt 0)

10+ Year Member



Hi, Captaffy,
if your simplified code represents the real thing, putting them on one straight line might do the trick.
6:12 pm on Jul 30, 2002 (gmt 0)

10+ Year Member



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?

6:21 pm on Jul 30, 2002 (gmt 0)

WebmasterWorld Senior Member mivox is a WebmasterWorld Top Contributor of All Time 10+ Year Member



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.
6:35 pm on Jul 30, 2002 (gmt 0)

WebmasterWorld Senior Member pageoneresults is a WebmasterWorld Top Contributor of All Time 10+ Year Member



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]

6:45 pm on Jul 30, 2002 (gmt 0)

WebmasterWorld Senior Member pageoneresults is a WebmasterWorld Top Contributor of All Time 10+ Year Member



> 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! ;)

6:45 pm on Jul 30, 2002 (gmt 0)

WebmasterWorld Senior Member nick_w is a WebmasterWorld Top Contributor of All Time 10+ Year Member



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

7:09 pm on Jul 30, 2002 (gmt 0)

10+ Year Member



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.