Works in Opera but not IE

liunx

Guest
Hello.

I thought I was finished with my webpage and everything looked nice. I was using opera as preview browser. But when I tested it in IE #center and #bottom was misplaced.

Can anyone please help.
Here's the site: <!-- m --><a class="postlink" href="http://www.stibra.com">http://www.stibra.com</a><!-- m -->

This is my css document:

body {
font-family:verdana, sans-serif;
font-size:12px;
background: #FF0000;
color: #333333;
margin: 60px;
border:0;
}

#main {
border: 1px solid #000000;
background: #FFFFFF;
color: #333333;
height:585px;
width: 835px;
margin: 10px auto;
}

#header {
background: #00FFFF;
color: #333333;
margin-top: 0px;
left: 0px;
top: 0px;
position: relative;
height: 99px;
width: 835px;
}

#left {
background: #99FF66;
color: #333333;
left: 0px;
top: 0px;
height: 486px;
width: 142px;
margin: 0px;
float: left;

}
#right {
background: #0033CC;
color: #333333;
height: 486px;
width: 142px;
right: 0px;
margin: 0px;
top: 0px;
float: right;





}
#bottom {
background: #CCFF66;
color: #333333;
height: 35px;
width: 551px;
margin-left: 142px;
margin-bottom: 35px;
bottom: 35px;
position: relative;









}
#center {
background: #FF00FF;
color: #333333;
height: 451px;
width: 551px;
position: relative;
bottom: 0px;
margin-bottom: 35px;
margin-left: 142px;

}Ive changed your stylesheet a little bit, you used relative positioning instead of absolute.

Heres what ive changed it too:

body {
font-family:verdana, sans-serif;
font-size:12px;
background: #FF0000;
color: #333333;
margin: 60px;
border:0;
}
#main {
border: 1px solid #000000;
background: #FFFFFF;
color: #333333;
height:585px;
width: 835px;
position: absolute;
top: 60px;
left: 60px;
}
#header {
background: #00FFFF;
color: #333333;
left: 60px;
top: 60px;
position: absolute;
height: 99px;
width: 835px;
}
#left {
background: #99FF66;
color: #333333;
left: 60px;
top: 159px;
height: 486px;
width: 142px;
margin: 0px;
position: absolute;
}
#right {
background: #0033CC;
color: #333333;
height: 486px;
width: 142px;
margin: 0px;
top: 159px;
left: 753px;
position: absolute;
}
#bottom {
background: #CCFF66;
color: #333333;
height: 35px;
width: 551px;
position: absolute;
left: 202px;
top: 610px;
}
#center {
background: #FF00FF;
color: #333333;
height: 451px;
width: 551px;
position: absolute;
bottom: 0px;
top: 159px;
left: 202px;
}

Hope this helps!!html and css changedThank you very much. I think everyting works now

<!-- m --><a class="postlink" href="http://www.stibra.comIf">http://www.stibra.comIf</a><!-- m --> you click on the link called Grovspesifikasjon( right) the #bottom is pushed down some pixels when I use Opera but not IE. Does anyone know why?



Problem Solved!
 
Back
Top