Firefox margins within LI tag?

Can't figure this out

[FourDegreez]

I've got this nested structure: <ul> <li> <a> <img>

I'm trying to apply a top margin to the <a> to push it down a bit from the top of the <li>, so I add a top-margin: 10px (for example) to the style of the <a> tag. The desired behavior happens in IE, but Firefox seems to apply the margin to the <li> tag. The top of the <a> block remains flush with the top of the <li>, but the <li> is moved down from whatever is above it by 10px.

I can't just pad the <li> tag to achieve the same result, because I'm doing this to create a hover effect on the <a> tag. I need to create that distance by styling the <a> tag only.

[Birdman]

Have you tried changing the a to block-level?

li a{display: block}

Just an idea, not tested :)

[Fotiman]

This sounds like it might be Collapsing Margins (try searching for that and you'll probably find some options). One thing you might try... give your <li> 1px of padding (or border). If you do that, your <a>'s margin will not collapse with the <li>, and instead should get pushed down from the top of the <li>.

Hope that helps.

[PSWorx]

I had a similar problem which was resolved using a 1px border but by the time i had finished the css for the layout i could remove the 1px border, not sure what it was, i dare say it was due to me being part way thru the css code however i had finished the bits for the menu which is where the issue was, the issue being phantom padding on the li's.

Anyways totaly irellevant (god i cant spell).