SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Wizard bronze trophy Black Max's Avatar
    Join Date
    Apr 2007
    Posts
    4,029
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)

    Display problem changing over from ID to CLASS

    This is a bit trickier...at least for me and my limited understanding.

    I'm using CSS buttons for my index page, the big buttons in the center, in a vertical list. When I originally wrote (actually modified someone else's) code for the buttons, I used the ID attribute:

    Code:
    #buttonmenu {
    	margin-left: 10px;
    }
    #buttonmenu ul, #buttonmenu li {
    	margin: 0;
    	padding: 0;
    	list-style-type: none;
    	list-style-image:none;
    }
    #buttonmenu a {
    	display: block;
    	width: 115px;
    	padding: 8px;
    	margin: 0;
    	border: 5px outset #7ac7fe;
    	background-image: url('http://www.iraqtimeline.com/graphics/bluemottle.jpg');
    	color: white;
    	text-align: center;
    	font-weight: bold;
    	font-family: Trebuchet, Verdana, Arial, sans-serif;
    }
    #buttonmenu a:hover {
    	position: relative; 
    	border: 5px inset #7ac7fe;
    	background-image: url('http://www.iraqtimeline.com/graphics/bluemottle.jpg');
    	color: white;
    	font-weight: bold;
    	font-family: Trebuchet, Verdana, Arial, sans-serif;
    }
    for the buttons. Unfortunately, because there is text beneath each button, and there are several dozen buttons on the page, I'm repeating ID tags throughout the page -- not proper, as I understand it. Here's a truncated version of the HTML:

    Code:
    <div id="buttonmenu">
    <ul>
    <li><a href="1897.html">1897-1960</a></li>
    
    <li>...text here...</li>
    
    </ul>
    </div>
    
    <div id="buttonmenu">
    <ul>
    <li><a href="1961.html">1961-1970</a></li>
    
    <li>...text here...</li>
    
    </ul>
    </div>
    
    ...and repeat
    It actually displays properly in FF, IE6, and Opera, but I'd like to be valid, and I don't know what it looks like in IE7, Mac IE, Safari, or Konq, much less other browsers.

    So I tested a change, making the CSS for the buttonmenu a class instead of an ID:

    Code:
    .buttonmenu 
    
    and so forth
    and changing the div ID in the HTML to div class:

    Code:
    <div class="buttonmenu">
    Problem is, in IE6 the text links in the buttons themselves no longer appear in white, as mandated in the CSS code, but in the overall link colors:

    Code:
    A:link {
       color: #0000ff;
       text-decoration: none;
    
    ...and so forth...
    }
    (I didn't test it in FF or Opera, since the problem showed up in IE6, and the majority of my site's visitors use some version of IE, more's the pity.)

    Obviously, I'm running into a problem with the cascading part of CSS, with the original link CSS overriding the buttonmenu style commands. It doesn't happen with the ID tag, but it does with the class tag.

    Here is the link to the stylesheet, if you're interested.

    Any ideas?

  2. #2
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Get rid of <!-- and --> (HTML comments are not allowed in stylesheets).

  3. #3
    SitePoint Wizard bronze trophy Black Max's Avatar
    Join Date
    Apr 2007
    Posts
    4,029
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)
    Get rid of <!-- and --> (HTML comments are not allowed in stylesheets).
    Dadgum it, I thought I had already gotten rid of those. I must be going blind.

    Color me stupid -- I don't have to repeat the div id tags over and over again, if my quick-and-dirty test in IE and Firefox is any judge. Sloppy coding on my part. Since I don't have to repeat the id tags, I don't need to worry about using the id tag over and over. But I'm still curious as to why there's a cascading problem with the link code using the class tag and not the id.

  4. #4
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Because the global link styles are coming after the class styles. Swap the order around so the main link styles come first, followed by the class styles, and it should correct itself.

  5. #5
    SitePoint Wizard bronze trophy Black Max's Avatar
    Join Date
    Apr 2007
    Posts
    4,029
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)
    Swap the order around so the main link styles come first, followed by the class styles, and it should correct itself.
    Believe it or not, that actually crossed my mind...after I already posted this thread. I am still canalized to think in alphabetical (i.e. prehistoric) terms. My biggest question was if it was an IE quirk or something else. Guess not -- the term "cascading" actually means something. I'm still figuring out what it means, I take it.

    I'm going to bed. Fixes tomorrow. Thanks, Dan.

    (Side note: I got my first piece of hate mail in months today. Wonder if it was a Sitepoint poster? )

  6. #6
    SitePoint Addict GonzaloGM's Avatar
    Join Date
    May 2007
    Location
    Rosario, Argentina
    Posts
    213
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It's because you're "redefining" the link properties. Maybe you can see it like this: when you set a link with a class (a.someclass) you are telling it "set these properties to this links (the one with the class "someclass")", and then when you define de properties for the general links (just a; without any class) you're saying "ok, now set these properties to ALL links", so you override the previously set properties.

  7. #7
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,861
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    The class attributes are more specific and should take precedence over generals styles but IE is known for doing its own thing rather than following the rules.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  8. #8
    SitePoint Wizard bronze trophy Black Max's Avatar
    Join Date
    Apr 2007
    Posts
    4,029
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)
    Then I can't see the need to ever use an ID tag again. It seems to be redundant, with the class selector doing everything an ID will do without the limitation of being able to be used only once. The much more knowledgeable folks at WestCiv seem to agree....

    Of course, I'm coming late to the party with this realization, no doubt, but hey, it's a minor revelation to me.

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,466
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Then I can't see the need to ever use an ID tag again
    ID's are mainly used to divide your page into a logical sections and therefore give extra structure to the page (e.g. Header, Footer, Navigation, mainContent etc). These main elements provide the structure of your page and the id's imply a semantic meaning to that structure.

    Of course you could do it all with classes but classes do not carry the same semantics as Id's and do not uniquely identify an element in the way that id's do. If you are using Javascript then you have to use id's to find that element exactly which can't be done with classes as you would find all the classes and not that one unique element.

    In practice its just a matter of preference as there is no problem in just using only classes and perhaps advantages in not having specificity issues.

  10. #10
    SitePoint Wizard bronze trophy Black Max's Avatar
    Join Date
    Apr 2007
    Posts
    4,029
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)
    Good answer, Paul. Using IDs for specific organizational structure and classes for everything else -- basically -- makes sense.


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
  •