I also highlighted the ul in the first one and the li in the second. You can see the code dislayed in the window below which is odd as I did not have line breaks or tabs in my code, soI assume that fire bug is formating it. The generated source looks like this
I do not see any whitespace, but it looks like a css issue with a height of 25px and padding 5px on the li. Firefox, Chrome and Safari do add this. the odd one is IE, but I think IE is correct (I could be wrong).
I had read online that making an element float forces a dislay block on the element which also adds spacing to the bottom, which is what I see here. But I also think that firefox and company are taking my 25px height and 25 px width, and adding the 5px padding to these along the y axis. I suspect that IE is respecting the 25px h+w and forcing the padding to stay with those limits....this is all just guess work on my part, so I am hoping the community has some advice.
I can run the code with the extra spacing, it does not stop it from working, but I would like it to truly look the same on all platforms.