SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    Zero Point Zero Siebird's Avatar
    Join Date
    Feb 2007
    Location
    York, PA
    Posts
    456
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Specificity Issue

    I can't seem to figure out why this isn't working???
    Code CSS:
    #container #globalheader #globalnav #nav_postframe .current a {background: url(../layout/btn-nav.gif) no-repeat -139px -25px;}
    Code HTML4Strict:
    <body>
    <div id="container">
            <div id="header">
    	         <h1 id="logo"><a href="/">Company</a></h1>
                    <ul id="header_nav">
    		<li><a href="/" title="Home">Home</a></li>
    		<li><a href="contact.php" title="Contact">Contact</a></li>
    		<li><a href="faq.php" title="Frequently Asked Questions">F.A.Q</a></li>
    	       </ul>
           </div>
     
           <div id="globalheader">
                    <ul id="globalnav">
    		<li id="nav_about"><a href="/about.php">About</a></li>
    		<li id="nav_residential"><a href="/residential.php">Residential </a></li>
    		<li class="current" id="nav_postframe"><a href="/postframe.php">Post Frame</a></li>
    		<li id="nav_archcomm"><a href="/archcomm.php">Architectural &amp; Commercial</a></li>
     
    		<li id="nav_sss"><a href="/selfstorage.php">Self-Storage Solutions</a></li>
    		<li id="nav_colorvis"><a href="/visualizer.php">Color Visualizer</a></li>
    		<li id="nav_pgallery"><a href="/projects.php">Photo Gallery</a></li>
    		<li id="nav_tech"><a href="/technical.php">Technical</a></li>
    		<li id="nav_news"><a href="/news.php">News</a></li>
     
    		<li id="nav_corpinfo"><a href="/corpinfo.php">Corporate Information</a></li>
    	        </ul>
            </div>

  2. #2
    SitePoint Guru
    Join Date
    Nov 2005
    Location
    Norway
    Posts
    715
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Remove #nav_postframe from your css code and it should work.

  3. #3
    Zero Point Zero Siebird's Avatar
    Join Date
    Feb 2007
    Location
    York, PA
    Posts
    456
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Perfect! The only problem now is I have a php script that automatically adds the class 'current' to the list item that correlates to that specific page. If I remove the id's from the rule, then I can't specify each unique list item and give the correct background position?

  4. #4
    SitePoint Guru
    Join Date
    Nov 2005
    Location
    Norway
    Posts
    715
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I got it working by removing the space between #nav_postfram and .current
    Code:
    #container #globalheader #globalnav #nav_postframe.current a {background: url(../layout/btn-nav.gif) no-repeat -139px -25px;}

  5. #5
    Zero Point Zero Siebird's Avatar
    Join Date
    Feb 2007
    Location
    York, PA
    Posts
    456
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the quick response! Leaving a space makes it look for the next element with the class 'current' -- And no-space looks for the element with the id #nav_postframe and class 'current'...did I interpret that right?

  6. #6
    SitePoint Guru
    Join Date
    Nov 2005
    Location
    Norway
    Posts
    715
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Correct, it checks for elements that match all the components.

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,777
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    And no-space looks for the element with the id #nav_postframe and class 'current'...did I interpret that right?
    Yes but unfortunately IE6 doesn't understand this form of concatenation and will produce unreliable results and is therefore unusable if you want to support IE6. (There is no workaround except to avoid using that method.)

    Here is why.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    <style type="text/css">
    #test.red {background:red;}
    #test.green {background:green;}
    #test.blue{background:blue}
    </style>
    </head>
    <body>
    <div id="test" class="blue">This should be blue</div>
    <p>IE6 and less don't color the background at all unless you use class="red" as they only seem to match the first instance of the rule in the cascade and ignore the oother dot separated rules for #test.</p>
    </body>
    </html>
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    <style type="text/css">
    #test.red {background:red;}
    #test.blue{background:blue}
    #test.green {background:green;}
    </style>
    </head>
    <body id="test" class="red">
    <!-- <body id="test" class="green"> -->
    <!-- <body id="test" class="blue"> -->
    <h1>Ie6 Classname bug</h1>
    <p>Only the first #test.classname will affect this page. e.g. #test.red</p>
    <p>Change the classname in the body and you will see that no style gets applied. Or alternatively change the order of the stylesheet and the rule that comes first is the one that gets applied.</p>
    </body>
    </html>
    The same applies for classname.classname and it's use should be avoided if IE6 is t be supported.

  8. #8
    Zero Point Zero Siebird's Avatar
    Join Date
    Feb 2007
    Location
    York, PA
    Posts
    456
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I see...learned a new bug about IE6.

    Fortunately for me, it still works as each instance is for a specific page and therefore doesn't effect sequence
    Code CSS:
    #nav_about {left: 0;width: 60px}
    #nav_about a {background: url(../layout/btn-nav.gif) no-repeat 0px 0px;}
    #nav_about a:hover {background-position:0px -50px;}
    #nav_about a:active {background-position:0px -25px;}
    #container #globalheader #globalnav #nav_about.current a {background-position: -0px -25px;}
     
    #nav_residential {left: 59px;width: 80px}
    #nav_residential a {background: url(../layout/btn-nav.gif) no-repeat -59px 0px;}
    #nav_residential a:hover {background-position:-59px -50px;}
    #nav_residential a:active {background-position:-59px -25px;}
    #container #globalheader #globalnav #nav_residential.current a {background-position: -59px -25px;}
     
    #nav_postframe {left: 139px;width: 80px}
    #nav_postframe a {background: url(../layout/btn-nav.gif) no-repeat -139px 0px;}
    #nav_postframe a:hover {background-position:-139px -50px;}
    #nav_postframe a:active {background-position:-139px -25px;}
    #container #globalheader #globalnav #nav_postframe.current a {background-position: -139px -25px;}
     
    #nav_archcomm {left: 219px;width: 89px}
    #nav_archcomm a {background: url(../layout/btn-nav.gif) no-repeat -219px 0px;}
    #nav_archcomm a:hover {background-position:-219px -50px;}
    #nav_archcomm a:active {background-position:-219px -25px;}
    #container #globalheader #globalnav #nav_archcomm.current a {background-position: -219px -25px;}
     
    #nav_sss {left: 308px;width: 136px}
    #nav_sss a {background: url(../layout/btn-nav.gif) no-repeat -308px 0px;}
    #nav_sss a:hover {background-position:-308px -50px;}
    #nav_sss a:active {background-position:-308px -25px;}
    #container #globalheader #globalnav #nav_sss.current a {background-position: -308px -25px;}
     
    #nav_colorvis {left: 444px;width: 106px}
    #nav_colorvis a {background: url(../layout/btn-nav.gif) no-repeat -444px 0px;}
    #nav_colorvis a:hover {background-position:-444px -50px;}
    #nav_colorvis a:active {background-position:-444px -25px;}
    #container #globalheader #globalnav #nav_colorvis.current a {background-position: -444px -25px;}
     
    #nav_pgallery {left: 550px;width: 92px}
    #nav_pgallery a {background: url(../layout/btn-nav.gif) no-repeat -550px 0px;}
    #nav_pgallery a:hover {background-position:-550px -50px;}
    #nav_pgallery a:active {background-position:-550px -25px;}
    #container #globalheader #globalnav #nav_pgallery.current a {background-position: -550px -25px;}
     
    #nav_tech {left: 642px;width: 70px}
    #nav_tech a {background: url(../layout/btn-nav.gif) no-repeat -642px 0px;}
    #nav_tech a:hover {background-position:-642px -50px;}
    #nav_tech a:active {background-position:-642px -25px;}
    #container #globalheader #globalnav #nav_tech.current a {background-position: -642px -25px;}
     
    #nav_news {left: 712px;width: 50px}
    #nav_news a {background: url(../layout/btn-nav.gif) no-repeat -712px 0px;}
    #nav_news a:hover {background-position:-712px -50px;}
    #nav_news a:active {background-position:-712px -25px;}
    #container #globalheader #globalnav #nav_news.current a {background-position: -712px -25px;}
     
    #nav_corpinfo {left: 762px;width: 84px}
    #nav_corpinfo a {background: url(../layout/btn-nav.gif) no-repeat -762px 0px;}
    #nav_corpinfo a:hover {background-position:-762px -50px;}
    #nav_corpinfo a:active {background-position:-762px -25px;}
    #container #globalheader #globalnav #nav_corpinfo.current a {background-position: -762px -25px;}
    Last edited by Siebird; Aug 12, 2008 at 06:19.

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,777
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Fortunately for me, it still works as each instance is for a specific page and therefore doesn't effect sequence
    Yes as long as you don't ever concatenate another classname to that same id then you should be ok


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
  •