...

View Full Version : Background color on <li> not displaying properly in IE6



plousia
05-15-2007, 10:46 PM
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?

VIPStephan
05-15-2007, 11:53 PM
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.

plousia
05-16-2007, 02:48 AM
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!

koyama
05-16-2007, 03:30 AM
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.


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

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.

plousia
05-16-2007, 03:40 AM
Ah it worked!!! Thank you so much! :)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum