asked on

Why isn't this working?

I am having an issue where an LI tag isn't applying its class for some reason.

Here is the page:

<div class="leftMenuBubble">
<div class="leftMenu">
<ul>
<li id="bgTop"><a href="#"><div class="MC">New Menu Item One</div></a></li>
<li id="bgNormal"><a href="#"><div class="MC">New Menu Item Two</div></a></li>
<li id="bgNormal"><a href="#"><div class="MC">New Menu Item Three</div></a></li>
<li id="bgNormal"><a href="#"><div class="MC">New Menu Item Four</div></a></li>
<li id="bgNormal"><a href="#"><div class="MC">And So on..</div></a></li>
<li id="bgSelected"><a href="#"><div class="MC">Selected Item!</div></a></li>
</ul>
<div class="leftMenuYellow">
This is where the sub information will go for the menu item that has been selected.
I still need to make it so that there are borders here, right now there aren't.. shouldn't be hard.
</div>
<ul>
<li id="bgNormal"><a href="#"><div class="MC">And So on..</div></a></li>
<li id="bgNormal"><a href="#"><div class="MC">Last One</div></a></li>
</ul>
</div>
</div>

And here is the CSS;

.leftMenuBubble {
width: 100%;
background-color: #005F85;
margin: 0px auto;
padding: 0px;
font-family: verdana;
font-size: 12px;
font-weight: bold;
}

.leftMenu ul {
margin:0px auto;
padding:0px auto;
list-style:none;
}

.leftMenu a {
height: 20px;
color: #FFF;
text-decoration: none;
display:block;
text-indent: 6px;
}
.leftMenu #bgNormal a {
background: url("images/leftMenuButtonRight.jpg") no-repeat right top;
}
.leftMenu #bgTop a {
background: url("images/leftMenuButtonRightA.jpg") no-repeat right top;
}
.leftMenu #bgSelected a {
background: url("images/leftMenuButtonRightS.jpg") no-repeat right top;
}

.leftMenu li {
padding: 0px auto;
margin: 0px auto;
height 20px;
background: url("images/leftMenuButtonLeft.jpg") no-repeat left top;
}
.leftMenu #bgNormal li {
background: url("images/leftMenuButtonLeft.jpg") no-repeat left top;
}
.leftMenu #bgTop li {
background: url("images/leftMenuButtonLeft.jpg") no-repeat left top;
}
.leftMenu #bgSelected li {
background: url("images/leftMenuButtonLeftS.jpg") no-repeat left top;
}

.MC {
margin-top:3px;
}

The line that I am specifically having issue with is this one;

<li id="bgSelected"><a href="#"><div class="MC">Selected Item!</div></a></li>

Declairing a different ID in the LI works for the anchor (a) tag perfectly, but not for the LI itself.

The Anchor tag has the correct graphic with this;

<li id="bgSelected"><a href="#"><div class="MC">Selected Item!</div></a></li>

but the LI itself isn't taking on the attributes of this;

.leftMenu #bgSelected li {
background: url("images/leftMenuButtonLeftS.jpg") no-repeat left top;
}

Why does this work;
.leftMenu #bgSelected a {
background: url("images/leftMenuButtonRightS.jpg") no-repeat right top;
}
but the LI doesn't?

You can see this page in full here: http://www.rsow.com/design9/

seanpowell

A few issues here...

1. id="bgNormal"

id's are unique - only one per page.

2. <li id="bgSelected"><a href="#"><div class="MC">Selected Item!</div></a></li>

The extra div tag is unnecessary and illegal syntax.

I'll post a corrected version for you...

Palamedes

ASKER

I'm new to CSS so thanks..

SO I have to make all the ID="bgNormal"s a class.. why not just make everything a class then?

A DIV within a the LI is illegal syntax?

ASKER CERTIFIED SOLUTION

seanpowell

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

COBOLdinosaur

If I understand what you are trying to do, then these declarations are incorrect:

.leftMenu #bgNormal li {
that says tag li within an ancestor with id bgnormal within a container of class leftmenu.

I think you want .leftMenu li#bgNormal which says li tags with an id of bgNormal inside a container of class leftmenu

I think all you need is a class .bgNormal for the li, and then do the a declaration as .bgNormal a {...

The rest should inherit anyway.

Cd&

COBOLdinosaur

BTW,

Sean is right about id element for an id. the li#bgNormal is just a logical presentation of what you appeared to be trying to do. You would not want to actually do something like that. You want to use a class.

Cd&

COBOLdinosaur

Oops sorry Sean, stale page.

Cd&

seanpowell

No worries - time for a beer for me anyways.

Palamedes

ASKER

OKay so, let me see..

#someID #SomeOtherIDINsomeID {

Is invalid?

Thogek

> A DIV within a the LI is illegal syntax?

No, but a <div> within an <a> is.

Palamedes

ASKER

Aaaahhh.. Gotcha.. see now THAT I didn't know.