Forum Moderators: open
If you had <img src=".." border=0/> instead of a button then that would work.
In Microsofts documentation "Both text and images can be included within an anchor" - it doesn't mention INPUT - same for W3C. So it seems Mozilla is doing something that breaks standards.
place this between your head tags:
<style type="text/css">
<!--a
{
text-decoration: none;
color: #000000;
cursor: default;
}
.button
{
width: 54px;
height: 24px;
background-color: #d4d0c8;
border-top: 1px solid #ffffff;
border-left: 1px solid #ffffff;
border-right: 1px solid #000000;
border-bottom: 1px solid #000000;
cursor: default;
}
.tableBorder
{
border-right: 1px solid #808080;
border-bottom: 1px solid #808080;
}
.buttonClick
{
width: 54px;
height: 24px;
background-color: #d4d0c8;
border: 1px solid #000000;
}
.tableClick
{
border-top: 1px solid #404040;
border-left: 1px solid #404040;
border-right: 1px solid #ffffff;
border-bottom: 1px solid #ffffff;
}
.cellClick
{
border-top: 1px solid #808080;
border-left: 1px solid #808080;
border-right: 1px solid #d4d0c8;
border-bottom: 1px solid #d4d0c8;
font-family: MS Sans Serif;
font-size: 14px;
color: #000000;
text-align: center;
vertical-align: middle;
}
.text
{
font-family: MS Sans Serif;
font-size: 14px;
color: #000000;
text-align: center;
vertical-align: middle;
}
//-->
</style>
<script language="javascript">
<!--
var ie = (document.all && document.getElementById);
var ns = (!document.all && document.getElementById);
function buttonDown()
{
if (ie)
{
document.all.button.className = "buttonClick";
document.all.tableID.className = "tableClick";
document.all.cellID.className = "cellClick";
}
if (ns)
{
document.getElementById("button").className = "buttonClick";
document.getElementById("tableID").className = "tableClick";
document.getElementById("cellID").className = "cellClick";
}
}
function buttonUp()
{
if (ie)
{
document.all.button.className = "button";
document.all.tableID.className = "tableBorder";
document.all.cellID.className = "text";
}
if (ns)
{
document.getElementById("button").className = "button";
document.getElementById("tableID").className = "tableBorder";
document.getElementById("cellID").className = "text";
}
}
//-->
</script>
then place this in your body where ever you'd like your button to be:
<div id="button" class="button" onMouseDown="buttonDown();" onMouseUp="buttonUp();">
<table id="tableID" width="100%" height="100%" border="0" cellpadding="0" cellspacing="0" class="tableBorder">
<tr>
<td id="cellID" class="text"><a href="http://www.here.com">Button</a></td>
</tr>
</table>
</div>
now depending on the text on your "button", you might have to change the width of the button. so you'd change the "width: 54px" in the "button" and "buttonClick" styles.
The following works without JavaScript, and is not nearly as lengthy:
In the <head> of the document:
<style type="text/css">
.button a {
border:2px outset;
background:#ccc;
color:#000;
text-decoration:none;
font-weight:bold;
padding:5px;
}
.button a:active {
border:2px inset;
}
</style>And then tag the links you want to be buttons like this:
<span class="button"><a href="MyWebLink.html">Click Me!</a></span>That should give you a pretty good start. You can also specify the font for the button, different button colors, border thickness, etc.
<form action="index.html"><input type="submit" value="index"></form>
