SitePoint Sponsor |
|
User Tag List
Results 1 to 8 of 8
Thread: Very slight CSS issue
-
Oct 21, 2003, 12:57 #1
Very slight CSS issue
I've just changed the design of my 2 larger (non-commerical) sites.
However, from the navigation menu I created, I'm getting a clash with the CSS of vBulletin - it's causing left-hand nav links to be underlined when I've tried to stipulate against that in their class description.
I don't know enough about this to sort it out. Essentially, I'm running the following code:
Code:A.leftLink { BACKGROUND-COLOR: #ffffff; BORDER-BOTTOM: #333333 1px solid; BORDER-LEFT: #ededed 1px solid; BORDER-RIGHT: #999999 1px solid; BORDER-TOP: #ededed 1px solid; display:block; COLOR: #000000; FONT-FAMILY: Arial, Helvetica, sans-serif; display:block; FONT-SIZE: 9px; PADDING-LEFT: 10px; TEXT-DECORATION: none } A.leftLink:hover { BACKGROUND-COLOR: #dbdbdb; BORDER-BOTTOM: #ededed 1px solid; BORDER-LEFT: #999999 1px solid; BORDER-RIGHT: #ededed 1px solid; BORDER-TOP: #999999 1px solid; COLOR: #000000; TEXT-DECORATION: none }
which is interfered with by the vBulletin CSS - I think this:
Code:BODY A:link { COLOR: #666666; TEXT-DECORATION: underline } BODY A:visited { COLOR: #000000; TEXT-DECORATION: underline } BODY A:hover { COLOR: #666666; TEXT-DECORATION: underline } BODY A:active { COLOR: #666666; TEXT-DECORATION: underline }
How can I ensure that my left-hand navigation links in the forum are not underlined?
You can see an example of how the left-hand nav menu normally looks here:
http://www.comparative-religion.com
compared to here:
http://www.comparative-religion.com/forum/index.php
which should illustrate the underline issue.
Apologies - I'm very much the trial and error person.Internet Business Forums - free business help & advice
-
Oct 21, 2003, 13:13 #2
A.leftLink {
BACKGROUND-COLOR: #ffffff;
BORDER-BOTTOM: #333333 1px solid;
BORDER-LEFT: #ededed 1px solid; BORDER-RIGHT: #999999 1px solid; BORDER-TOP: #ededed 1px solid; display:block;
COLOR: #000000;
FONT-FAMILY: Arial, Helvetica, sans-serif;
FONT-SIZE: 9px;
PADDING-LEFT: 10px;
TEXT-DECORATION: none <---- i think the problem is here, see it you forgot the ";"
}
also kick out:
BODY in front of all those BODY links and never forget the ";" at the end.
Should work.
-
Oct 21, 2003, 13:46 #3
Thanks for that - hm, still showing as underlined, though.
Internet Business Forums - free business help & advice
-
Oct 21, 2003, 14:58 #4
mmhh funny, i tried it on my compu and it worked just fine, but i think i got the code right from your website and there it looks like this:
body a:link {
color: #666666;
text-decoration: underline;
}
body a:visited {
color: #000000;
text-decoration: underline;
}
body a:hover, body a:active {
color: #666666;
text-decoration: underline;
}
I kicked out all those bodies and seperated this:
body a:link {
color: #666666;
text-decoration: underline;
}
body a:visited {
color: #000000;
text-decoration: underline;
}
body a:hover, body a:active {
color: #666666;
text-decoration: underline;
}
Then i jumped to:
A.leftLink { BACKGROUND-COLOR: #ffffff; BORDER-BOTTOM: #333333 1px solid; BORDER-LEFT: #ededed 1px solid; BORDER-RIGHT: #999999 1px solid; BORDER-TOP: #ededed 1px solid; display:block; COLOR: #000000; FONT-FAMILY: Arial, Helvetica, sans-serif; FONT-SIZE: 9px; PADDING-LEFT: 10px; TEXT-DECORATION: none }
A.leftLink:hover { BACKGROUND-COLOR: #dbdbdb; BORDER-BOTTOM: #ededed 1px solid; BORDER-LEFT: #999999 1px solid; BORDER-RIGHT: #ededed 1px solid; BORDER-TOP: #999999 1px solid; COLOR: #000000; TEXT-DECORATION: none }
and saw that the ";" was missing so i inserted that.
and right above that you got this:
.leftLinkHD {
BORDER-RIGHT: #999999 1px solid; BORDER-TOP: #999999 1px solid; PADDING-LEFT: 12px; FONT-SIZE: 9px; BORDER-LEFT: #999999 1px solid; WIDTH: 100%; COLOR: #ffffff; BORDER-BOTTOM: #333333 1px solid; FONT-FAMILY: Arial, Helvetica, sans-serif; BACKGROUND-COLOR: #808080; TEXT-DECORATION: none
}
also missing ";".
and then, i worked.
-
Oct 21, 2003, 18:32 #5
- Join Date
- Apr 2003
- Location
- Bath, UK
- Posts
- 353
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
The missing ";" is not a problem if that is the last attribute in the style, however it is nad form to leave it out and does make it harder to maintain and add new attributes so you should put it in.
I notice that the main styles are set on the selector
Code:A.leftLink { ... }
Code:A.leftLink, A.leftLink:link { ... }
-
Oct 21, 2003, 23:53 #6
Thanks for the replies - though it does seem so far that it's a simple conflict that will be unresolved unless I'm able to modify the vB template CSS - and how it is applied - directly. I guess for the moment, underline it is.
Sincere thanks fot the replies, though.Internet Business Forums - free business help & advice
-
Oct 22, 2003, 03:11 #7
- Join Date
- Apr 2003
- Location
- Bath, UK
- Posts
- 353
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
You should have to settle for that, it is simply a matter of understanding how CSS prioritises the selectors and making sure it picks the one you want it too.
It was late last night but I will have another look at this now that I am awake and I have the cafine levels in my blood streem back to optimal levels
-
Oct 22, 2003, 03:25 #8
- Join Date
- Apr 2003
- Location
- Bath, UK
- Posts
- 353
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
OK I've looked, what I said was more or less right. In your styles replace
Code:A.leftLink { BACKGROUND-COLOR: #ffffff; BORDER-BOTTOM: #333333 1px solid; BORDER-LEFT: #ededed 1px solid; BORDER-RIGHT: #999999 1px solid; BORDER-TOP: #ededed 1px solid; display:block; COLOR: #000000; FONT-FAMILY: Arial, Helvetica, sans-serif; display:block; FONT-SIZE: 9px; PADDING-LEFT: 10px; TEXT-DECORATION: none; }
Code:A.leftLink, A.leftLink:link, A.leftLink:visited, A.leftLink:active { BACKGROUND-COLOR: #ffffff; BORDER-BOTTOM: #333333 1px solid; BORDER-LEFT: #ededed 1px solid; BORDER-RIGHT: #999999 1px solid; BORDER-TOP: #ededed 1px solid; display:block; COLOR: #000000; FONT-FAMILY: Arial, Helvetica, sans-serif; display:block; FONT-SIZE: 9px; PADDING-LEFT: 10px; TEXT-DECORATION: none; }
link, :visited, :active). My change just specifically implements those classes (making them the same as the normal link) so that the vB classes no longer take effect because there is a more specific class available (which is how CSS is meant to work).
Bookmarks