Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home › Forums › CSS › Background not diplaying in IE7 when applied to <li> tag.

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • December 8, 2009 at 12:38 pm #27128
    cre8tive1
    Member

    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.

    December 9, 2009 at 10:15 am #67898
    Brido
    Member
    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.

    December 9, 2009 at 12:59 pm #67913
    cre8tive1
    Member

    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
Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘CSS’ is closed to new topics and replies.