www.webdeveloper.com
Results 1 to 9 of 9

Thread: css ids overriding classes

  1. #1
    Join Date
    Jul 2009
    Posts
    77

    Question css ids overriding classes

    Here is some code that i'm trying to troubleshoot. I think my problem is in assigning an ID and a CLASS to a list in my header tag. The resulting output adheres to the #top_nav class CSS but not the ul.inline id CSS

    Thanks for any suggestions, my relevant code is below:

    HTML Code:
    HTML: 
    <ul class="inline" id="top_nav">
    	<li><a href="index.htm">HOME</a></li> 
    	<li><a href="about.htm">ABOUT</a></li>
    	<li><a href="connect.php">CONNECT</a></li>
    	<li><a href="initiative.htm">INITIATIVE</a></li>
    </ul>
    Code:
    CSS: 
    ul.inline {
    	display: inline;
    	list-style-type: none;
    }
    
    li { /*list items are displayed differently dependant on the parent list class (.inline or not) */
    	display: inherit;
    }
    
    ul #top_nav{
    	font: 2.0em Tahoma, sans-serif;
    	color: white;
    }

  2. #2
    Join Date
    Apr 2009
    Posts
    122
    Hi realmuffin,
    Quick question if i may. Looking at the code below, you could put all styles under just the id, unless you are having multiple ULs with the same properties?

  3. #3
    Join Date
    Jul 2009
    Posts
    77
    The page will have multiple inline ULs but each UL will be styled slightly differently (color/size etc).

    I know that what you suggest will work, but I was trying to be "correct" and abstract out the display: inline so that I don't need to specify "display: inline " for each individual ul..

    I'm pretty green at this, so I could be ttoally off the mark..

  4. #4
    Join Date
    Apr 2009
    Posts
    122
    No, that sounds fine to me. What's the issue that you're having with the CSS? It all seems to be working fine when you remove the inline class, it remove the style etc as expected.

  5. #5
    Join Date
    Jul 2009
    Posts
    77
    For some reason it works now that I removed the ul tag from the CSS. It's really odd, it should have worked before as per my understanding...


    CSS:
    ul.inline {
    display: inline;
    list-style-type: none;
    }

    li { /*list items are displayed differently dependant on the parent list class (.inline or not) */
    display: inherit;
    }

    ul #top_nav{
    font: 2.0em Tahoma, sans-serif;
    color: white;
    }

  6. #6
    Join Date
    Apr 2009
    Posts
    122
    Cool. One other thing.. If you were after changing the link color, you'd have to add:

    #top_nav a {
    color: white;
    }

    Ignore this if you weren't, just trying to save you having to post again

  7. #7
    Join Date
    Jul 2009
    Posts
    77
    oh, yes thanks!

  8. #8
    Join Date
    Jan 2009
    Posts
    3,346
    I think the issue with having the space between ul and your id was what was causing the unexpected behavior. An html element and a space followed by an id is the same as saying all instances of the id within the html element. Generally you are fine using just the id as the selector since they should always be unique for well formed pages.

  9. #9
    Join Date
    Jul 2009
    Posts
    77
    Quote Originally Posted by criterion9 View Post
    Generally you are fine using just the id as the selector since they should always be unique for well formed pages.
    Really good point, I'm going to change accordingly. Thanks!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles