CSS border displays issues - IE7 &...

User 147010 Photo


Registered User
32 posts

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
User 463058 Photo


Ambassador
1,073 posts

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 */
}
User 147010 Photo


Registered User
32 posts

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

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.