UL overlaps float:left div (as though it has a negative margin-left)

Hi,

I have a list on my page which overlaps a floating menu, causing the bullet points to be displayed inside the menu's border.

I have googled, but didn't find anything useful. I don't think it's the doctype - I have tried HTML 4, XHTML and none - or any error in my CSS.

Firebug displays a left margin relative to its parent, not to the menu div directly to its left, as I'm assuming it should.

Obviously if I add a left margin it will look wrong whenever it's not in line with a floated div.

The problem can be seen here, http://www.threeguesses.co.uk/test.html

The CSS is /index.css

Tested in Firefox, IE8 and Opera - exactly the same.

If anyone's got any ideas on how I could make the visible margin always the same regardless of where the UL is, please let me know.

Cheers,
Gus

Try
ul {
display: block;
}

Thanks for the reply; I tried adding display:block but it didn't fix it.

Hello,
ul {list-style-position:inside;}
?

Yes that worked, thanks.