0

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;
}
2
Contributors
1
Reply
2
Views
5 Years
Discussion Span
Last Post by EvolutionFallen
0

I'm not having a problem in FF or Chrome. In IE I am getting a bunch of extra space above the Navigation. Is that what you mean?
It seems it's being caused by the empty <span id="top"></span>. Is that there for a reason? You shouldn't have two different elements with the same id on a page, so either the span should have id="top", or the div right after it should.

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.