Welcome to WebmasterWorld Guest from

Forum Moderators: not2easy

Message Too Old, No Replies

Firefox margins within LI tag?

Can't figure this out

5:15 pm on Feb 24, 2007 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Feb 27, 2003
votes: 0

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.

5:35 pm on Feb 24, 2007 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Apr 22, 2002
votes: 0

Have you tried changing the a to block-level?

li a{display: block}

Just an idea, not tested :)

4:04 pm on Feb 26, 2007 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Oct 17, 2005
votes: 21

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.

3:23 pm on Mar 14, 2007 (gmt 0)

Junior Member

10+ Year Member

joined:Aug 25, 2003
votes: 0

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).