Welcome to WebmasterWorld Guest from 54.197.116.116

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)

WebmasterWorld Senior Member 10+ Year Member



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)

WebmasterWorld Senior Member 10+ Year Member



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)

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



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)

10+ Year Member



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