I'm having some troubles with the footer of my website. In IE(7) I don't have got any problems with it, but when viewing in Opera the border arround my footer is all messed up. In Opera my border is collapsed up to a 2px line while the <p> tag should be inside it, have a look..
IE: how it should be
Opera: this is wrong
Here is my CSS file:
- Code: Select all
body{
background-color: #a0a0a0;
}
div#container{
margin: 0px 0px 0px -400px;
position:absolute;
left:50%;
overflow: hidden;
}
div#header{
width: 800px;
height: 250px;
border-width: 1px 1px 1px 1px;
border-style: solid;
border-color: #696969;
margin: 0px 0px 15px 0px;
}
div#main p{
clear: both;
margin: 15px 15px 15px 15px;
}
div#side{
float: left;
width: 200px;
border-width: 1px 1px 1px 1px;
border-style: solid;
border-color: #696969;
background-color: #bfbfbf;
margin: 0px 15px 0px 0px;
}
div#content {
float: left;
width: 583px;
border-width: 1px 1px 1px 1px;
border-style: solid;
border-color: #696969;
background-color: #bfbfbf;
}
div#footer p{
float: right;
margin: 10px 10px 10px 10px;
}
div#footer{
clear: both;
width: 800px;
border-width: 1px 1px 1px 1px;
border-style: solid;
border-color: #696969;
background-color: #bfbfbf;
}
Note also that in IE my footer is at an exact distance of 15px away from my content while in my CSS file there isn't a margin set in footer or content,,
Hope anyone can help me,,
