Hi,
I have content in a container, which shows up with more top padding between the two in FF than what appears when it's viewed in IE/Safari/Chrome. From my internet searching I'm going to guess FF is right while the other browsers are wrong, but I've tried all the browser compatibility fixes I can find and nothing works.
I'm far from pro so hopefully this issue is easily fixable? Here is a basic version of the coding:
<body>
<span id="top"></span>
<div id="top" style="position: fixed;"><table cellpadding="0" cellspacing="0" ><tr>
<td width="274" valign="top" style="border-top: 0px dashed #666666; color: #594132; border-left: 20px solid #FFFFFF;">
<a href="#0" class="top"><img src="hd.jpg" class="border-bottom"></a>
<p />
<h1>NAVIGATION</h1>
<b>Subheading</b>
<BR /><a href="#1" class="top">Link 1</a>
<BR /><a href="#2" class="top">Link 2</a>
<BR /><a href="#3" class="top">Link 3</a>
<BR /><a href="#4" class="top">Link 4</a>
</td>
</tr></table></div>
<div id="content">
<a name="0"><div id="box">
<table>
<tr>
<td width="264px" valign="top" style="border-right: 20px solid #ffffff";>
</td>
<td>
<img src="img.jpg" class="rs">
<img src="img.jpg" class="rs">
<BR /><img src="img.jpg" class="rs">
<img src="img.jpg" class="rs">
</td>
</tr>
</table>
</div>
</a>
<a name="1"><div id="box">
<table>
<tr>
<td width="264px" valign="top" style="border-right: 20px solid #ffffff";>
<h1>HEADING ONE</h1>
Text
</td>
<td>
<img src="img.jpg" class="rs">
<img src="img.jpg" class="rs">
<BR /><img src="img.jpg" class="rs">
<img src="img.jpg" class="rs">
</td>
</tr>
</table>
</div>
</a>
<a name="2"><div id="box">
<table>
<tr>
<td width="264px" valign="top" style="border-right: 20px solid #ffffff";>
<h1>HEADING TWO</h1>
Text
</td>
<td>
<img src="img.jpg" class="rs">
<img src="img.jpg" class="rs">
<BR /><img src="img.jpg" class="rs">
<img src="img.jpg" class="rs">
</td>
</tr>
</table>
</div>
</a>
<a name="3"><div id="box">
<table>
<tr>
<td width="264px" valign="top" style="border-right: 20px solid #ffffff";>
<h1>HEADING THREE</h1>
Text
</td>
<td>
<img src="img.jpg" class="rs">
<img src="img.jpg" class="rs">
<BR /><img src="img.jpg" class="rs">
<img src="img.jpg" class="rs">
</td>
</tr>
</table>
</div>
</a>
<a name="4"><div id="box">
<table>
<tr>
<td width="264px" valign="top" style="border-right: 20px solid #ffffff";>
<h1>HEADING FOUR</h1>
Text
</td>
<td>
<img src="img.jpg" class="rs">
<img src="img.jpg" class="rs">
<BR /><img src="img.jpg" class="rs">
<img src="img.jpg" class="rs">
</td>
</tr>
</table>
</div>
</a>
</div>
</body>
And the CSS:
* {
margin:0;
padding:0;
border:none;
}
html, body, div, table {
font-family: tahoma;
font-size: 8pt;
line-height: 16pt;
color: #424242;
letter-spacing: 0px;
background: #FFFFFF;
-moz-box-sizing: content-box;
box-sizing: content-box;
}
h1 {
font-family: tahoma;
color: #000000;
text-transform: uppercase;
font-size: 8pt;
letter-spacing: 3px;
text-align: left;
font-weight: bold;
line-height: 16pt;
}
#box {
width: 100%;
height: 100%;
padding: 128px 0px 0px 245px;
border: none;
margin: 0 auto;
overflow: hidden;
}
#content {
top: 0px;
left: 30px;
width: 1260px;
height: 790px;
background: #fff;
margin: 0 auto;
border: none;
overflow: hidden;
text-align: justify;
}
#top{
top: 55px;
left: 0px;
width: 247px;
height: 100%;
background: #FFFFFF;
color: #000000;
}
a.top:link, a.top:active, a.top:visited {
font-family: tahoma;
text-transform: none;
font-size: 8pt;
font-weight: normal;
color: #4A4A4A;
}
a.top:hover {
color: #000000;
}
.rs {
border: 1px solid #F3F3F3;
background: #FFFFFF;
padding: 3px;
margin: 3px;
width: 340px;
height: 213px;
}