Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations TouchToneTommy on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Why does this CSS not work?

Status
Not open for further replies.
slakker

slakker

MIS
Jun 5, 2003
59
US
For some reason the regular links within my table are not using my a:link, a:visited, etc.. standard css code..

But links outside of the table cells are using the css..

It's like something is overwriting it, but I can't figure out what it is.. can someone take a look please?

=========================================================
<!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.01 Transitional//EN&quot;
&quot;<html>
<head>
<title>Untitled Document</title>
<style type=&quot;text/css&quot;>
<!--
body {
background-color: #D0D9D7;
}
body,td,th {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
}
a:link {
color: #333333;
text-decoration: none;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #0000FF;
}
a:visited {
color: #333333;
text-decoration: none;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #0000FF;
}
a:active {
color: #333333;
text-decoration: none;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #0000FF;
}
a:hover {
color: #333333;
text-decoration: none;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #FF0000;
}
-->
</style>
</head>

<body>
<p> </p>
<table width=&quot;80%&quot; style=&quot;border: 1px solid #000000&quot; align=&quot;center&quot; cellpadding=&quot;0&quot; cellspacing=&quot;3&quot;>
<tr>
<td><div align=&quot;center&quot;>banner</div></td>
</tr>
<tr>
<td bgcolor=&quot;#A0B1AD&quot;><div align=&quot;center&quot;><img src=&quot;spacer.gif&quot; width=&quot;1&quot; height=&quot;5&quot;></div></td>
</tr>
<tr>
<td><p align=&quot;center&quot;> </p>
<p align=&quot;center&quot;>contents</p>
<p align=&quot;center&quot;> </p></td>
</tr>
<tr>
<td bgcolor=&quot;#A0B1AD&quot;><div align=&quot;center&quot;><img src=&quot;/spacer.gif&quot; width=&quot;1&quot; height=&quot;1&quot;></div></td>
</tr>
<tr>
<td><div align=&quot;center&quot;>
<a href=&quot;index.html&quot;>Home</a> •
<a href=&quot;link1.htm&quot;>Link1</a> •
<a href=&quot;link1.htm&quot;>Link2</a> •
<a href=&quot;link1.htm&quot;>Link3</a> •
<a href=&quot;link1.htm&quot;>Link4</a></div>
</td>
</tr>
<tr>
<td bgcolor=&quot;#A0B1AD&quot;><img src=&quot;/spacer.gif&quot; width=&quot;1&quot; height=&quot;1&quot;></td>
</tr>
<tr>
<td><div align=&quot;center&quot;>Copyright ©2004</div></td>
</tr>
</table>
<p><a href=&quot;linklink.htm&quot;>sdfsdf</a></p>
<p> </p>
</body>
</html>
================================================
Thanks in advance!
 
Sort by date Sort by votes

slakker,

On the contrary - your links are using the CSS perfectly well.

The problem you have is that your TD (or DIV) isn't high enough for you to see the underline.

If you append a
Code: 
<br>
after the div that your A tags are enclosed in, you will see the underline.

Hope this helps,

Dan
 
Upvote 0 Downvote
Also note that you are ordering your pseudo classes wrong. Change the order to this to ensure total compatibility:

1. a:link
2. a:visited
3. a:hover
4. a:active

if they do not follow this order the effects might not always work.
 
Upvote 0 Downvote
i apologize, but with text-decoration:none, where will there be an underline? ty.
 
Upvote 0 Downvote
Thanks for the info BillyRay..
I've tried to fix the pieces you mentioned, but still the same thing is happening..

I re-ordered link pseudo classes and added:

<tr>
<td><div align=&quot;center&quot;><br>
<a href=&quot;link.htm&quot;>Link1</a> &#8226;
<a href=&quot;link.htm&quot;>Link2</a> &#8226;
<a href=&quot;link.htm&quot;>Link4</a> &#8226;
<a href=&quot;link.htm&quot;>Link5</a> &#8226;
<a href=&quot;link.htm&quot;>Link6</a></div>
</td>
</tr>
 
Upvote 0 Downvote
Put the <br> after the div, like so:
Code: 
<tr>
  <td><div align=&quot;center&quot;>
    <a href=&quot;link.htm&quot;>Link1</a> •
    <a href=&quot;link.htm&quot;>Link2</a> •
    <a href=&quot;link.htm&quot;>Link4</a> •
    <a href=&quot;link.htm&quot;>Link5</a> •
    <a href=&quot;link.htm&quot;>Link6</a></div>
    <br>
  </td>
</tr>

You may also be able to add some padding to the bottom of the div that holds the links instead of adding the <br>.

 
Upvote 0 Downvote
Thanks philote, that worked great..

Except I really don't want that space after the links..

Any way to get around this?

Thanks again
 
Upvote 0 Downvote
Like I said, try adding some padding to the bottom of the div:
Code: 
...
a:hover {
    color: #333333;
    text-decoration: none;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: #FF0000;
}
#links{padding-bottom: 2px;}
-->
</style>

...

<tr>
  <td><div align=&quot;center&quot; id=&quot;links&quot;>
    <a href=&quot;link.htm&quot;>Link1</a> •
    <a href=&quot;link.htm&quot;>Link2</a> •
    <a href=&quot;link.htm&quot;>Link4</a> •
    <a href=&quot;link.htm&quot;>Link5</a> •
    <a href=&quot;link.htm&quot;>Link6</a></div>
  </td>
</tr>

 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

bdwilcox
  • Locked
  • Question
More efficient / manageable way to code this HTA w/ VBScript?
Replies
0
Views
869
bdwilcox
bdwilcox
jizzer
  • Locked
  • Question
HTML/CSS Image map with multiple tool-tips
Replies
3
Views
2K
spamjim
spamjim
cae154
  • Locked
  • Question
Body of email not appearing in correct font on iPhone and iPad
Replies
1
Views
1K
spamjim
spamjim
Expoverse
  • Locked
  • Helpful tip
Solution to CSS Two Level Horizonal Menu 1
Replies
1
Views
933
pmonett
pmonett
lmcate
  • Locked
  • Question
From HTML Page open an MDB files on the server and work
Replies
0
Views
369
lmcate
lmcate

Part and Inventory Search

Sponsor

Back
Top