LI Width problem is Chrome

[MichaelE]

I am using CSS to display a list horizontally. It works fine in IE and Firefox but in Chrome the list elements wrap to the next line even through there's plenty of space.

Here is a screenshot of the problem (UL width of 395px):
[img18.imageshack.us ]

With a UL width of 396px it works fine:
[img600.imageshack.us ]

I can't figure out why the first one is wrapping.

Here is the CSS and HTML:

ul {
border: 1px solid #FF0000;
width:395px;
margin-left:0px;
padding-left:0px;
}

li{
display:inline;
border: 1px solid #FF0000;
padding-right: 18px;
margin:0px;
}

<ul>
 <li><a href="about.htm"><img src="house.gif" alt="About" width="16" height="16" border="0"> TEST</a></li>
 <li><a href="about.htm"><img src="house.gif" alt="About" width="16" height="16" border="0"> TEST</a></li>
 <li><a href="about.htm"><img src="house.gif" alt="About" width="16" height="16" border="0"> TEST</a></li>
 <li><a href="about.htm"><img src="house.gif" alt="About" width="16" height="16" border="0"> TEST</a></li>
</ul>

I'm using an HTML 4.01 Strict doctype. I'm not expert. If anyone can tell me what I'm doing wrong I'll really appreciate it.

Regards
Mike

[Major_Payne]

Need to accound for the borders and padding you are using. Not all browsers calculate the spacing required to display content the same. You could add the Universal Selector at the top of your CSS file to clear all margins, paddings and borders before your CSS takes over:

* { margin: 0; padding: 0; border: 0; }

This may or may not help the current problem, but doesn't hurt to have it there.

Also, depending on what web editor you use to make your pages, you may have excessive whitespace which you can't see. Might try butting up the "li" tags one after another and see if that helps.

[MichaelE]

Thanks for the suggestions. There was no extra white space but each li was on a new line. Putting them on one line actually gives it 5 extra px. Adding the universal selector had not effect.

It looks like there's enough space for one more full LI element, which I thought seems too much to be accounted for by margins, padding and borders?

[alt131]

Hi MichaelE, and welcome to WebmasterWorld [webmasterworld.com] :)
As the li are display:inline (not display:list-item) you've resolved most of the differences in the way browsers renders lists, so I think this is an example of "what you see is not what you get".

As the li are inline they have a computed width of zero, but there seems to be a default margin being applied, so things get strange.

Have you tried zooming the page? The last link alternates between "wrapping" and displaying on the same line as desired. Also, when changing from a zoom level that has the link on the same line, back to "actual size", the link remains on the same line - until refresh. That suggests a drawing/counting issue, and I wonder about the effect of font sizes too.

Anyway, what does work is to remove the border from he li, or if not possible, set the link to display:inline-block.

[MichaelE]

Thanks alt131 for your suggestions. I see what you mean about the zooming. Removing the borders reduces the li width by a few pixels but doesn't solve the problem. I actually only added the borders for the example here to make to clear what the problem is.

Using display:inline-block does works. So does using float:left. I'm not sure which is better to check it compatible in older browsers. Will need to do some testing.