Keeping CSS out of a table

[Brightbelt]

Hello -
I'm on FP 2003 and I'm using a navigation table from Fireworks 8 that has
rollover images and exporting it into Frontpage etc. I'm using Frontpage
DWTs as well. My problem is that I have an external style sheet with hover
styles that I've applied to all my pages (to the DWT actually). Here's the
code:
a:link { font-family: Times New Roman; font-size: 12pt; color:
#0000FF;
text-decoration: none }
a:visited { font-family: Times New Roman; font-size: 12pt; color:
#0000FF;
text-decoration: none }
a:hover { font-family: Times New Roman; font-size: 12pt; color:
#000080;
background-color:#33CCCC }

Of course I should maybe complete that code with the a:active part there.
But the problem as you can guess is that the external CSS page is adding a
background color to my navigation table cells on a rollover, which I don't
want it to do.

I've tried creating a table class, say, named ".AudioTable" and setting that
background color to white. I've tried that on an external sheet and as a
single style for my template page, but neither seems to work.
If this necessitates creating an Id type style, I have no idea how to do
that. Any suggestions or help on the CSS needed for this would be much
appreciated. Many Thanks,...Frank

PS This looks so horrible, I can't publish it for public viewing.

 

[Stefan B Rusynko]

Create a pseudo link class for the links in your table and apply that class to the links in that table
(white can be any unique contextual style name you want)

a.white {color: white; text-decoration: none}
a.white:link {color: white; text-decoration: none}
a.white:visited {color: white; text-decoration: none}
a.white:hover {color: white; text-decoration: underline}
a.white:active {color: white; text-decoration: none}

And apply the class to the links in the table as
<a href="yourlink.htm" class="white">





| Hello -
| I'm on FP 2003 and I'm using a navigation table from Fireworks 8 that has
| rollover images and exporting it into Frontpage etc. I'm using Frontpage
| DWTs as well. My problem is that I have an external style sheet with hover
| styles that I've applied to all my pages (to the DWT actually). Here's the
| code:
| a:link { font-family: Times New Roman; font-size: 12pt; color:
| #0000FF;
| text-decoration: none }
| a:visited { font-family: Times New Roman; font-size: 12pt; color:
| #0000FF;
| text-decoration: none }
| a:hover { font-family: Times New Roman; font-size: 12pt; color:
| #000080;
| background-color:#33CCCC }
|
| Of course I should maybe complete that code with the a:active part there.
| But the problem as you can guess is that the external CSS page is adding a
| background color to my navigation table cells on a rollover, which I don't
| want it to do.
|
| I've tried creating a table class, say, named ".AudioTable" and setting that
| background color to white. I've tried that on an external sheet and as a
| single style for my template page, but neither seems to work.
| If this necessitates creating an Id type style, I have no idea how to do
| that. Any suggestions or help on the CSS needed for this would be much
| appreciated. Many Thanks,...Frank
|
| PS This looks so horrible, I can't publish it for public viewing.
|
|

 

[Murray]

Better, do it this way -

table.white a{color: white; text-decoration: none}
table.white a:hover {text-decoration: underline}

 

[Brightbelt]

Thanks guys, I'll try that. I had tried another way earlier with this:

table.AudioTable a {background: none; color: none; }

But this worked in Netscape and Mozilla and not in IE. I appreciate your
help. If you could - and I ask this because CSS can throw surprises, please
follow up on me and I'll let you know if your method(s) worked. Many
Thanks,...Frank

 

[Murray]

That will work in all browsers if you make it proper syntax! 8)

table.AudioTable a {background-image: none; background-color: transparent; }

 

[Brightbelt]

OK, Please help me - I'm almost there !! I've done what you've just
suggested will work in all browsers (with proper syntax) and it still won't
go in IE. Let me explain what I'm doing:

In the head, I'm doing
<style>
<!--
table.AudioTable a {background-image: none; background-color: transparent; }
-->
</style>
and I'm adding the class in the table tag in the body like this ... <table
class="AudioTable" color= etc etc

Is this the correct way to do it ? Apparently, I'm still doing something
wrong. Thanks for your help ! Frank Bright

 

[Murray]

Can you show me the whole table tag?

 

[Brightbelt]

Sorry - Thanks for replying. Here's the whole tag:
<table class="AudioTable" border="0" cellpadding="0" cellspacing="0"
width="145" id="table5">

Also would this preclude me from having to put the class in each link
separately ? (I hope so!) Many Thanks,...Frank

 

[Murray]

<sigh>Sorry - can you just post a link to the whole page, please? Sorry for
the tiny steps here.

 

[Brightbelt]

Hi Murray -
Is there a way to email the file to you personally ? I can even zip the
attached file if you need. The problem is that this relates to my main DWT
and once I publish this, it will change the whole site and the changes have
actually not yet been approved by the company for which I'm doing this site
(don't worry, I do have a backup). This is my one professional web account
(please don't laugh) .
But here's the link to the site as it is now,
www.westwindentertainment.com . For some reason, in the published version, I
did not have this problem. I think I did the navigation rollovers one at a
time and didn't export them all as one table as I'm trying to do now. To
picture my problem, note the background hover color that appears on the
small text-links at the bottom of the page and picture yourself seeing that
background color appear for a whole table cell behind a left column
navigation button when you roll over it and you'll see what I'm talking
about.
I hope this helps. Let me know and I'll email the file if you'd like.
Thanks for helping,..Frank Bright

 

[Murray]

Sure - send it to forums at domain, and replace domain with great hyphen web
hyphen sights dot com. Please send me any external CSS file, too.

 

[Murray]

Got the files.

Try this for your embedded stylesheet, and move it BELOW the other links -

<style>
<!--
table#table5.AudioTable td a {background-image: none; background-color:
transparent; }
-->
</style>

 

[Brightbelt]

Thanks Murray !!!! That fixed it ! Not to press you but could you explain
some of why that worked over the others so I can learn from this ? I see you
entered the table id in there ("#table5') and you went on to specifiy the
'td' parameter for the link as well. Apparently that made the difference.
Many Thanks for your help and for following through. I appreciate it.
....Frank Bright

 

[Murray]

By adding those selectors, I increased the 'specificity' of the rule. The
problem was that a simple class was not specific enough to override the
pseudo-class rule. So -

<table class="whatever"

was not able to prevent -

a:link

from inheriting into the cells.

This is according to the "Rule of Greater Specificity" on which the cascade
of CSS is based. By adding the table's id to the rule, and throwing in the
td for good measure, I was able to increase the rule's specificity so that
it was able to override the pseudo-class, e.g.,

table#table5.whatever td { ... }

 

[Brightbelt]

Thanks Murray ! I was begining to sense that myself. I had an alignment
problem yesterday in Mozilla, and went back in and added more specifics to
the code and viola, it fixed it. So I know what you're saying. Thanks !!
Frank Bright