hover link problem

**biomike** · 12-27-2009, 03:05 PM

I have used the following CSS code to change the font from white to orange when i hover over it. But when i add a hyperlink with the specialaffects style i loose the white font. Any suggestions please.

Thanks

Michael

Code:

<!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=windows-1252">
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<title>header</title>
<style type="text/css">
td {
	vertical-align: top;
}
</style>
<style type="text/css">
.midaline {
vertical-align: middle;
}
</style>
<style type="text/css">
<!-- a:hover { font-family: Arial, Helvetica, sans-serif; font-size: 10pt; color: #ff6600} -->
</style>

<style><!--
a {text-decoration: none; }
--></style> 


                    
<style>
   a.specialeffects:hover {
  color: orange ;
}
</style>        


                    
</head>


<body>
<table style="border: 1px solid #000000" width="966" bgcolor="#47637A" height="39">
                  <tr>
                    <td width="720" height="35" td class="midaline" style="color: #FFFFFF">
                    <p style="margin-top: 0; margin-bottom: 0"><font face="Arial"><b> <a href="index.htm" class="specialeffects"> <font size="2" color="#FFFFFF"> home</font></a><font size="2" color="#FFFFFF" face="Arial">&nbsp;&nbsp;&nbsp;&nbsp;
                    <a class="specialeffects">about us</a>&nbsp;&nbsp;&nbsp;&nbsp;
                    </font><a class="specialeffects"><font size="2">treatment</font></a></b></font></font><font face="Arial"><b><font size="2" color="#FFFFFF" face="Arial">&nbsp;&nbsp;&nbsp;&nbsp;
                    <a class="specialeffects"> training</a>&nbsp;&nbsp;&nbsp;&nbsp; <a class="specialeffects"> research</a>&nbsp;&nbsp;&nbsp;&nbsp;
                      <a class="specialeffects"> media room</a>&nbsp;&nbsp;&nbsp; <a class="specialeffects">case&nbsp; histories</a>&nbsp;&nbsp;&nbsp;
                      <a class="specialeffects"> contact</a>&nbsp;&nbsp;&nbsp; <a class="specialeffects"> faq</a>&nbsp;&nbsp;<a class="specialeffects">
                    ...more</a>&nbsp;</font></b></font></font>
                    <td width="185" class="midaline" height="35"><!-- SiteSearch Google -->
                      <form method="GET" action="http://www.google.co.uk/search">
                        <font size="-1"><input type="hidden" name="sitesearch" value="http://www.bioenergyhealing.org.uk" checked></font><input type="hidden" name="ie" value="UTF-8"><input type="hidden" name="oe" value="UTF-8">
                        <div align="center">
                          <table bgcolor="#47637A">
                            <tr>
                              <td><font face="Arial" class="content"><input TYPE="text" name="q" size="18" maxlength="255" value="Search our website" style="font-size: 8pt; font-family: Arial">
                                <input type="submit" name="btnG" VALUE="Go" style="font-size: 8pt">
                                <font size="-1"><input type="hidden" name="domains" value="http://www.bioenergyhealing.org.uk"></font></font></td>
                            </tr>
                          </table>

**jscheuer1** · 12-27-2009, 04:05 PM

Your:

Code:

a.specialeffects:hover {
  color: orange;
}

Is really little different than your:

Code:

a:hover { font-family: Arial, Helvetica, sans-serif; font-size: 10pt; color: #ff6600}

So one or the other can be dropped. Link's with href's have default colors. If you want them different, you must specify. All of your styles can be combined in one section, and made more uniform in how they are expressed, so as to make for easier reading by humans. Replace all of your styles in the head with this:

Code:

<style type="text/css">
td {
  vertical-align: top;
}
.midaline {
  vertical-align: middle;
}
a:hover {
  font-family: arial, helvetica, sans-serif;
  font-size: 10pt;
  color: #f60;
}
a {
  text-decoration: none;
  color: #fff;
}
</style>

The one addition that takes care of your problem is highlighted. But you may also want to add:

Code:

a:visited {
  color: #fff;
}

**biomike** · 12-28-2009, 08:45 AM

Thanks for your suggestion but i should have stated the reason why i had the special affects is that i only want it to apply it to specific links on the page whereas the hover is for the rest of the page. Also the code you suggested doesn't turn the hyperlink from white to orange when you hover over it. It is staying white. However it does turn orange before i add the hyper link.

So in short i want to achieve the following.

general hyperlinks are a blue colour and when you hover are orange.

but specific hyperlinks in a cell are white and need to change to orange when you hover over them. this is why i have created the specialaffects.

your suggestions would be appreciated.

Thanks

Michael

**jscheuer1** · 12-28-2009, 02:00 PM

Try this out (the entire page has changed):

HTML Code:

<!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>header</title>
<style type="text/css">
td {
  vertical-align: top;
}

.midaline, .specialeffects {
  vertical-align: middle;
}
a:hover { /* this selector and its rules are perhaps not needed */
  font-family: arial, helvetica, sans-serif;
  font-size: 10pt;
}
.specialeffects a, .specialeffects a:active, .specialeffects a:visited {
  text-decoration: none;
  color: #fff;
  font: bold 10pt arial, helvetica, sans-serif;
}
.specialeffects a:hover {
  color: #f60;
}
.content input {
  font-family: arial, helvetica, sans-serif;
  font-size: 8pt;
}
</style>
</head>
<body>
  <form method="GET" action="http://www.google.co.uk/search">
    <table style="border:1px solid #000;background-color:#47637A;width:966px;height:39px;">
      <tr>
        <td class="specialeffects" width="720" height="35">
          <a href="index.htm"> home</a>&nbsp;&nbsp;&nbsp;&nbsp;
          <a href="#">about us</a>&nbsp;&nbsp;&nbsp;&nbsp;
          <a href="#">treatment</a>&nbsp;&nbsp;&nbsp;&nbsp;
          <a href="#"> training</a>&nbsp;&nbsp;&nbsp;&nbsp; <a href="#"> research</a>&nbsp;&nbsp;&nbsp;&nbsp;
          <a href="#"> media room</a>&nbsp;&nbsp;&nbsp; <a href="#">case&nbsp; histories</a>&nbsp;&nbsp;&nbsp;
          <a href="#"> contact</a>&nbsp;&nbsp;&nbsp; <a href="#"> faq</a>&nbsp;&nbsp;<a href="#"> ...more</a>&nbsp;
        </td>
        <td width="185" class="midaline" height="35"><!-- SiteSearch Google -->
          <input type="hidden" name="sitesearch" value="http://www.bioenergyhealing.org.uk">
          <input type="hidden" name="ie" value="UTF-8"><input type="hidden" name="oe" value="UTF-8">
            <div align="center">
              <table bgcolor="#47637A">
                <tr>
                  <td class="content">
                    <input type="text" name="q" size="18" maxlength="255" value="Search our website">
                    <input type="submit" name="btnG" VALUE="Go">
                    <input type="hidden" name="domains" value="http://www.bioenergyhealing.org.uk">
                  </td>
                </tr>
              </table>
            </div>
        </td>
      </tr>
    </table>
  </form>
</body>
</html>

**biomike** · 12-28-2009, 02:38 PM

Thanks for that. I had to do some extra modifications to the hover for the general hyperlinks on the page and the extra style code to remove the underlining. It all works now.

Code:

<style type="text/css">
td {
  vertical-align: top;
}

.midaline, .specialeffects {
  vertical-align: middle;
}
a:hover {
  color: #f60;
  font: bold 10pt arial, helvetica, sans-serif;
}
.specialeffects a, .specialeffects a:active, .specialeffects a:visited {
  text-decoration: none;
  color: #fff;
  font: bold 10pt arial, helvetica, sans-serif;
}
.specialeffects a:hover {
  
  color: #f60;
}
.content input {
  font-family: arial, helvetica, sans-serif;
  font-size: 8pt;
}


</style>
<style><!--
a {text-decoration: none; }
--></style>

Thread: hover link problem

Thread Tools

Search Thread

hover link problem

Bookmarks

Bookmarks

Posting Permissions