Table of buttons, IE / Firefox display issues

wheelbarrowsoun... posted this at 19:24 — 7th April 2009.

They have: 2 posts

Joined: Apr 2009

i'm having some problems with making some trendy button/links for my dads website.

I have put 8 buttons into a table.

for some reason the table of buttons/links works, and looks fine in IE, but firefox/safari there are large spaces in between each row - this is my problem.

Any ideas why? I've tried setting table heights, cell heights, but still not solved the problem.

the code is below..

any ideas?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; char$et=iso-8859-1">

<style type="text/css">

input.button
{
   font-size:10px;
   font-family:Verdana,sans-serif;
   text-align:left;
   color:#FFFFFF;
   width:200px;
   height:20px;
   background-color:#339999;
   border-top-style:solid;
   border-top-color:#339999;
   border-bottom-style:solid;
   border-bottom-color:#339999;
   border-left-style:solid;
   border-left-color:#339999;
   border-right-style:solid;
   border-right-color:#339999;
}

</style>

<script language="javascript">

function goLite(FRM,BTN)
{
   window.document.forms[FRM].elements[BTN].style.color = "#339999";
   window.document.forms[FRM].elements[BTN].style.backgroundColor = "#FFFFFF";
   window.document.forms[FRM].elements[BTN].style.borderTopColor = "#FFFFFF";
   window.document.forms[FRM].elements[BTN].style.borderBottomColor = "#FFFFFF";
   window.document.forms[FRM].elements[BTN].style.borderRightColor = "#FFFFFF";
}

function goDim(FRM,BTN)
{
   window.document.forms[FRM].elements[BTN].style.color = "#FFFFFF";
   window.document.forms[FRM].elements[BTN].style.backgroundColor = "#339999";
   window.document.forms[FRM].elements[BTN].style.borderTopColor = "#339999";
   window.document.forms[FRM].elements[BTN].style.borderBottomColor = "#339999";
   window.document.forms[FRM].elements[BTN].style.borderRightColor = "#339999";
}

</script>


</head>



<body>
<table border="0" cellpadding="0" cellspacing="1" id="header">
  <tr>
	<td rowspan="4" background="img/block.jpg"><img name="spacer" src="" width="2" height="2" alt=""></td>
	<td>
	  <form name="profile">
		<input type="button"
   			name="profile"
   			class="button"
   			value="Profile"
   			title="Profile"
			method="link"
			onClick="parent.location='profile.html'"
   			onMouseOver="goLite(this.form.name,this.name)"
   			onMouseOut="goDim(this.form.name,this.name)">
	  </form>
	</td>
	<td width="2" rowspan="4" background="img/block.jpg"><img name="spacer" src="" width="2" height="2" alt=""></td>
	<td>
	  <form name="applications">
		<input type="button"
   			name="applications"
   			class="button"
   			value="Applications"
   			title="Applications"
			method="link"
			onClick="parent.location='applications.html'"
   			onMouseOver="goLite(this.form.name,this.name)"
   			onMouseOut="goDim(this.form.name,this.name)">
	  </form>
	</td>
  </tr>
  <tr>
	<td>
	  <form name="products">
		<input type="button"
   			name="products"
   			class="button"
   			value="Products"
   			title="Products"
			method="link"
			onClick="parent.location='products.html'"
   			onMouseOver="goLite(this.form.name,this.name)"
   			onMouseOut="goDim(this.form.name,this.name)">
	  </form>
	</td>
	<td>
	  <form name="support">
		<input type="button"
   			name="support"
   			class="button"
   			value="Support"
   			title="Support"
			method="link"
			onClick="parent.location='support.html'"
   			onMouseOver="goLite(this.form.name,this.name)"
   			onMouseOut="goDim(this.form.name,this.name)">
	  </form>
	</td>
  </tr>
  <tr>
	<td>
	  <form name="projectmanagement">
		<input type="button"
   			name="projectmanagement"
   			class="button"
   			value="Project Management"
   			title="project management"
			method="link"
			onClick="parent.location='projectmanagement.html'"
   			onMouseOver="goLite(this.form.name,this.name)"
   			onMouseOut="goDim(this.form.name,this.name)">
	  </form>
	</td>
	<td>
	  <form name="legal">
		<input type="button"
   			name="legal"
   			class="button"
   			value="Legal"
   			title="Legal"
			method="link"
			onClick="parent.location='legal.html'"
   			onMouseOver="goLite(this.form.name,this.name)"
   			onMouseOut="goDim(this.form.name,this.name)">
	  </form>
	</td>
  </tr>
  <tr>
	<td>
	  <form name="employment">
		<input type="button"
   			name="employment"
   			class="button"
   			value="Employment"
   			title="Employment"
			method="link"
			onClick="parent.location='employment.html'"
   			onMouseOver="goLite(this.form.name,this.name)"
   			onMouseOut="goDim(this.form.name,this.name)">
	  </form>
	</td>
	<td>
	  <form name="home">
		<input type="button"
   			name="home"
   			class="button"
   			value="Home"
   			title="Home"
			method="link"
			onClick="parent.location='index.html'"
   			onMouseOver="goLite(this.form.name,this.name)"
   			onMouseOut="goDim(this.form.name,this.name)">
	  </form>
	</td>
  </tr>
</table>
</body>
</html>

decibel.places posted this at 19:37 — 7th April 2009.

He has: 1,494 posts

Joined: Jun 2008

by default many browsers render forms with vertical margins for certain doctypes

try adding this to your styles:

form {margin: 0}

(see attached)

wheelbarrowsoun... posted this at 19:46 — 7th April 2009.

They have: 2 posts

Joined: Apr 2009

thanks very much. I knew it had to be something very simple.

cheers.

decibel.places posted this at 04:58 — 8th April 2009.

He has: 1,494 posts

Joined: Jun 2008

I am unsure why you need all those individual forms... and I suspect that a form tag without an action and method will not validate...

I think you could get the same function and look with a few divs with standard href links dressed up with css for the normal state and hover, ditch the forms