[RESOLVED] Displaying differently in Firefox and I.E

[Welshsteve]

EDIT: Just so you know, this has now been resolved. Removed the overflow property and value and replaced with border: 1px dotted transparent;

---

Hi everyone. I've took on a website which was written in very messy table code. Trying to create the template from scratch using CSS and have come untuck already. Below is my CSS code for the bog standard template so far.


body
{
background: #000 url(images/tile_repeat.jpg) repeat;
}

#container
{
background-color: #fff;
color:#000;
font: 0.8em tahoma, sans-serif;
width: 780px;
margin: 10px auto;
}

#header
{
background-color: #000;
color: #fff;
height: 150px;
margin: 10px;
}

#content
{
margin:10px;
padding: 5px;
}

#footer
{
margin: 10px;
}
You'll notice the margins at the bottom and top are not working, even though they are all set to 10px.

Screenshots 1 and 2 show the differences between the browsers. IE looks ok but Firefox doesn't.

To get around it I was advised to add overflow:auto; to the #container rule, which I did.


#container
{
background-color: #fff;
color:#000;
font: 0.9em tahoma, sans-serif;
width: 780px;
margin: 10px auto;
overflow: auto;
}
However, although this has fixed the problem in Firefox, I.E has decided to show the scrollbars (screenshot3)

Can anyone help me get around this problem?