SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Zealot
    Join Date
    Jul 2008
    Posts
    109
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Hard one: Styling a parent without styling the children

    Hi everyone.

    I'm having a hell of time creating a dropdown menu with CSS. The problem is that the main level items need to be using image-replacement to display a graphic of the menu item in a fancy font, but the sub-menu items do not. However, due to the cascade my submenu items are inheriting text-indent: -9000px and I don't know how to stop it.

    Here's the HTML:

    HTML Code:
    <li id="our-company" class="first">
    <a href="http://www.greatcompany.com/company/" title="Company">Company</a> 
    <ul id="submenu"> 
    <li id="more-about-our-company">
    <a href="http://www.greatcompany.com/company/more-about-our-company/" title="More About Our Company">More About Our Company</a> 
    </li> 
    </ul> 
    </li>
    and here's the CSS:

    Code:
    ul#nav.right li#company a {
    	background: url('img/nav/company.gif') no-repeat top left;
    	text-indent: -9000px;
    	display: block;
    	width: 61px;
    	height: 16px;
    }
    
    ul#nav.right li#company a:hover {
    	background: url('img/nav/company.gif') no-repeat bottom left;
    }
    
    /* WEIRD STYLING SO I CAN FIND THE SUBMENU LINKS AS THEY ARE INHERITING -9000PX INDENT *//
    #nav ul li a {
    	color: white;
    	display: block;
    	float: left;
    	border: 1px solid red;
    	background-image: none !important;
    }
    You can get your firebug on here: http://microprobe.zacharyross.net/ Help! I don't want to have to create dozens of super-specific rules for the dozens of submenus yet to come! Any ideas?
    tweeting: @biklops

  2. #2
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    You need to be a little less specific. Start off by applying everything that all the submenus will have in common to #nav li a. You can simplify things by getting rid of the "right" class and just giviing #nav float:right. This will have the added benefit of stopping IE6 from ignoring these rules (it can't deal with things like #id.class or a.aclass.anotherclass).

    Now you start targetting the things that don't need this blanket styling:
    Code css:
    #nav li a {
        background: url('img/nav/home.gif') no-repeat top left;
        text-indent: -9000px;
        display: block;
        width: 39px;
        height: 16px;
    }
     
    #nav li#company a {
      /* only change things that are different from the default above */
      background-image: url('img/nav/company.gif');
      width:61px;
    }
     
    #nav li li a {
      text-indent:0; /* undo text indents for items in sub-lists
      width:80px; /* stop sub-items inheriting width of parent list item */
      background:white; /* overwrite 'home.gif' with a white background */
    }

    The alternative method to this is a lot simpler:
    Code css:
    #nav > li a {
        background: url('img/nav/home.gif') no-repeat top left;
        text-indent: -9000px;
        display: block;
        width: 39px;
        height: 16px;
    }
     
    #nav li#company a {
      /* only change things that are different from the default above */
      background-image: url('img/nav/company.gif');
      width:61px;
    }
     
    #nav li li a {
      /* specific stuff here - nothing inherited because of ">" selector used above! */
    }

    You can even have both a #nav > li a and #nav li a to inherit some things but not others.

  3. #3
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,567
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Just so you know, if you do use Raffles suggestion of using the general child selector then you will lose IE6 in the process (I don't know if you care or not, but I'd avoid using that selector (and use his other suggetion) to keep IE6 support
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  4. #4
    SitePoint Zealot
    Join Date
    Jul 2008
    Posts
    109
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks guys!

    Just removing the "ul#nav.right" from the image-replacement links did the trick. But I went ahead and rewrote the whole nav to be more elegant. This code came from a Themeforest WP theme and the css files are insanely redundant in general so I'm combing through the whole thing.

    Thanks again!
    tweeting: @biklops


Bookmarks

Posting Permissions

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