CSS inline lists

[GeeWhizzler]

I'm trying to create a horizontal list that has anchor tags and images in it (not text).

#list
{
}

#list ul
{
list-style: none;
}

#list li
{
display: inline;
}

#list li a
{
text-decoration: none;
}

#list li a img
{
border: none;
}

<ul id="list">
<li id="listLogo">
<a href="/">
<img src="logo.jpg" alt="logo" />
</a>
</li>
<li id="listabout">
<a href="/">
<img src="about.jpg" alt="about" />
</a>
</li>
</ul>

In the code above, there exists a vertical white space gap between the two images on all major browsers.

How can I get rid of that?

[GeeWhizzler]

More on this

It doesnt appear to be due to list tags. It has to do with arranging images side by side horizontally and the ANCHOR tag.

How do I get rid of the space between images?

<a href="/"><img src="blah.jpg"></a>
<a href="/"><img src="blah2.jpg"></a>

+-----+ +-----+
¦ ¦ gap here ¦ ¦
+-----+ +-----+

[GeeWhizzler]

When I do:

<a href="/"><img src="blah.jpg"></a><a href="/"><img src="blah2.jpg"></a>

all on one line, things are fine. There are no underscores, no gaps, or anything.

Can someone explain to me why this is so? Most importantly, what can I do to prevent these gaps from appearing if I want to line up my code more prettier to be readable rather than shoving it all on one line?

[tedster]

First, try not putting line breaks inside the anchor element -- that still leaves very easy to read code.

<ul id="list">
<li id="listLogo">
<a href="/"><img src="logo.jpg" alt="logo" /></a>
</li>
<li id="listabout">
<a href="/"><img src="about.jpg" alt="about" /></a>
</li>
</ul>

Second, are you using a DTD that will put the browser into Standards Mode? If so, images will be aligned to the text baseline, and that leaves a space underneath the baseline for letter descenders.

There's more about this image issue here:
[webmasterworld.com...]

[GeeWhizzler]

This is partly due to my VB/C/C++ days of writing code with indentation. I preferred to make code blocks indent to make it easier to read and follow - especially in the blocks surrounded by C/C++ braces.

I realize that one has remove the line breaks within the HTML document but I never understood why browsers interpreted carriage return/line breaks as they do. I thought that the <br /> tag was for that purpose?

I can see why a space before or after an anchor tag has meaning and why the underscores would show up:
<a href="/"> space before; space after </a>

But I don't understand the logic behind the behaivior described with gaps between images that were already declared inline to the block.

Can someone give me the reason for the behaivior where cr/lf is actually interpreted by the browser? And what are the specific instances where one has to be careful? A general reference to the CSS/HTML specs would be welcome.

Thank you.

[tedster]

This is a somewhat mystifying behavior that various user agents have not been entirely consistent with over time. As I understand the following W3C spec, this behavior is a bug -- but a bug that is there and therefore needs to be taking into account. It starts with the W3C instruction that all line breaks and carriage returns should be turned into whitespace, and then all whitespace should be rendered by certain standard rules.

I've had disagreements about whether this behavior is a bug or not -- but the XHTML recommendation says:

The user agent must process whitespace characters according to the following rules.
The following characters are defined in [XML] as whitespace characters:

Space (&#x0020;)
Tab (&#x0009;)
Carriage return (&#x000D;)
Line feed (&#x000A;)

Whitespace is handled according to the following rules:

All whitespace surrounding block elements should be removed.

Comments are removed entirely and do not affect whitespace handling. One whitespace
character on either side of a comment is treated as two whitespace characters.

Leading and trailing whitespace inside a block element must be removed.

Line feed characters within a block element must be converted into a space (except
when the 'xml:space' attribute is set to 'preserve').

A sequence of whitespace characters must be reduced to a single space character
(except when the 'xml:space' attribute is set to 'preserve').

W3C Reference [w3.org]

I maintain that browsers rendering engines are often not coded properly with regard to the two points I've marked with red. That is, they ignore the first of the two rules and only execute the second. Whatever the truth -- bug or standard -- the fact is that this is a browser behavior we must accommodate.

[jetboy]

As an alternative approach, try this:

. Cut out all your navigation graphics as one big graphic, and put it in as a background to your <ul>, dimension it accordingly and position it relatively or absolutely:

ul {
width: 150px;
height: 20px;
padding: 0;
margin: 0;
background: url(/images/list-background.png) 0 0 no-repeat;
position: relative;
}

. Position your <li>s absolutely within the <ul>, using a unique ID on each one:

#button-1 {
width: 80px;
height: 20px;
padding: 0;
margin: 0;
list-style none;
position: absolute;
}

#button-2 {
width: 70px;
height: 20px;
padding: 0;
margin: 0;
list-style none;
position: absolute;
}

. Force the <a>s to take up all the space inside the <li>s:

a {
width: 100%;
height: 100%;
display: block;
}

. If you want to add some accessibility, put a negative text indent on the <a>s so you can have actual anchor text that won't display in the browser:

a {
width: 100%;
height: 100%;
text-indent: -5000px;
text-decoration: none;
overflow: hidden;
display: block;
}

Your XHTML should look something like:

<ul>
<li id="button-1"><a href="/link-1" title="Anchor text 1">Anchor text 1</a></li>
<li id="button-2"><a href="/link-2" title="Anchor text 2">Anchor text 2</a></li>
</ul>

[jetboy]

Oops,

should be:

#button-1 {
width: 80px;
height: 20px;
left: 0;
top: 0;
padding: 0;
margin: 0;
list-style none;
position: absolute;
}

#button-2 {
width: 70px;
height: 20px;
left: 80px;
top: 0;
padding: 0;
margin: 0;
list-style none;
position: absolute;
}