homepage Welcome to WebmasterWorld Guest from 54.211.235.255
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
Link styling issue
e1980




msg:4033197
 1:57 pm on Nov 28, 2009 (gmt 0)

Hello!
I have a classified table header which has a bg color as my page's links' color.
The issue starts when I mix them.
... I think it's best that you create two files ("123.htm" & "123.css") and see for yourself.

See? The table's left header is invisible because the colors are the same. I'd like to have this link white or something. How do I do that?

123.htm


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="123.css" rel="stylesheet" type="text/css" />
</head>

<body>
<p><a href="home.htm">some link!</a></p>
<table width="100%" border="1">
<tr>
<td class="some_table"><a href="link_url.htm">linking header</a></td>
<td class="some_table">header</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>content</td>
</tr>
</table>
</body>
</html>

123.css


@charset "utf-8";

a:link {
color: #FF6666;
}
a:visited {
color: #FF6666;
}
a:hover {
color: #00FF00;
}

td.some_table {
background-color: #FF6666;
}
/*td.some_table a:link { color: #FFFFFF; }<< has bad effect!
*/

 

D_Blackwell




msg:4033255
 5:10 pm on Nov 28, 2009 (gmt 0)

For me, the markup provided does not replicate the problem described - embedded or external (which should make no difference.

I'm guessing a typ0 somewhere.?

e1980




msg:4033397
 2:22 am on Nov 29, 2009 (gmt 0)

I've checked the posted code again (copy/paste into new files) and I think that the problem is reproduced correctly. I probably didn't explain it well.

When you load the page file "123.htm" there's a table with two columns/rows.
At the right column you got the "header" and the "content" words.
On the left column, if you point to it's left area at the header field (the higher row) you'll see a highlighted link (with the text of "linking header").
So far so good.

Now, you didn't see this text when the mouse cursor wasn't on it, because this CSS file ("123.css") sets a link's color to #FF6666, which is also the bg color of class "td.some_table".

I want to be able to set a special color (say white) to any link in a "td.some_table" row, which in my example is the higher row.

When I do something like this for example:

td.some_table a:link { color: #FFFFFF; }

The link does get to be white color (#FFFFFF), but, all the "a:hover" configuration gets lost, and another side effect is that this link has an underline which I don't want.

I hope it's clear now.

By the way thanks for taking the time to look into my problem, I appriciate it!

Eli.

D_Blackwell




msg:4033399
 2:41 am on Nov 29, 2009 (gmt 0)

Add:
td.some_table a:hover {
color: #0f0; text-decoration: none;
}

NOTE: In this instance, as declared. :link could cause problems in IE. You may need to go with:
td.some_table a {
color: #fff;
}

This wouldn't hurt you anyway because :link causes more troubles and complications that it solves anyway, IMO. Other opinions WILL vary.

IF you don't want {text-decoration: underline;} at all, then just say so in td.some_table a {

e1980




msg:4034110
 5:26 pm on Nov 30, 2009 (gmt 0)

Hi again,

I was hoping for a more cleaner solution because when I'll need to change something, I'll need to change it in few places, an hard a dirty way to work (:

I've tried to do
text-decoration: inherit;
but IE 7 doesn't seem to support it! Any way to achieve the same?

Anyway, your solution did work and I really thank you for it!

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved