Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    May 2007
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Background color on <li> not displaying properly in IE6

    Hi, I'm a relative CSS n00b, so I apologize if this question has been asked before.

    I'm making a CSS menu. I have a div called menu, with a ul in it for the links.

    I created an <li> class called "heading", for non-link headings in the menu. This class has a background color on it.

    In Firefox, this displays reasonably with the background color extending almost to the edge of the containing div, with a pixel or two around the edge (which is acceptable). (It's a horizontal menu).

    In IE6, the background color only fills behind the actual text. I've tried every possible combination of margins, padding, negative margins and padding, spans and background images that I can think of. Is this workable, or is it just one of the nasty things about IE and CSS that I have to live with?

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,474
    Thanks
    6
    Thanked 980 Times in 953 Posts
    Without your code we canít tell you anythingÖ There can be millions of ways to set up a menu and another million of ways to apply styles to it - and a million of reasons why it ainít working.
    Last edited by VIPStephan; 05-15-2007 at 11:55 PM.

  • #3
    New to the CF scene
    Join Date
    May 2007
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    OK, here's the HTML:

    <div id="menu"><ul>
    <li class="heading">Search ></li>
    <li><a href="man_subjects_search.aspx">People</a></li>
    <li><a href="man_applications_search.aspx">Applications</a></li>
    <li><a href="man_company_subjects_search.aspx">Vendors</a></li>
    <li class="heading">Reports ></li>
    <li><a href="man_reports.aspx">Custom Reports</a></li>
    <li><a href="man_quried_reports.aspx">Queries</a></li>
    <li class="heading">Tools ></li>
    <li><a href="man_user_editview.aspx">User Settings</a></li>
    <li><a href="man_quried_reports.aspx">Due Date Reminder</a></li>
    <li><a href="man_due_date_reminder.aspx">Lisc. Complete/Denial</a></li>
    <li><a href="#">ChoicePoint LogIn</a></li>
    </ul>
    </div>

    And the CSS:

    #menu {
    width:100%;
    background-color:#7B525A;
    margin:0 0 20px 0;
    padding:7px 0 7px 0;
    }

    #menu ul {
    list-style:none;
    padding:0;
    margin: 0;
    width: 100%;
    color:#fff;
    font-size:0.9em;
    }

    #menu li {
    display:inline;
    padding:5px;
    }

    #menu li.heading {
    font-weight:bold;
    color:#000;
    background-color:#e1e1e1;
    }

    #menu a, a:link, a:visited {
    color:#fff;
    text-decoration: none;
    }

    #menu a:hover, a:active {
    text-decoration:underline;
    }

    Thanks in advance!

  • #4
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    Quote Originally Posted by plousia View Post
    In IE6, the background color only fills behind the actual text. I've tried every possible combination of margins, padding, negative margins and padding, spans and background images that I can think of. Is this workable, or is it just one of the nasty things about IE and CSS that I have to live with?
    Basically this is a stacking order bug. You can fix this by setting position: relative. This will 'lift' the element.
    Code:
    #menu li {
    display:inline;
    padding:5px;
    position: relative;
    }
    Edit: My explanation was wrong. This in not a stacking order bug. Rather, it seems to be a clipping bug. An element that hasLayout may clip overflowing content such as padding for inline elements that should render outside.
    Last edited by koyama; 05-17-2007 at 01:53 AM.

  • #5
    New to the CF scene
    Join Date
    May 2007
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ah it worked!!! Thank you so much!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •