homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

Firefox margins within LI tag?
Can't figure this out

 5:15 pm on Feb 24, 2007 (gmt 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)

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)

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)

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

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved