Background not diplaying in IE7 when applied to <li> tag.

[cre8tive1]

Hi all,

My Joomla site got hacked beyond repair and my backup was super old. I know, shame on me! Anyhow, I’m feverishly working to get a new WP site up.

I’m having an issue with IE7 not displaying the padding settings on an <li> tag.

Here we go:

Link to page: http://www.fabianross.com

Here is the code generating the navigation:

Code:

Here is the CSS:

Code:

#main-navigation { float: left; margin: 98px 0 0 82px;}
ul#navigation { list-style-type: none; width: 100%; }

ul#navigation li { display: inline; margin: 0 5px 0 0; font-family : “Georgia”, “Times”, serif; font-size: 18px; font-weight: normal; text-align: left; }

ul#navigation li a:link, ul#navigation li a:visited { display: block-inline; color: #2F2626; text-decoration: none; background: url(images/nav-inactive-li-bg.gif); padding: 3px 15px 3px 15px; }
ul#navigation li a:hover { display: block-inline; background: #fff; height: 26px; }
ul#navigation li.current_page_item a { display: block-inline; background: #fff; height: 26px; }

The attachment shows what it looks like in IE7. The top and bottom padding settings don’t appear to be showing as the buttons are physically shorter than they should be. As a result, there is a gap between the bottom of the button and the White background of the main page.

I’ve been banging my head against this for a while now. Any suggestions are greatly appreciated.

[Brido]

Code:

#main-navigation { float: left; padding: 98px 0 0 82px;}
ul#navigation { list-style-type: none; width: 100%; }

ul#navigation li { float:left; margin: 0 5px 0 0; font-family : “Georgia”, “Times”, serif; font-size: 18px; font-weight: normal; text-align: left; }

ul#navigation li a:link, ul#navigation li a:visited { display: block-inline; color: #2F2626; text-decoration: none; background: url(images/nav-inactive-li-bg.gif); padding: 3px 15px 3px 15px; }
ul#navigation li a:hover { display: block-inline; background: #fff; height: 26px; }
ul#navigation li.current_page_item a { display: block-inline; background: #fff; height: 26px; }

Try the css above. I changed your li to float left. I also changed you #main-navigation to use padding for positioning.

[cre8tive1]

Brido,

Thanks for your help. I saw a post on http://www.welovecss.com that keyed me into the need to float the <a> tags. That was the key to getting it to work.

I’m curious why you used padding to position the main-navigation DIV. I’ve always used margins for positioning and padding to provide "breathing room". Maybe my concept is skewd?

I’d appreciate any insight you can provide.

Thanks again,

jr

[Author]

Posts