I am new to using CSS so any advice would be much appreciated. I have designed a new site and it all looks OK in IE7. The site has a border around the main content of the page. However, in Firefox and Opera 9.5 the border does not display around the page but sits on the first line. The site is www.elmdairy.co.uk
Regards
CSS border displays issues - IE7 &...
Make some changes to styling as follows:
#main_page {
width: 775px;
background: white;
border: 1px solid #1352c4;
margin-left: auto;
margin-right: auto;
height: 1%; /* so IE clears floats */
overflow: hidden; /* so Firefox and Opera clear floats */
}
#sidebar {
padding-top: 5px;
padding-left: 5px;
padding-bottom:5px;
width: 161px; /* made 1px wider to allow room for 161px wide flash */
height: 550px;
float: left;
}
#header {
width: 599px; /* reduced by 1px because of #sidebar width change */
height: 17px;
float:right;
text-align:right;
margin:5px;
font-size: 10px;
display: inline; /* prevents IE 6 doubled margin float bug */
}
#content {
width: 579px; /* reduced by 1px because of #sidebar width change */
padding:15px;
text-align:left;
float:right; /* changed direction of float */
background-color: #ffffff;
}
#footer {
height: 27px;
width: 775px;
font-size: 10px;
margin-top: 5px;
margin-left: auto;
margin-right: auto;
clear: both; /* added to clear floats */
}
#main_page {
width: 775px;
background: white;
border: 1px solid #1352c4;
margin-left: auto;
margin-right: auto;
height: 1%; /* so IE clears floats */
overflow: hidden; /* so Firefox and Opera clear floats */
}
#sidebar {
padding-top: 5px;
padding-left: 5px;
padding-bottom:5px;
width: 161px; /* made 1px wider to allow room for 161px wide flash */
height: 550px;
float: left;
}
#header {
width: 599px; /* reduced by 1px because of #sidebar width change */
height: 17px;
float:right;
text-align:right;
margin:5px;
font-size: 10px;
display: inline; /* prevents IE 6 doubled margin float bug */
}
#content {
width: 579px; /* reduced by 1px because of #sidebar width change */
padding:15px;
text-align:left;
float:right; /* changed direction of float */
background-color: #ffffff;
}
#footer {
height: 27px;
width: 775px;
font-size: 10px;
margin-top: 5px;
margin-left: auto;
margin-right: auto;
clear: both; /* added to clear floats */
}
Cary, you are fantastic. I have made the changes and all looks great. Cannot thank you enough, I clearly have lots to learn with CSS.
Regards
Regards
Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.