css button issues

**Chadi** · 12-01-2007, 06:36 PM

I used this tutorial, http://www.filamentgroup.com/lab/buttonElement/

It works great but a minor problem.

See attached.

IE Problem:
The IE is showing underline link when hovered over, I do not want that. It does not show the underline in Firefox. It is also text left aligned too.

Firefox Problem:
It is showing this tiny underline to the left of the button when hovered over. I have no idea where its coming from. It does not show this in IE.

Please help.

The code used in the body for the button is

Code:

           <tr>
            <td style="width: 266px; height: 24px;" class="style4">&nbsp;</td>
            <td style="height: 24px;" colspan="2">
            <a href="server/dedicated.php">
            <button value="submit" class="submitBtn"><span>View Server Plans</span></button></a></td>
          </tr>

CSS code used...

Code:

/* ------------------------- */
/*     hover buttons       */
/* ------------------------- */

button { 
  border:0; 
  cursor:pointer; 
  font-weight:bold; 
  padding:0 20px 0 0; 
  text-align:center; 
}
button span { 
  position:relative; 
  display:block; 
  white-space:nowrap; 
  padding:0 0 0 20px; 
}

/*blue buttons*/
button.submitBtn { 
  background:url(../images/btn_blue_right.gif) right no-repeat; 
  font-size:1.3em; 
}
button.submitBtn span { 
  height:50px; 
  line-height:50px;
  background:url(../images/btn_blue_left.gif) left no-repeat;
  color:#fff; 
}
button.submitBtn:hover {
    background:url(../images/btn_blue_right_hover.gif) right no-repeat; 
}
button.submitBtn:hover span {
    background:url(../images/btn_blue_left_hover.gif) left no-repeat; 
}

The actual style area in header

Code:

<style type="text/css">
<!--
@import url("../styles/site.css");
@import url("../styles/2ndlevel.css");
@import url("../styles/style.css");
body { behavior: url(../scripts/csshover2.htc); }
#menuItemServices { background-image:url(../images/navigation/on_services.gif); }
-->
</style>
<!--[if IE]>
<style type="text/css">
button { margin-left: 0px; margin-right: 0px; padding-left: 0px; padding-right: 0px; }
</style>
<![endif]-->

style4 is

Code:

.style4 {
    text-align: left;
}

**BLiZZaRD** · 12-01-2007, 06:59 PM

Code:

text-decoration: none;

If it is internal CSS then use:

Code:

a {text-decoration:none}

As for the FX issue... make sure you have no whitespace between your anchor and your text.

**Chadi** · 12-01-2007, 07:04 PM

This is literally how it looks

Code:

          <tr>
            <td style="width: 266px; height: 24px;" class="style4">&nbsp;</td>
            <td style="height: 24px;" colspan="2">
			<a href="server/dedicated.php">
			<button value="submit" class="submitBtn"><span>View Server Plans</span></button></a></td>
          </tr>
          </table>
		<p>&nbsp;</p>