koolworld
Posts:40
| | 02/09/2007 9:45 AM |
| Hi, as the title says im wanting to know if i can style the selecttab for different levels. I want the selected tab of level1 to be different from level0 but i can't figure out how to refer to the class ("SelectedTab Level1") from the CSS.
Cheers,
Dan. | | | |
|
|
|
John Mitchell
Posts:3478
| | 02/09/2007 11:01 AM |
| Hi Dan,
That is how you would do it, and you may want to add the LI element selector and even the containerid for the menu.
So assuming your menu id is NavMenu it would be like this:
#NavMenu li .SelectedTab .Level1 {
background-color:white;
color:blue;
border:1px solid blue;
}
but just using the two class selectors should work too:
.SelectedTab .Level1 {
background-color:white;
color:blue;
border:1px solid blue;
} | | | |
|
koolworld
Posts:40
| | 02/09/2007 11:20 AM |
| Hi John, thanks for the reply. It doesn't work as expect though, here's the source around the element in question:
class="SelectedTab Level0"
the id of the container div is #NavTabs so i obviously changed that within the example you gave above. The level1 elements just seem to use the:
#NavTabs .SelectedTab a{
background-color: #9FB5CE;
color:#ffffff;
font-size: 1.15em;
}
which applies to all levels of selected tabs. Any ideas?
Cheers, Dan.
| | | |
|
John Mitchell
Posts:3478
| | 02/09/2007 11:26 AM |
| Ok, I forgot about the anchor needing the style too, try this:
#NavTabs .SelectedTab .Level1 a{
background-color:white;
color:green;
} | | | |
|
koolworld
Posts:40
| | 02/09/2007 11:29 AM |
| still no joy - im using v1.6 at the moment. Not sure why it isn't picking up the styles as expected. These are the styles im using: #NavTabs .Level0 {
padding:0px;
border-bottom: 1px solid #ffffff;
margin:0px;
}
#NavTabs .Level0 a {
font-weight:bold;
}
#NavTabs .Level1 {
padding-left: 6px;
width: 120px;
}
#NavTabs .Level1 a {
padding-left: 6px;
width: 112px;
}
#NavTabs .SelectedTab a{
background-color: #9FB5CE;
color:#ffffff;
font-size: 1.15em;
}
#NavTabs .SelectedTab .Level1 a{
background-color:white;
color:green;
} | | | |
|
koolworld
Posts:40
| | 02/09/2007 2:15 PM |
| having looked at this, im not sure how it would work, where there's this: class="SelectedTab Level1" for the selected level1 LI, surely that's just telling it to apply the "SelectedTab" style and the "Level1" style. Should the navmenu not write out a class like class="SelectedTabLevel1" so that i could style each level's selected tab differently?
Isn't this CSS statement:
.SelectedTab .Level1 a{
}
applying to an anchor within an element with a .Level1 class within an element with a .SelectedTab class? | | | |
|
John Mitchell
Posts:3478
| | 02/09/2007 2:59 PM |
| Those are called combination selectors so that you can style them seperately or together.
http://www.w3.org/TR/2004/CR-CSS21-20040225/selector.html#class-html
If I combined them together to make a unique class it may be a little easier to understand, but it would remove the ability for SelectedTab to define a more global style like font-family and font-weight, while the Leveln lets you style a specific level.
Where I messed up in my previous post is by putting the space in the declaration.
I just tried the declaration below on my site which you can see in action:
http://www.snapsis.com/Services/CustomDevelopment/tabid/295/Default.aspx
(try CTRL+Refresh if you don't see green text with white background)
#NavTabs li.SelectedTab.Level1 a
{
border-left: #ff0000 4px solid;
color: green;
background-color: white;
}
| | | |
|
koolworld
Posts:40
| | 02/11/2007 6:56 AM |
| thanks for the info john, i've read through the link you gave and it makes sense but i cannot get mine to work in the same way for some reason, in IE6 that is. It works sofaras any LI which has class="SelectedTab Level1" is styled with the css style you gave but also, any LI with class="Level1" is also styled with the above style which confused me as the text states you must have both styles in the class declaration for it to apply.
I then tried it in Firefox2 and IE7 and it worked as expected, the styles were applied to the correct LI's when using class="SelectedTab Level1", any LI's which just had class="Level1" didn't get styled as you'd expect.
So, it looks like it isn't behaving as expected in IE6 SP2 for some reason, is there anything you might know of which is causing this, does it need a different CSS syntax to correct this in IE6?
Regards. | | | |
|
John Mitchell
Posts:3478
| | 02/11/2007 10:28 AM |
| I'm not sure why it wouldn't work in IE6 except of course the obvious reason that IE likes to do things it's own way.
I don't have IE6 to try it on right now, but you may just have to experiment with another declaration that is simular and place it above and below the correct one to see if you can get it to work in all browsers and versions, or you can just call it a bug in IE6 and be done with it  | | | |
|
koolworld
Posts:40
| | 02/14/2007 9:09 AM |
| | Thanks for all your help with this John, as you say i think im gonna have to accept it's IE6 misbehaving! | | | |
|
Patrik
Posts:42
| | 07/20/2007 4:51 AM |
| Hi John I had exactly the same problem, which is also described here:
http://www.ryanbrill.com/archives/multiple-classes-in-ie/
http://www.mail-archive.com/listdad@webstandardsgroup.org/msg06858.html
I solved the problem by adding the javacript library called IE7 which loads and parses all style sheets into a form that Explorer can understand. You can then use most CSS2/CSS3 selectors without having to resort to CSS hacks. Now everything is working fine.
see also:
http://dean.edwards.name/IE7/
http://artikel.fabrice-pascal.de/posfixedie6/3/
Patrick | | | |
|