Question

I have a strange problem between two div’s , there is a space below the top div which only shows in IE8. Although I am using IE8 at home I don’t see it, but at other places I do.

Image in IE (red is the space that shouldn’t be there):

In firefox and every other browser it shows fine as shown below:

 <div id="top">

<form action="" onsubmit="">

    <table >

    <tr>

    <td>
    Name<input type="text" />
    </td>


    <td>
    Password<input type="password" />               
    </td>

    <td>

    </td>             

    </tr>


   </table>

   </form>

 </div>

  <div id="header">

    </div>


#top
{
    margin-right: auto;
    margin-left: auto;
    margin-top: 0px;
    background-color: #000000; 
    top: 0px;
    text-align: center;
    font-size: 16px;
}
#header
{   
    width: 100%;
    height: 100px;
    background-color: #336699;  
    margin: 0px;
    padding: 0px;
}

I have tried floating both div’s but I cannot seem to get it working.

Any advice? Thanks

Answer 1

Set the margin of all form elements to 0px:

form
{
    margin: 0px;
}