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!
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!