Welcome to WebmasterWorld Guest from 54.196.244.186

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)

Junior Member

10+ Year Member

joined:July 30, 2002
posts:100
votes: 0


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 July 30, 2002 (gmt 0)

New User

10+ Year Member

joined:July 9, 2002
posts:15
votes: 0


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

Junior Member

10+ Year Member

joined:July 30, 2002
posts:100
votes: 0


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 July 30, 2002 (gmt 0)

Senior Member

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

joined:Dec 6, 2000
posts:3928
votes: 0


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 July 30, 2002 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member pageoneresults is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Apr 27, 2001
posts:12166
votes: 51


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 July 30, 2002 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member pageoneresults is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Apr 27, 2001
posts:12166
votes: 51


> 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 July 30, 2002 (gmt 0)

Senior Member

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

joined:Feb 4, 2002
posts:5044
votes: 0


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 July 30, 2002 (gmt 0)

Preferred Member

10+ Year Member

joined:June 7, 2002
posts:475
votes: 0


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.