DIV end up differently in FF vs. IE

[wolfadeus]

I have a problem that seems similar to the previous thread, but I don't understand the solution. I have a CSS layout that uses div to put three blocks into shape: one top-bar (#header) and two columns underneath (#topmenu for the left one, #content and body for the right one). The top-bar works fine, and so do the columns in IE.

In FF, however, the columns seem positioned with respect to the page, ignoring the top-bar. For example, the left column ends up partly "behind" the top-bar and the right column does the same, but also ends up being centered with respect to the entire page ignoring the position of the left column.

Please help! Thanks!

CSS:

body { background-color: #ffffff; }
td, p { font-family: verdana, arial; color: #606060; text-align: justify; text-decoration: none; font-size: 13px; line-height: 19px; margin-left: 60px; margin-right: 35px; vertical-align: top; }
img {border: 0px none; }

/* Links */
a { text-decoration:none; }
a:link, a:visited { color:#4C78B8; }
a:hover { color:#EC7812; }

/* Layout */
#topmenu {
display: table;
position: absolute;
align: left;
margin-bottom: 0px;
martin-top: 0px;
top: 0px;
margin-left: -385px;
left: 50%;
width: 200px;
height: 120px;
padding: 0px;
border: 0px;
background-color: #ffffff;
text-align: left;
font: 14px arial, sans-serif;
font-weight: bold;
line-height: 21px;
}
#topmenu h4 { display: none; }
#topmenu ul, #topmenu li { margin: 0px; padding: 5px; margin-top: 20px; margin-bottom: 10px; }

#header {
display: table;
position: absolute;
margin-bottom: 0px;
margin-top: 0px;
top: 0px;
margin-left: -400px;
left: 50%;
padding: 0px;
border: 0px;
}
#header img { border: 0px none; width: 800px; height: 120px; align: center; }
}

#content {
display: table;
position: absolute;
align: center;
margin-bottom: 0px;
margin-top: 0px;
top: 119px;
margin-left: -400px;
left: 50%;
width: 800px;
border: 0px;
background-color: #ffffff;
}

[wolfadeus]

Help! Anyone?

Thank you!

W.

[scriptmasterdel]

If you post the html code, i will try to help you as much as i can.

It's difficult trying to work with CSS without seeing the ouput in the broswer.

Thank you,

Del

[wolfadeus]

Thank you! HTML stickied, since too specific.

W.

[scriptmasterdel]

Pure and simple bug.

Take a look the line that contains the following:

#header img { border: 0px none; width: 800px; height: 120px; align: center; }
}

Note: the last curley brace is a mistake in the code (it has no matching brace), so everything underneath this is not read.

I hope this helps.

If i had a penny for everytime i did this, i would be a very very wealthy man ;-)

Good luck.

Del

[simonuk]

If i had a penny for everytime i did this, i would be a very very wealthy man ;-)

heh, you and me both :)

Simon.