homepage Welcome to WebmasterWorld Guest from 107.21.187.131
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

    
CSS & image gaps
I'm having trouble displaying a row of images using css
Captaffy




msg:1215272
 6:00 pm on Jul 30, 2002 (gmt 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>

 

MCookie




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

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

Captaffy




msg:1215274
 6:12 pm on Jul 30, 2002 (gmt 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?

mivox




msg:1215275
 6:21 pm on Jul 30, 2002 (gmt 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.

pageoneresults




msg:1215276
 6:35 pm on Jul 30, 2002 (gmt 0)

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




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

> 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




msg:1215278
 6:45 pm on Jul 30, 2002 (gmt 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

rewboss




msg:1215279
 7:09 pm on Jul 30, 2002 (gmt 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.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved