Hey

Have only just started learning CSS and HTML and have a problem with browser compatability with my website

My website is > http://www.datingwizard.com/Template

I work on a Mac and all seems to be fine on Firefox and Safari but on testing it on Internet Explorer i am coming up with display problems. It works in IE8 but in IE6 and IE7 the navigation on the left (div id = 'sidebar1 ') is disappearing. It seems to start loading up with the rest of the page but once it is all loaded it seems to disappear or somehow have been put beneath a white block?

Have spent a the last week trying to sort it out myself and look online but no luck. I have posted the whole CSS code at the bottom of this message. Any help much appreciated, will probably be something stupid on my part and apologise if this is in the wrong section.

Many thanks

Jon

CSS code:

body  {
    margin: 0;
    padding: 0;
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
    color: #2e2d30;
    min-width: 982px;
    max-width: 982px;
    margin: 5px auto;
    margin-top:0px;
    text-decoration:none;
}
#container { 
    background: #FFFFFF;
    text-align: left;
}
.bodymain #blogBanner {
margin:0;
padding:0;
position:relative;
left:267px;
top:-38px;
}  
.bodymain #sidebar1 {
    float:left;
    width: 167px;
    margin-left: 37px;
    margin-top: -16px;
    padding: 0;
    background-color: #FFF;
    text-align: left;
    color: #666;
    line-height:11px;
    display:inline;
}
.bodymain #logo {
    margin: 10px 0 10px 0
}
.bodymain #sidebottom {
    margin: 10px 0 0 0;
}
.bodymain #mainContent {
    margin: -14px 0 0 243px;
    padding: 0 0 0 2em;
    text-align: center;
    font-size: 12px; /* font size for spotlight text */
    width: 650px;
} 
.bodymain #MainImage {
position:absolute;
left:243px;
}
.bodymain #spotlight {
    margin-top: 13px;
    background-color: #f9f9f9;
    text-align:left;
}
.bodymain #headblock {
    margin-top: 13px;
    background-color: #f9f9f9;
}
.indent {
padding-left:27px;
padding-right:27px;
}
.indent2 {
padding-left:387px;
padding-right:27px;
}
.indent3 {
padding-left:27px;
}
.btn {
margin-left:12px;
}
/* Main Text*/
.bodymain #container #mainContent #mainContent2 div p {
    font-size: 13px; /* font size for body text */
    text-align: left;
}
/* Sidebar*/
.bodymain #sidebar1 p, .bodymain #sidebar1 a{
    margin-left: 1px;
    margin-right: 1px;
    font-size: 12px; /* font size for sidebar text */
}
/* Links*/
a:link {
    color: #2e2d30;
    text-decoration:none;
}
a:visited {
    color: #2e2d30;
    text-decoration:none;
}
a:hover {
    color: #ee0096;
}
/* Headers*/
.bodymain #container #mainContent p strong {
    font-weight: bold;
    font-size:20px; /* font size for page header text */
    color:#ee0096;
}
/* Link Headers*/
.head{
    font-size: 16px; /* font size for link headers text */
    font-weight: bold;
}
.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
    clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
}

http://welovecss.com/showthread.php?p=16064

Hi Chris,

Thanks for the reply you gave in that thread however since removing the position:absolute attribute instead of the sidebar overlapping the content on the right, the sidebar now does not show up in IE6 and 7...

Thanks

Jon

Yep, however you neglected to mention what had been tried so in the interests of getting the best answers ALL information is relevant and required.

Sorry about that, should have said, since my last post i have tidied up the html and ccs code again after finding many errors in the validation that i wasn't aware of, plus have taken out a lot of the div tags as i was advised that i used too many. After validating the site now i only get one error and one warning regarding line 35 -

<script type="text/javascript" src="http://www.google.com/cse/brand?form=cse-search-box&lang=en"></script>

Still having the same problem of the sidebar not displaying on IE6 and 7, despite everything else on the page displaying correctly and i the right position. Have posted the updated css code below.

Many thanks for the replies and further help appreciated

Thanks

Jon

body  {
	margin: 0;
	padding: 0;
	font-family: Arial, Helvetica, sans-serif;
	text-align: center;
	color: #2e2d30;
	min-width: 982px;
	max-width: 982px;
	margin: 5px auto;
	margin-top:0px;
	text-decoration:none;
	background-color: #2e2d30;
}
#container { 
	background: #FFFFFF;
	text-align: left;
}
.bodymain #blogBanner {
position:relative;
left:267px;
top:-38px;
}  
.bodymain #sidebar1 {
	float:left;
	width: 167px;
	margin-left: 37px;
	margin-top: -16px;
	text-align: left;
	color: #666;
	line-height:11px;
	display:inline;
	height:100%;
}
.bodymain #mainContent {
	margin: -14px 0 0 243px;
	padding: 0 0 0 32px;
	text-align: center;
	font-size: 12px; /* font size for spotlight text */
	width: 650px;
} 
.bodymain #spotlight {
	margin-top: 13px;
	background-color: #f9f9f9;
	text-align:left;
}
.bodymain #firstblock {
	margin-top: 13px;
	background-color: #f9f9f9;
}
img.logo {
	margin: 10px 0 10px 0
}
.subblock {
	margin-top: 13px;
	background-color: #f9f9f9;
}
.indent {
padding-left:27px;
padding-right:27px;
}
.indent2 {
padding-left:387px;
padding-right:27px;
}
.indent3 {
padding-left:27px;
}
.btn {
margin-left:12px;
}
/* Main Text*/
.bodymain #container #mainContent div p {
	font-size: 13px; /* font size for body text */
	text-align: left;
}
/* Sidebar*/
.bodymain #sidebar1 p, .bodymain #sidebar1 a{
	margin-left: 1px;
	margin-right: 1px;
	font-size: 12px; /* font size for sidebar text */
}
/* Links*/
a:link {
	color: #2e2d30;
	text-decoration:none;
}
a:visited {
	color: #2e2d30;
	text-decoration:none;
}
a:hover {
	color: #ee0096;
}
/* Headers*/
.bodymain #container #mainContent p strong {
	font-weight: bold;
	font-size:20px; /* font size for page header text */
	color:#ee0096;
}
/* Link Headers*/
.head{
	font-size: 16px; /* font size for link headers text */
	font-weight: bold;
}
.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
	clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;