Why is a space being treated like a line break in IE?

I'm working with a template and cannot figure out why spaces are being treated like line breaks in IE. Here's the CSS:

#main_header #header ul.menu li{
background:url no-repeat right; height:22px; padding:0 14px 0 5px; margin:0;
display:block; float:left;
}

And the html:

<li><a href="http://www.example.com/">Home Page</a></li>

Which displays as "Home Page" in FF but "Home (Line break) Page" in IE.

I've used this as a workaround:
<li><a href="http://www.example.com/">Home&nbsp;Page</a></li>

But seems sloppy. Any ideas?

 

IE generally tends to shrinkwrap aggressively. This is not incorrect. For this reason, it is a good practice to define a width for float elements.

cheers,

gary

 

Yes, Width is what you need. Also IE and some other broswers handle padding differently. This can create different behaviors.

In either case, set a fixed width to ensure the element stays wide enough for the text in most browsers.

 

That took care of the issue. Thanks very much for your help.