css button issues

[Chadi]

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.

http://aycu15.webshots.com/image/34014/2003091975778285933_th.jpg (http://allyoucanupload.webshots.com/v/2003091975778285933)

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.

http://aycu05.webshots.com/image/35884/2003081701256377069_th.jpg (http://allyoucanupload.webshots.com/v/2003081701256377069)

Please help.

The code used in the body for the button is


<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...




/* ------------------------- */
/* 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



<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


.style4 {
text-align: left;
}

[BLiZZaRD]

text-decoration: none;


If it is internal CSS then use:



a {text-decoration:none}


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

[Chadi]

This is literally how it looks


<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>

[BLiZZaRD]

Okay.. the code I posted goes in your CSS. ;)

[Chadi]

Yes I know, I did that already.

I was referring to the small underline on the left side of the button in firefox.

Sorry for confusion

[BLiZZaRD]

well, you can try putting the <a... all on one line... otherwise it may be somewhere else in the page.. do you have a link?

[Dragos]

something simpler : http://www.dynamicdrive.com/forums/showthread.php?t=34422&referrerid=21430