text rollover css

Hi

I have this

<a href="javascript:;" class="rollroll" > Name </a>

and an attached stylesheet but it wont work

..rollroll
{
a:link color: blue; text-decoration: none;
a:active color: red; text-decoration: none;
a:visited color: blue; text-decoration: none;
a:hover color: green; text-decoration: underline;

}

I am using a table with 4 cells horizontal with a link in each.

can anyone advise me please

thanks

Frankie

Your CSS is completely wrong. It should be this -

a.rollroll:link, a.rollroll:visited, a:rollroll:active {
text-decoration:none; }
a.rollroll:link, a.rollroll:visited { color:blue; }
a.rollroll:active { color:red; }
a.rollroll:hover { color: green; text-decoration: underline; }


--
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs, Tutorials & Resources
==================


"tackle" <eee@ee.com> wrote in message
news:g9ts24$sap$1@forums.macromedia.com...
> Hi
>
> I have this
>
> <a href="javascript:;" class="rollroll" > Name </a>
>
> and an attached stylesheet but it wont work
>
> .rollroll
> {
> a:link color: blue; text-decoration: none;
> a:active color: red; text-decoration: none;
> a:visited color: blue; text-decoration: none;
> a:hover color: green; text-decoration: underline;
>
> }
>
> I am using a table with 4 cells horizontal with a link in each.
>
> can anyone advise me please
>
> thanks
>
> Frankie
>

Thank you for your assistance.

I cannot get this to work.

See I have a div called maincontent

#maincontent a:visited, #footer a:visited {
color: #033000;
text-decoration: underline;
}
#maincontent a:hover, #footer a:hover, {
color: #033000;
text-decoration: none;
}

a.rollroll:link, a.rollroll:visited, a:rollroll:active {
text-decoration:none; }
a.rollroll:link, a.rollroll:visited { color:blue; }
a.rollroll:active { color:red; }
a.rollroll:hover { color: green; text-decoration: underline; }


now inside this maincontent div is where I have a table with the 3 columns,

<div id="maincontent">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="200"><div class="rollroll"><a href="javascript:;" > Name
</a></div></td>
<td width="30"><div class="rollroll"><a
href="javascript:;">Ref.</a></div></td>
<td width="65"><div class="rollroll"><a
href="javascript:;">update</a></div></td>
</tr>
</table>
</div>


the rollroll css doent work on both ie and firefox

thanks

Frankie

See why it's critically important that you always include your code in such
queries?

"><div class="rollroll"><a href="javascript:;" > Name </a></div></td>

Your links cannot be specified with a.rollroll:link as the CSS selector,
since that selector would only find links with a class of rollroll (i.e., <a
class="rollroll"...). Instead you have links that are within a container
with a class of rollroll (i.e., <div class="rollroll"><a...). That would
require that the selector be like this -

..rollroll a:link

I am confused, though, by your CSS. If the HTML is how you show it, then
what is this supposed to do -

#maincontent a:visited, #footer a:visited {
color: #033000;
text-decoration: underline;
}
#maincontent a:hover, #footer a:hover, {
color: #033000;
text-decoration: none;
}

- since the only links you show within the div#maincontent are the ones
within the class rollroll?

--
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs, Tutorials & Resources
==================


"tackle" <eee@ee.com> wrote in message
news:g9tur3$1t3$1@forums.macromedia.com...
> Thank you for your assistance.
>
> I cannot get this to work.
>
> See I have a div called maincontent
>
> #maincontent a:visited, #footer a:visited {
> color: #033000;
> text-decoration: underline;
> }
> #maincontent a:hover, #footer a:hover, {
> color: #033000;
> text-decoration: none;
> }
>
> a.rollroll:link, a.rollroll:visited, a:rollroll:active {
> text-decoration:none; }
> a.rollroll:link, a.rollroll:visited { color:blue; }
> a.rollroll:active { color:red; }
> a.rollroll:hover { color: green; text-decoration: underline; }
>
>
> now inside this maincontent div is where I have a table with the 3
> columns,
>
> <div id="maincontent">
> <table width="100%" border="0" cellpadding="0" cellspacing="0">
> <tr>
> <td width="200"><div class="rollroll"><a href="javascript:;" > Name
> </a></div></td>
> <td width="30"><div class="rollroll"><a
> href="javascript:;">Ref.</a></div></td>
> <td width="65"><div class="rollroll"><a
> href="javascript:;">update</a></div></td>
> </tr>
> </table>
> </div>
>
>
> the rollroll css doent work on both ie and firefox
>
> thanks
>
> Frankie
>

Thank you

The div#maincontent is a larger area and I have the default roll set for
them ie

#maincontent a:visited, #footer a:visited {
color: #033000;
text-decoration: underline;
}
#maincontent a:hover, #footer a:hover, {
color: #033000;
text-decoration: none;
}


Now it is inside this larger area when I have a table and I want to change
or have different roll overs that I have the problems with.


I paste a complete page below and am most grateful for your advice

<%@LANGUAGE="VBSCRIPT" CODEPAGE="65001"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
<!--

#maincontent {width: 584px;}
#maincontent a:visited, a:link {
color: #033000;
text-decoration: underline;
}
#maincontent a:hover {
color: #990000;
text-decoration: none;
}

a.rollroll:link, a.rollroll:visited, a:rollroll:active {
text-decoration:none;
}
a.rollroll:link, a.rollroll:visited {
color:blue;
}
a.rollroll:active {
color:red;
}
a.rollroll:hover {
color: green;
text-decoration: underline;
}
-->
</style>
</head>
<body>
<div id="maincontent">
<p>This is the main content area</p>
<p>This is a link inside it <a href="javascript:;">Link</a> (it should go
red on rollover) this is the default roll for the many links inside the
maincontent div</p>
<p>But I also want to have one table with its own different rollovers like
the one below. What is really getting to me is that the roll over of the
links in the table below are gettting to be the same as the default links of
this maincontent div.</p>
<p>&nbsp;</p>
<p>I had thought by adding a class i could get precedence
</p>
<p> but this does not seem to be the case.</p>
<p>&nbsp;</p>
<table width="295" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="200"> <a href="javascript:;" class="rollroll"> Name
</a> </td>
<td width="30"><div class="rollroll"><a href="javascript:;"
class="rollroll">Ref.</a></div></td>
<td width="65"><div class="rollroll"><a href="javascript:;"
class="rollroll">update</a></div></td>
</tr>
</table>
<p>&nbsp;</p>
</div>
</body>
</html>

Your rollroll links do not have enough specificity 'oomph' to overrule the
#maincontent link styles. Try this CSS instead of what you have -

<style type="text/css">

#maincontent {width: 584px;}
#maincontent a:visited, a:link {
color: #033000;
text-decoration: underline;
}
#maincontent a:hover {
color: #990000;
text-decoration: none;
}

#maincontent a.rollroll:link, #maincontent a.rollroll:visited,#maincontent
a:rollroll:active {
text-decoration:none;
}
#maincontent a.rollroll:link, #maincontent a.rollroll:visited {
color:blue;
}
#maincontent a.rollroll:active {
color:red;
}
#maincontent a.rollroll:hover {
color: green;
text-decoration: underline;
}
</style>

By adding the "#maincontent" to the selctor for the interior links, I have
raised their specificity to the same level as your default link rules, and
since they come LATER in the stylesheet (i.e., closer to the element being
styled), they take precedence.

--
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs, Tutorials & Resources
==================


"tackle" <eee@ee.com> wrote in message
news:g9u1g1$4hn$1@forums.macromedia.com...
> Thank you
>
> The div#maincontent is a larger area and I have the default roll set for
> them ie
>
> #maincontent a:visited, #footer a:visited {
> color: #033000;
> text-decoration: underline;
> }
> #maincontent a:hover, #footer a:hover, {
> color: #033000;
> text-decoration: none;
> }
>
>
> Now it is inside this larger area when I have a table and I want to change
> or have different roll overs that I have the problems with.
>
>
> I paste a complete page below and am most grateful for your advice
>
> <%@LANGUAGE="VBSCRIPT" CODEPAGE="65001"%>
> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
> "http://www.w3.org/TR/html4/loose.dtd">
> <html>
> <head>
> <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
> <title>Untitled Document</title>
> <style type="text/css">
> <!--
>
> #maincontent {width: 584px;}
> #maincontent a:visited, a:link {
> color: #033000;
> text-decoration: underline;
> }
> #maincontent a:hover {
> color: #990000;
> text-decoration: none;
> }
>
> a.rollroll:link, a.rollroll:visited, a:rollroll:active {
> text-decoration:none;
> }
> a.rollroll:link, a.rollroll:visited {
> color:blue;
> }
> a.rollroll:active {
> color:red;
> }
> a.rollroll:hover {
> color: green;
> text-decoration: underline;
> }
> -->
> </style>
> </head>
> <body>
> <div id="maincontent">
> <p>This is the main content area</p>
> <p>This is a link inside it <a href="javascript:;">Link</a> (it should go
> red on rollover) this is the default roll for the many links inside the
> maincontent div</p>
> <p>But I also want to have one table with its own different rollovers
> like the one below. What is really getting to me is that the roll over of
> the links in the table below are gettting to be the same as the default
> links of this maincontent div.</p>
> <p>&nbsp;</p>
> <p>I had thought by adding a class i could get precedence
> </p>
> <p> but this does not seem to be the case.</p>
> <p>&nbsp;</p>
> <table width="295" border="0" cellpadding="0" cellspacing="0">
> <tr>
> <td width="200"> <a href="javascript:;" class="rollroll"> Name
> </a> </td>
> <td width="30"><div class="rollroll"><a href="javascript:;"
> class="rollroll">Ref.</a></div></td>
> <td width="65"><div class="rollroll"><a href="javascript:;"
> class="rollroll">update</a></div></td>
> </tr>
> </table>
> <p>&nbsp;</p>
> </div>
> </body>
> </html>
>
>
>
>
>
>

..oO(tackle)

>Thank you
>
>The div#maincontent is a larger area and I have the default roll set for
>them ie
>
>#maincontent a:visited, #footer a:visited {
> color: #033000;
> text-decoration: underline;
>}
>#maincontent a:hover, #footer a:hover, {
>color: #033000;
>text-decoration: none;
>}
>
>
>Now it is inside this larger area when I have a table and I want to change
>or have different roll overs that I have the problems with.
>
>[...]
> <p>But I also want to have one table with its own different rollovers like
>the one below. What is really getting to me is that the roll over of the
>links in the table below are gettting to be the same as the default links of
>this maincontent div.</p>
> <p>&nbsp;</p>
> <p>I had thought by adding a class i could get precedence
> </p>
> <p> but this does not seem to be the case.</p>
> <p>&nbsp;</p>
> <table width="295" border="0" cellpadding="0" cellspacing="0">
><tr>
> <td width="200"> <a href="javascript:;" class="rollroll"> Name
></a> </td>
> <td width="30"><div class="rollroll"><a href="javascript:;"
>class="rollroll">Ref.</a></div></td>
><td width="65"><div class="rollroll"><a href="javascript:;"
>class="rollroll">update</a></div></td>
></tr>
></table>

You should clean up this part a bit. You're using the 'rollroll' class
on the link one time and on the divs another time. This is inconsistent
and just makes things unnecessarily complicated. If all links in this
table are supposed to get the same styling, drop the divs and apply the
class just once directly to the table, that's it:

<table class="rollroll">
...
</table>

The next thing to keep an eye on is the specificity of your selectors.
Currently your link styles look like this:

#maincontent a:link {...} /* main part */
..rollroll a:link {...} /* the table */

Because of the ID the first one is much more specicific and will always
override the second one. To make this work as intended, you have to make
your table link styles more specific by also adding the ID there:

#maincontent .rollroll a:link {...}

HTH
Micha

Thank you very much, I have learned greatly from you.

Frankie

Thank you

You're welcome. Good luck!

--
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs, Tutorials & Resources
==================


"tackle" <eee@ee.com> wrote in message
news:ga0395$aiq$1@forums.macromedia.com...
> Thank you
>