A:'s gets mixed up from different classes!
12-30-2005, 06:47 PM
|
A:'s gets mixed up from different classes!
|
Posts: 43
|
Help! What's going on with my template!?
I have three different menus, where the main menu has one link style assigned and the two others a total different one. Somehow, it seems that the a:-tags gets mixed up, all depending on where I place the classes in the css-file...
Here's the CSS-file:
Code:
body {
margin:0;
background-color:#535353;
}
.container_cntfooter {
background-image:url(bg_cntfooter.jpg);
background-position:right top;
background-repeat:no-repeat;
background-color:#535353;
height:166px;
font-family: Arial, Helvetica, sans-serif;
font-size: 9px;
color: #666666;
text-decoration: none;
text-align: center;
}
.container_sbrfooter {
background-image:url(bg_sbrfooter.jpg);
background-position:left top;
background-repeat:no-repeat;
background-color:#535353;
height:166px;
}
.container_gnrfooter {
background-image:url(bg_gnrfooter.jpg);
background-position:top;
background-repeat:no-repeat;
background-color:#535353;
height:166px;
}
.container_upper {
background-image:url(bg_upper.jpg);
height:100px;
vertical-align: middle;
}
.container_menu {
background-image:url(bg_menu.jpg);
background-color:#D3D09D;
height:51px;
vertical-align:top;
background-repeat:repeat-x;
text-align: right;
font-family: Georgia;
font-size: 11px;
font-weight: bold;
text-transform: uppercase;
color: #F6F4CE;
text-decoration: none;
padding-top: 10px;
padding-right: 4px;
padding-bottom: 4px;
padding-left: 4px;
font-style: normal;
}
.container_menu a:link, a:visited, a:active {
font-family: Georgia;
font-size: 10,5px;
font-weight: bold;
text-transform: uppercase;
color: #F3F3E4;
text-decoration: none;
}
.container_menu a:hover {
font-family: Georgia;
font-size: 10,5px;
font-weight: bold;
text-transform: uppercase;
color: #97B400;
text-decoration: none;
}
.container_content {
background-image:url(bg_content.jpg);
background-position:top;
background-repeat:repeat-x;
background-color:#FEFFDF;
height:136px;
vertical-align: top;
padding: 0px;
font-family: Georgia, "Times New Roman", Times, serif;
color: #333333;
}
.container_sidebar {
background-image:url(bg_sidebar.jpg);
background-repeat:no-repeat;
background-color:#FEFFDF;
vertical-align: top;
padding: 0px;
}
.font_pagetitle {
font-family: Georgia;
font-size: 14px;
color: #445E1F;
text-decoration: none;
font-weight: bold;
vertical-align: bottom;
}
.font_sidebartitle {
font-family: Georgia;
font-size: 12px;
color: #723929;
text-decoration: none;
font-weight: bold;
vertical-align: bottom;
}
.block_submenu {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 10px;
font-weight: bold;
color: #515151;
text-decoration: none;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #CFCC99;
}
.block_submenu a:link, a:visited, a:active {
font-family: Georgia;
font-size: 12px;
color: #000000;
text-decoration: none;
}
.block_submenu a:hover {
font-family: Georgia;
font-size: 12px;
color: #CCCCCC;
text-decoration: none;
}
(the problematic classes are: "container_menu" and "block_submenu")
Now, as I've already told you guys, when I move the container_menu-class down to the bottom of the CSS-file, the menu works fine but not the submenus... When I keep the positions the way I've posted it goes the other way...
Address:
http://www.norcan.org/ancore
What could have caused this? |
|
|
|
|
12-30-2005, 07:24 PM
|
|
Posts: 13,519
Location: Blackpool. UK
|
inheritance and selectivity
if .block_submenu is child of container_menu then the last definitions will take precedence.
to ensure that everything is set as you want, define properties for .selector a (without a pseudo-class) for the common properties for both classes.
__________________
Chris. ->> Links are advertising NOT optimising!! <<-
Indifference will be the downfall of mankind, but who cares?
Code Samples | People Counting System
|
|
|
|
|
12-30-2005, 07:49 PM
|
|
Posts: 43
|
Ah, thanks for your quick reply! 
I didn't quite get what you ment though (semi-n00b!)
Can you provide me with an example of how to do it right?
Thanks alot man! |
|
|
|
|
12-30-2005, 08:18 PM
|
|
Posts: 13,519
Location: Blackpool. UK
|
Like so;
Code:
.container_menu a {
font-family: Georgia;
font-size: 10.5px;
font-weight: bold;
text-transform: uppercase;
text-decoration: none;
color: #F3F3E4;
}
.container_menu a:link, a:visited, a:active {
color: #F3F3E4;
}
.container_menu a:hover {
color: #97B400;
}
and do the same for the sub block. it reduces the amount of duplicated definitions and allows you to be more selective about what properties cascade down to child containers.
Just noticed something though which will definitely be messing things up
in .container_menu you have used 10 ,5px instead of 10 .5px (comma instead of full stop/decimal point/period [delete as required ])
__________________
Chris. ->> Links are advertising NOT optimising!! <<-
Indifference will be the downfall of mankind, but who cares?
Code Samples | People Counting System
|
|
|
|
|
12-30-2005, 08:23 PM
|
|
Posts: 43
|
Ohhh.... THANK YOU SO MUCH!
Looks like you know your stuff! I'm gonna go ahead and try it.
And btw, thanks for letting me know about the other problem too... Funny enough, that hasn't showed up wrong yet. I guess it will soon though...
Once again, thanks!
|
|
|
|
|
12-30-2005, 08:40 PM
|
Still something fishy going on...
|
Posts: 43
|
Huh? That didn't do it either! It cleaned up my code though 
Well, I've figured out that the last a:'s (block_submenu) decides how all links looks like... I changed .block_submenu a:link from #OOOOOO to #FFFFFF just to try, and that changed the main menu too, which (should) be affected by the container_menu-class.
Code:
body {
margin:0;
background-color:#535353;
}
.container_cntfooter {
background-image:url(bg_cntfooter.jpg);
background-position:right top;
background-repeat:no-repeat;
background-color:#535353;
height:166px;
font-family: Arial, Helvetica, sans-serif;
font-size: 9px;
color: #666666;
text-decoration: none;
text-align: center;
}
.container_sbrfooter {
background-image:url(bg_sbrfooter.jpg);
background-position:left top;
background-repeat:no-repeat;
background-color:#535353;
height:166px;
}
.container_gnrfooter {
background-image:url(bg_gnrfooter.jpg);
background-position:top;
background-repeat:no-repeat;
background-color:#535353;
height:166px;
}
.container_upper {
background-image:url(bg_upper.jpg);
height:100px;
vertical-align: middle;
}
.container_menu {
background-image:url(bg_menu.jpg);
background-color:#D3D09D;
height:51px;
vertical-align:top;
background-repeat:repeat-x;
text-align: right;
padding-top: 10px;
padding-right: 4px;
padding-bottom: 4px;
padding-left: 4px;
}
.container_menu a {
font-family: Georgia;
font-size: 11px;
font-weight: bold;
text-transform: uppercase;
text-decoration: none;
}
.container_menu a:link, a:visited, a:active {
color: #F3F3E4;
}
.container_menu a:hover {
color: #97B400;
}
.container_content {
background-image:url(bg_content.jpg);
background-position:top;
background-repeat:repeat-x;
background-color:#FEFFDF;
height:136px;
vertical-align: top;
padding: 0px;
font-family: Georgia, "Times New Roman", Times, serif;
color: #333333;
}
.container_sidebar {
background-image:url(bg_sidebar.jpg);
background-repeat:no-repeat;
background-color:#FEFFDF;
vertical-align: top;
padding: 0px;
}
.font_pagetitle {
font-family: Georgia;
font-size: 14px;
color: #445E1F;
text-decoration: none;
font-weight: bold;
vertical-align: bottom;
}
.font_sidebartitle {
font-family: Georgia;
font-size: 12px;
color: #723929;
text-decoration: none;
font-weight: bold;
vertical-align: bottom;
}
.block_submenu {
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #CFCC99;
}
.block_submenu a {
font-family: Georgia;
font-size: 11px;
text-decoration: none;
}
.block_submenu a:link, a:visited, a:active {
color: #FFFFFF;
}
.block_submenu a:hover {
color: #97B400;
}
I don't get it...
What on earth can be wrong?? 
Last edited by bkvernst : 12-30-2005 at 08:43 PM.
|
|
|
|
|
12-30-2005, 09:09 PM
|
|
Posts: 847
Name: Justice McCay
Location: New Jersey
|
Edited post...my answer was incorrect. 
Sorry, good luck! |
|
|
|
|
12-30-2005, 10:30 PM
|
|
Posts: 43
|
Okay, thanks anyways |
|
|
|
|
12-30-2005, 10:55 PM
|
|
Posts: 636
|
Your selectors are kinda wrong methinks... when you say:
Code:
.container_menu a:link, a:visited, a:active
you are saying this style is applied to the .containter_menu a:link and ANY A tag that is visited or active... you needs to have it like this to have it for only the .container_menu a tags:
Code:
.container_menu a:link, .container_menu a:visited, .container_menu a:active
that will apply your style to the :link, :visited and :active stats of the anchor inside of the .container_menu class.
A good site for checking CSS selection is SelectORacle:
http://penguin.theopalgroup.com/cgi-...electoracle.py
Does that help? |
|
|
|
|
12-31-2005, 06:14 AM
|
|
Posts: 13,519
Location: Blackpool. UK
|
It's a good point !
<mumbles>
Now why didn't I see that
</mumbles>
__________________
Chris. ->> Links are advertising NOT optimising!! <<-
Indifference will be the downfall of mankind, but who cares?
Code Samples | People Counting System
|
|
|
|
|
12-31-2005, 08:56 AM
|
|
Posts: 43
|
Hehe...
Well, I'll check it out and keep you guys updated on how it goes  |
|
|
|
|
01-01-2006, 05:23 PM
|
|
Posts: 43
|
Naah, that didn't do it either...
I think I'll have a look at my HTML, because I suspect there's something fishy going on there instead of in my HTML.
I'm using a CMS, and I think the menu-function is cluddering something up...
Once again, I'll keep you guys updated!
|
|
|
|
|
« Reply to A:'s gets mixed up from different classes!
|
|
|
Posting Rules
|
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
HTML code is Off
|
|
|
|
|
|
