why does a element need "float left" for inline list items to display properly?

[mlg5454]

here's where i'm messing around:

http://professorcuddlecore.com/about/skye3.html

why is it that this

HTML

<div id="menu">
<ul>

<li><a href=""><img src="/jpgs/images/skye_menu_01.jpg" /></a></li>
<li><a href=""><img src="/jpgs/images/skye_menu_02.gif" /></a></li>
<li><a href=""><img src="/jpgs/images/skye_menu_03.gif" /></a></li>
<li><a href=""><img src="/jpgs/images/skye_menu_04.gif" /></a></li>
<li><a href=""><img src="/jpgs/images/skye_menu_05.gif" /></a></li>
</ul>

CSS

#menu {
position: absolute;
top: 0px;
left: 0px;
}

ul {
margin: 0; 
padding: 0;
list-style: none;
}

li {
display: inline;
}

img {
margin: 0; padding: 0;
border: none;
}

a {
margin: 0; padding: 0;
border: none;
text-decoration: none;
display: block;
float: left;
}

this only works when i use float:left with the a element? why doesn't margin/padding to 0 on everything (i've tried * and html) work? i don't know why the a is block displayed either but it's recommended so i'm doing it. i just don't understand why.

this guy explains how it works but doesn't explain why:

http://line25.com/tutorials/how-to-c...age-2#comments

[Asher01]

Yeah, I'd also like to know why as well.

[mlg5454]

bump bump pumbp

[VIPStephan]

A block element displays as block on its own line. Now, if you make the list items display inline but the child anchors display as block, this is kind of overriding it. Since block elements are typically not allowed inside inline elements different browsers treat such a case differently and in the best case the layout gets screwed up unpredictably.

With float: left; you make block elements display next to each other (or rather make the element(s) following the one with the float property float around it). However, since elements with float are kind of being treated as block elements, too, the inline style of the list items is still getting in the way. I recommend to float the list items, too, if the anchors are being treated as block level elements.

[mlg5454]

that's really informative, thanks so much.