[Solved] IE and Firefox read positioning differently

Thanks for reading them.

Oops - sorry!

Title

• First
• Second
• In English

Headline

text

BODY {background: #082811; margin: 0px; padding: 0px; text-align:center} #container {background-color: #ffffff; width: 800px; height: 470px; margin:0px auto; padding:0px; position: relative; text-align:left; top:50px}

#ylakuva {position: relative;
top:left;
margin:0px auto;
padding:0px}

#navigointi
{width: 120px;
white-space: nowrap;
font:11px verdana,arial,sans-serif;
margin:0px;
padding:0px;
position: absolute;
top:130px}

#navigointi ul {list-style: none;margin: 0px 10px 10px 10px;padding: 0px 0px 7px 0px;
border-bottom: 1px solid #D7E8C1;font-weight: bold;
text-align: center}

#navigointi ul li {display: inline;margin: 0px}

#navigointi li a {text-decoration: none;padding: 0px 8px 3px;
border-bottom: 4px solid #FFF;color: #999}

#navigointi a#current{border-color: #F60;color: #06F}

#navigointi li a:hover {border-color: #FFCC00;color: #666}

#navigointi li a {background: #FFFFFF; color: #082811;}

#teksti {position: absolute;
top: 80px;
left: 118px;
right: 118px}

#otsikko {position: absolute;
top: 120px;
left: 10px}

#leipateksti {position: absolute;
top: 160px;
left: 10px}

#osoite1 {position: absolute;
top: 175px;
left: 10px}

#osoite2 {position: absolute;
top: 175px;
left: 200px}

#osoite3 {position: absolute;
top: 120px;
left: 398px}

img {padding-left: 0px;
padding-bottom: 0px;
border: 0px;
margin:0px;}

h1 {font:20px verdana,arial,sans-serif}

p {font:12px verdana,arial,sans-serif; text-align:justify}

Fix up the doctype first, then see what happens in IE.

So the right doctype should be this?

Done, but the described difference still exists. However, it changed another minor detail better

Why bother with absolute positioning? Lose it all, it seems highly unnecessary.

I would be happy to loose it, but in IE there is otherwise too much difference between the image and the navigation bar. The distance in Firefox is perfect.

Is there some other solution that AP to reduce the distance in IE? Margins and paddings are already 0.

You shouldn't need any type of positioning, they should sit directly underneath each other anyway.

Give me a minute, I'll tweak your code.

In fact, if you could attach that main image, and any other necessary images, it would help.

Here is attached the only image of the page.

Ok, use this as a base:

h1 { background: #fff url(images/main_image.jpg) no-repeat; width: 800px; height: 127px; text-indent: -9999em; margin: 0; }

body {
background: #082811;
margin: 0px;
padding: 0px;
text-align:center
}

#container {
background-color: #ffffff;
width: 800px;
height: 470px;
margin:0px auto;
padding:0px;
position: relative;
text-align:left;
top:50px;
}

ul#navigointi {
font: 11px verdana, arial, sans-serif;
list-style: none;
margin: 0;
padding: 0;
border-bottom: 1px solid #D7E8C1;
font-weight: bold;
text-align: center;
overflow: auto;
}

ul#navigointi li {
margin: 0;
}

#navigointi li a {
float: left;
display: block;
text-decoration: none;
padding: 0px 8px 3px;
border-bottom: 4px solid #FFF;
background: pink;
color: #082811;
}

#navigointi a#current { border-color: #F60; color: #06F;}

#navigointi li a:hover {border-color: #FFCC00; color: #666;}

#otsikko {
background: grey;
}

#leipateksti {
background: pink;
}

h2 {font:20px verdana,arial,sans-serif}

p {font:12px verdana,arial,sans-serif; text-align:justify}

Title

Neuvosto

• First


• Second


• In English

This is a very interesting way to solve the problem. Thank you so much. You are great

You can style it to your needs now, I've just given you a better way of laying out the basic elements.

let us know if there's anything else we can help you with.