Hi
your code is a mixture of tables and divs and the layout is all wrong. plus you have a css external style sheet but still some css on each page for future updates and design overhauls of the site you would be best served taking the time to make this all neat now.
In the mean time I seem to have solved your problem:
First of all on the css sheet you didn't even have a bannertop div id so get rid of the class bannertop and replace it with this:
#bannertop {
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
position:absolute;
top:0;
left:0;
padding:13px 0 0 71px;
width:428px; height:77px; z-index:2;
margin:0;
}
next, you need to define padding and margins on header classes as in my experience they have default so for your h1.promotional change it to this:
h1 { font-size: 1.4em;padding:0;margin:0;
}
On your markup your header div wasn't even at the top of the page - move the div "bannertop" to immediately below the <body> tag and make it read like this:
<div id="bannertop">
<h1>
Sunbase Promotional Agency</h1>
</div>
The table that is behind this holding the blue line is way down the code - you were using 2
</p> tages to make the space which is probably why it was different in firefox and IE - instead use the spacer gif you're using in the blue bar so that the code for the table looks like this:
<table width="800" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="100%" height="20" valign="top">[img]images/images.gif[/img]</td>
<td width="1"></td>
</tr>
<tr>
<td height="7" valign="top" bgcolor="#3399CC">[img]images/images.gif[/img]</td>
<td></td>
</tr>
<tr>
<td height="100" valign="top">
</p>
</p></td>
<td></td>
</tr>
<tr>
<td height="1"></td>
<td>[img]images/images.gif[/img]</td>
</tr>
</table>
This should make the header sit the same in FF and IE - BUT really you need to neaten up your code - without any styling your layout would not read as you want it to and this is what it should do.
I hope this helps somewhat :-)
IE & FF Positioning me Crazy...!
Linear Mode
