I'm struggling to align my header correctly. Despite getting close in Internet Explorer, it looks terrible in Firefox with the code below. I've scoured forums for solutions but the more I try to fix it, the worse it looks. All I want is for header.png to spread seamlessly across the page, followed by a centered header with formtop.png as background. Inside this header, I aim for logo.png to be at the bottom left and my fireworks menu table to be at the bottom right. In IE, everything aligns except for some spacing between the menu table and the bottom of the div. In Firefox, nothing lines up at all due to absolute and relative settings. Everything inside the header div ends up at the top left in Firefox. Adjusting the attributes just messes things up further in IE. Can anyone provide assistance or direct me to a beginner-friendly tutorial on how to effectively line up a header div that works well across most browsers?
</head>
<body style="text-align:center; margin:0; padding:0;">
<div style="width:100%; height:100px; background-image:url(header.png);position:relative;">
<div>
<div style="height:100%; width:100%; background-image:url(formtop.png); background-repeat:no-repeat; background-position:center; left:0; bottom:0; position: absolute;">
<div style="width:920px; position:relative;">
<div><img name="n12" src="logo.png" border="0" alt="" align="left"></div>
<div style="padding-top:10px; float:right; padding-right:30px; position:absolute; bottom:0;">
<table style="display: inline-table;" border="0" cellpadding="0" cellspacing="0" width="400">
<!-- fwtable fwsrc="Untitled" fwpage="Page 1" fwbase="navbar.png" fwstyle="Dreamweaver" fwdocid = "1979268284" fwnested="0" -->
<tr>
<td><img src="images/NavBar/spacer.gif" width="124" height="1" border="0" alt="" /></td>
<td><img src="images/NavBar/spacer.gif" width="139" height="1" border="0" alt="" /></td>
<td><img src="images/NavBar/spacer.gif" width="137" height="1" border="0" alt="" /></td>
<td><img src="images/NavBar/spacer.gif" width="1" height="1" border="0" alt="" /></td>
</tr>
<tr>
<td><img name="navbar_r1_c1_s1" src="images/NavBar/navbar_r1_c1_s1.png" width="124" height="50" border="0" id="navbar_r1_c1_s1" alt="" /></td>
<td><a href="javascript:;" onMouseOut="MM_swapImgRestore();" onMouseOver="MM_swapImage('navbar_r1_c2_s1','','images/NavBar/navbar_r1_c2_s2.png',1);"><img name="navbar_r1_c2_s1" src="images/NavBar/navbar_r1_c2_s1.png" width="139" height="50" border="0" id="navbar_r1_c2_s1" alt="" /></a></td>
<td><a href="javascript:;" onMouseOut="MM_swapImgRestore();" onMouseOver="MM_swapImage('navbar_r1_c3_s1','','images/NavBar/navbar_r1_c3_s3.png',1);"><img name="navbar_r1_c3_s1" src="images/NavBar/navbar_r1_c3_s1.png" width="137" height="50" border="0" id="navbar_r1_c3_s1" alt="" /></a></td>
<td><img src="images/NavBar/spacer.gif" width="1" height="50" border="0" alt="" /></td>
</tr>
</table>
</div>
<br/>
</div>
</div>
</div>
</div>
</div>
<div>