Welcome to WebmasterWorld Guest from 54.160.131.144

Forum Moderators: not2easy

Message Too Old, No Replies

Link styling issue

     

e1980

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

5+ Year Member



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

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

WebmasterWorld Senior Member 10+ Year Member



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

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

5+ Year Member



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

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

WebmasterWorld Senior Member 10+ Year Member



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

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

5+ Year Member



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!

 

Featured Threads

Hot Threads This Week

Hot Threads This Month