Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Feb 2005
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    ID / class inheritance

    I am building a site that is going to have a number of pages containing some common components, whose look will change in different sections of the site. I have been successfully building up the basics in CSS and testing them on Mac browsers. Now I have tried a test on Windows IE6 and it is not working. I'd like to know if this is an IE6 limitation so that I can cut my losses and just start hard-coding the variations. (Which would be too bad, it was working nicely on the Mac browsers -- even IE5!)

    Basically, I have an CSS declaration of an ID, for example

    #story {
    width: 512px;
    }

    and then for each I have a catalog of classes which modify other attributes.

    #story.vanilla {
    background-color: blue;
    }

    #story.chocolate {
    background-color: red;
    }

    And in the HTML I use declarations like:

    <div id="story" class="vanilla"> blah blah </div>

    blah blah

    <div id="story" class="chocolate"> blah blah </div>

    On the Mac browsers it has worked fine: chocolate and vanilla have the width of a story ID, but have their own background color. On Windows IE6 it seems to apply only the attributes for the first class defined -- vanilla in this case. (BTW, I'm not trying to supersede the same attributes as those defined by the ID -- the class definitions are for a different set of attirbutes.)

    Is this a known problem, or should I submit code to see if I'm coding something wrong?

    thanks,
    BR

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    you can only call an id or name one time, if u want to use the same css for multiple elements then uses classes

  • #3
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    Also, you can use more than one class per element, so you could do:

    Code:
    CSS:
    
    .story {
    width: 512px;
    }
    
    .vanilla {
    background-color: blue;
    }
    
    .chocolate {
    background-color: red;
    }
    
    
    HTML:
    
    <div class="story chocolate"> blah blah </div>
    <div class="story chocolate"> blah blah </div>
    Hope this helps,

  • #4
    New to the CF scene
    Join Date
    Feb 2005
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Clarification

    You're absolutely right -- but that was just a mistake in my message. I didn't actually try to declare the same ID twice in the same page. I should have written:

    ...In the HTML I'll use a declarations like:

    <div id="story" class="vanilla"> blah blah </div>

    on one page, and use

    <div id="story" class="chocolate"> blah blah </div>

    on another page.

    Only the vanilla case works. When I reorder the class declarations in my CSS file so that the chocolate declaration appears first, then only the chocolate page works.

    BR

  • #5
    Senior Coder
    Join Date
    Oct 2003
    Location
    Australia
    Posts
    1,963
    Thanks
    0
    Thanked 0 Times in 0 Posts
    This will work:

    Code:
    #story {
     rules for both
    }
    
    .chocolate {
      rules for chocolate
    }
    
    .vanilla {
      rules for vanilla
    }
    If it doesn't work, something else is wrong and you should show us all your code

    I take no responsibility for the above nonsense.


    Left Justified

  • #6
    New to the CF scene
    Join Date
    Feb 2005
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for the responses. You are all correct, and I do have a solution. I'm able to keep the ID definitions and the classes, but I do have to specify the CSS a little differently.

    #story {
    width: 512px;
    }

    .vanillaStory {
    background-color: blue;
    }

    .chocolateStory {
    background-color: red;
    }

    File 1:
    <div id="story" class="vanillaStory"> blah blah </div>
    File 2:
    <div id="story" class="chocolateStory"> blah blah </div>

    In other words, the CSS syntax would only work if I left the #id-name out of
    the specialized class definitions. Then I just had to be sure that this generic class was given a name was clearly identified in the context of this ID. I'll end up with more class names but I'll live with that.

    Thanks for the help.

    BR


  •  

    Posting Permissions

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