Forum Moderators: not2easy
<ul>
<li id="one"><a href="#">link</a></li>
<li id="two"><a href="#">link</a></li>
<li id="three"><a href="#">link</a></li>
</ul>
#page_one #one{
background:red;
font-weight:bold;
}
#page_two #two{
background:red;
font-weight:bold;
}
#page_three #three{
background:red;
font-weight:bold;
}
I'm assuming that the id's #page_one, #page_two, and #page_three are set on the body element of the pages?
if so this code snippet is working in IE6 for me.. but I believe you and suspect that there may be more styling of this <ul> and these links involved and that there is an IE Layout "bug" going on here..
to toubleshooot: validate your HTML [validator.w3.org] and CSS [jigsaw.w3.org] in case there could be some malformed markup causing the confusion?
then if it's still present try adding
{zoom: 1;}if it does give us a shout back with which one worked, and if you don't want to use "zoom" to fix it it's microsoft proprietary and will not validate and it only works in IE5.5+
if not then can you post the whole code (HTML and CSS) for this list, and it's containing div (if there is one)
There is a known issue about disappearing list backgrounds, but the solution of putting
position: relative;see how it goes and let us know
Suzy
The menu is placed inside a div called links, which is inside a div called menu.
#menu {
width: 700px;
background: #000040;
text-align: left;
height: 30px;
}
#links {
float: left;
width: 426px;
padding-left: 6px;
font-size: 1.1em;
font-weight: bold;
line-height: 1.5em;
}
#nav li {
display: inline;
list-style-type: none;
}
#nav a:link, #nav a:visited, #nav a:active {
color: #208639;
text-decoration: none;
padding: 4px 4px 11px 4px;
}
#nav a:hover {
color: #6f9fdf;
}
Every page has a different body id, below is an example:
#page_home #home {
background: url(images/pointer.gif) no-repeat center 100%;
color: #6f9fdf;
padding-bottom: 11px;
}
The markup for the list is:
<ul id="nav">
<li id="home">
<a href="?page_id=2">HOME</a>
</li>
<li id="about">
<a href="?page_id=3">ABOUT</a>
</li>
<li id="services">
<a href="?page_id=4">SERVICES</a>
</li>
<li id="resources">
<a href="?page_id=5">RESOURCES</a>
</li>
<li id="faqs">
<a href="?page_id=6">FAQS</a>
</li>
<li id="contact">
<a href="?page_id=7">CONTACT</a>
</li>
</ul>
Thanks for your help.
Hi. I tried using zoom: 1; and now the background is showing up, but the rest of the links are in the wrong place. Is there a way around using the zoom property?
Yes there's a way around using it, but which element did you set it on that made the background come back? I still can't recreate the disappearing act :o
and now seeing that the list is created by making the <li>'s display inline, I'm not so sure the other cure (which is to set a width or height onto the affected element for IE Only) will work either as you can't set a width/height on an inline element..
Here's the code I've got where I can see the background (I added the red) I'm putting it out for checking because it doesn't look the same in other browsers so I want to check we're on same code..
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /></meta>
<title>Untitled</title>
<style type="text/css" media="screen">
#menu {
width: 700px;
background: #000040;
text-align: left;
height: 30px;
}#links {
float: left;
width: 426px;
padding-left: 6px;
font-size: 1.1em;
font-weight: bold;
line-height: 1.5em;
}#nav li {display: inline;}
#nav a:link, #nav a:visited, #nav a:active {
color: #208639;
text-decoration: none;
padding: 4px 4px 11px 4px;
}
#nav a:hover {
color: #6f9fdf;
}#page_home #home {
background: #f00 url(images/pointer.gif) no-repeat center 100%;
color: #6f9fdf;
padding-bottom: 11px;
}
</style>
</head>
<body id="page_home">
<div id="menu">
<div id="links">
<ul id="nav">
<li id="home"><a href="?page_id=2">HOME</a></li>
<li id="about"><a href="?page_id=3">ABOUT</a></li>
<li id="services"><a href="?page_id=4">SERVICES</a></li>
<li id="resources"><a href="?page_id=5">RESOURCES</a></li>
<li id="faqs"><a href="?page_id=6">FAQS</a></li>
<li id="contact"><a href="?page_id=7">CONTACT</a></li>
</ul>
</div>
</div>
</body>
</html>
Suzy
