Solved

Why isn't this working?

Posted on 2004-08-14
10
246 Views
Last Modified: 2012-05-05
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/

0
Comment
Question by:Palamedes
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 3
  • 3
  • +1
10 Comments
 
LVL 31

Expert Comment

by:seanpowell
ID: 11801923
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...
0
 
LVL 4

Author Comment

by:Palamedes
ID: 11801943
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?  
0
 
LVL 31

Accepted Solution

by:
seanpowell earned 125 total points
ID: 11801982
Try this:


/* Left Menu Classes */
#leftMenuBubble
{  
      width: 100%;
      background-color: #005F85;
      margin: 0;
      padding: 0;
      font: bold 12px verdana, sans-serif;
}
 
#leftMenu ul
{
      margin:0;
      padding:0;
      list-style:none;
}

#leftMenu li
{
      background: url("images/leftMenuButtonLeft.jpg") no-repeat left top;
      padding:0;
      margin:0;
}
 
#leftMenu a
{
      padding: 3px 0 0 0;
      height: 17px;
      color: #FFF;
      text-decoration: none;
      display:block;
      text-indent: 6px;
}    

#leftMenu li.bgNormal a
{
      background: url("images/leftMenuButtonRight.jpg") no-repeat right top;    
}

#leftMenu li#bgTop a
{
      background: url("images/leftMenuButtonRightA.jpg") no-repeat right top;    
}  

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

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


      <div id="leftMenuBubble">  
        <div class="leftMenuBubbleTopBg"><div class="leftMenuBubbleTopRight"></div></div>      
        <div id="leftMenu">
          <ul>
            <li id="bgTop"><a href="#">New Menu Item One</a></li>
            <li class="bgNormal"><a href="#">New Menu Item Two</a></li>
            <li class="bgNormal"><a href="#">New Menu Item Three</a></li>
            <li class="bgNormal"><a href="#">New Menu Item Four</a></li>
            <li class="bgNormal"><a href="#">And So on..</a></li>
            <li id="bgSelected"><a href="#">Selected Item!</a></li>
            <li class="bgNormal"><a href="#">And So on..</a></li>
            <li class="bgNormal"><a href="#">Last One</a></li>
          </ul>
        </div>
      </div>  
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 11801989
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&
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 11801994
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&
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 11801997
Oops sorry Sean, stale page.

Cd&
0
 
LVL 31

Expert Comment

by:seanpowell
ID: 11802025
No worries - time for a beer for me anyways.
0
 
LVL 4

Author Comment

by:Palamedes
ID: 11802660
OKay so, let me see..

#someID #SomeOtherIDINsomeID {

Is invalid?  





0
 
LVL 15

Expert Comment

by:Thogek
ID: 11802716
> A DIV within a the LI is illegal syntax?

No, but a <div> within an <a> is.
0
 
LVL 4

Author Comment

by:Palamedes
ID: 11802874
Aaaahhh.. Gotcha.. see now THAT I didn't know.
0

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

CSS3 Custom checkboxes This article shows how to style the checkbox form element using only CSS. Works in: Chrome, FF, Safari, Opera, IE9+ Uses modernizr.js to check for :checked pseudo class, falling back to plain old checkboxes (IE8 and bel…
When writing CSS, there are a few simple rules that will make your life easier.    1. Using ‘* {box-sizing:border-box;}’. Using this will wrap all your elements in a nice little compact box-model that will give you the width you want, like so... …
In this Micro Tutorial users will learn how to embed custom fonts into websites using @font-face in CSS Select a font: Ensure the EULA allows you to use @font-face: Download the font: Get the browser-compatible files you need: Edit your CSS       - Name …
In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…

734 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question