I really really need help with CSS & IE 6.

[codebeastmode]

I really need help, I have a client who likes the design I helped them with but its not compatible with IE6. I am posting some screenshots.

The site to the left is the IE6 browser shot, and the one to the right is IE7/8. I don't know what to do.

the site is: diamond nails and spa dot net

thanks!

**begin edit**

as you can see, the information underneath the black header does not appear in IE6. I have tried for hours doing this, I even added a "IF IE6" statement to load another CSS sheet but thats not working either!

thank you in advance for your help

**end edit**

[colweb]

When I open it in IE6 and look at it with the IE Developer Toolbar, it looks like the content is there, but off screen (to far to the left).
Could you post (or a part of) the css that is specific for IE6?

[toocoded]

I know your pain and though about what if they there was a firebug addon for explore - So i googled it and found Something Lite Firebug Lite.

Maybe it can help you. I just searched it out and havent tried it. But if it is anything like The firebug for firefox all you need to do is right click in the area on the page that troubles you and a code dialogue thing will pop out at the bottom of the screen, Hover your mouse over each block of code and it will highlight on the actual html page above.

Search for your problem areas, see where they are and try to ammend your code to make fixes.

Hope this Helps.

[colweb]

I know your pain and though about what if they there was a firebug addon for explore - So i googled it and found Something Lite Firebug Lite.

Maybe it can help you. I just searched it out and havent tried it. But if it is anything like The firebug for firefox all you need to do is right click in the area on the page that troubles you and a code dialogue thing will pop out at the bottom of the screen, Hover your mouse over each block of code and it will highlight on the actual html page above.

Search for your problem areas, see where they are and try to ammend your code to make fixes.

Hope this Helps.

If you read all the reply's first, you might have noticed my post. There is (many years already) a firebug like tool for IE, called IE Developer Toolbar, and comes from the Microsoft site.

[toocoded]

For some reason I missed your post, but thanks for the info about the IE developer toolbar-I really never heard of it before. I'll go check it out.

[colweb]

For some reason I missed your post, but thanks for the info about the IE developer toolbar-I really never heard of it before. I'll go check it out.

You can find it here: http://www.microsoft.com/downloads/details.aspx?familyid=E59C3964-672D-4511-BB3E-2D5E1DB91038&displaylang=en

[codebeastmode]

thank you so much, i am looking into it now

[codebeastmode]

Here is all the code

/* CSS Document */
body{

	background:#d9b672 url(../images/tile.jpg) 0 0 repeat;
	color:#333;
	font:12px/14px Tahoma, sans-serif;
}
div, p, ul, h2, h3, h4, img{padding:0px; margin:0px;}
ul{list-style-type:none;}

.clear {clear: both; margin: 0px}

/* CONTAINER */

#container{width:100%; clear:both; }

/* INCONTAINER */

#incontainer{width:695px; margin: 0 auto; position:relative;}

/* LEFT */

#left{width:12px; float:left;}

/* CENTER */

#center{width:675px; float:left; background:#f8f4e8;}

/* HEADER */

#header{height:98px; background:url(../images/b_top.jpg) 0 0 repeat-x; position:relative;}

#header ul{height:66px; position:absolute; top:12px; left:26px}
#header ul li{float:left;}

#header ul li.home a{width:96px; height:66px; display:block; background:url(../images/btn_home.gif) 0 0 no-repeat; text-indent:-20000px; margin-right:33px}
#header ul li.home a:hover{width:96px; height:66px; background:url(../images/btn_home_over.gif) 0 0 no-repeat;}

#header ul li.about a{width:71px; height:66px; display:block; background:url(../images/btn_about.gif) 0 0 no-repeat; text-indent:-20000px; margin-right:33px}
#header ul li.about a:hover{width:71px; height:66px; background:url(../images/btn_about_over.gif) 0 0 no-repeat;}

#header ul li.treatments a{width:90px; height:66px; display:block; background:url(../images/btn_treatments.gif) 0 0 no-repeat; text-indent:-20000px; margin-right:33px}
#header ul li.treatments a:hover{width:90px; height:66px; background:url(../images/btn_treatments_over.gif) 0 0 no-repeat;}

#header ul li.products a{width:76px; height:66px; display:block; background:url(../images/btn_products.gif) 0 0 no-repeat; text-indent:-20000px; margin-right:33px}
#header ul li.products a:hover{width:76px; height:66px; background:url(../images/btn_products_over.gif) 0 0 no-repeat;}

#header ul li.news a{width:48px; height:66px; display:block; background:url(../images/btn_news.gif) 0 0 no-repeat; text-indent:-20000px; margin-right:33px}
#header ul li.news a:hover{width:48px; height:66px; background:url(../images/btn_news_over.gif) 0 0 no-repeat;}

#header ul li.contacts a{width:73px; height:66px; display:block; background:url(../images/btn_contacts.gif) 0 0 no-repeat; text-indent:-20000px;}
#header ul li.contacts a:hover{width:73px; height:66px; background:url(../images/btn_contacts_over.gif) 0 0 no-repeat;}


/* MAINIMG */

#mainimg{height:191px; background:url(../images/b_mainimg.jpg) 0 0 no-repeat; position:relative; clear:both}
#logo{position:absolute; top:55px; left:187px}

/* CONTENT */

#content{position:relative; clear:both; padding-top:19px}

#content a{font:12px/14px Tahoma, sans-serif; color:#2a2c2d; font-weight:bold; text-decoration:none }
#content a:hover{color:#2a2c2d; border-bottom: #2a2c2d 1px dotted; text-decoration:none }

#content a.link2{font:12px/14px Tahoma, sans-serif; color:#6b6b6b; font-weight:normal; text-decoration:underline }
#content a.link2:hover{color:#fff; text-decoration:none; background:#9f978a; border:none}

#content p span.headline{font:12px/14px Trebuchet MS, sans-serif; color:#ab9a50; font-weight:bold;}

#content img{border:#e6e2d5 3px solid;}

#leftPan{width:189px; padding: 2px 39px 12px 22px; position:relative; float:left; display:inline;}

#services{margin-bottom:25px;}
#services h2{height:18px; background:url(../images/h_services.gif) 0 0 no-repeat; position:relative; clear:both; margin-bottom:18px}

#services li{
	background:url(../images/bullet.gif) 0 3px no-repeat;
	padding-left:21px;
	height:22px;
	font-size: 12px;
}
#services li a{font:12px/14px Tahoma, sans-serif; color:#584c3f; font-weight:normal; text-decoration:underline}
#services li a:hover{
	color:#e6e2d5;
	font-weight:normal;
	text-decoration:none;
	background:#584c3f;
	border:none;
	font-size: 12px;
}

#treatments{clear:both; margin-bottom:12px}
#treatments h2{height:18px; background:url(../images/h_treatments.gif) 0 0 no-repeat; position:relative; clear:both; margin-bottom:18px}
#treatments img{margin-bottom:12px}

#rightPan{width:425px; position:relative; float:left; overflow: hidden;}

#welcome{width:425px; height:145px; background:url(../images/b_welcome.jpg) 0 0 no-repeat; clear:both; position:relative; margin-bottom:25px}
#welcome h2{height:50px; background:url(../images/h_welcome.gif) 16px 5px no-repeat; position:relative; clear:both;}
#welcome p{
	width:230px;
	margin: 12px 0 0 27px;
	font-size: 12px;
}

#etiquette{width:400px; float:left; display:inline; margin-right:18px;}
#etiquette h2{height:18px; background:url(../images/h_etiquette.gif) 0 0 no-repeat; position:relative; clear:both; margin-bottom:18px}

#etiquette ul{margin-top:15px;}
#etiquette li{background:url(../images/bullet.gif) 0 3px no-repeat; padding-left:21px; height:22px}
#etiquette li a{font:12px/14px Tahoma, sans-serif; color:#584c3f; font-weight:normal; text-decoration:underline}
#etiquette li a:hover{color:#e6e2d5; font-weight:normal; text-decoration:none; background:#584c3f; border:none}

#etiquette1{width:190px; float:left; display:inline; margin-right:18px;}
#etiquette1 h2{height:18px; background:url(../images/h_presentation.gif) 0 0 no-repeat; position:relative; clear:both; margin-bottom:18px}

#etiquette1 ul{margin-top:15px;}
#etiquette1 li{background:url(../images/bullet.gif) 0 3px no-repeat; padding-left:21px; height:22px}
#etiquette1 li a{font:12px/14px Tahoma, sans-serif; color:#584c3f; font-weight:normal; text-decoration:underline}
#etiquette1 li a:hover{color:#e6e2d5; font-weight:normal; text-decoration:none; background:#584c3f; border:none}

#presentation{width:190px;float:left; display:inline}
#presentation h2{height:18px; background:url(../images/h_presentation.gif) 0 0 no-repeat; position:relative; clear:both; margin-bottom:18px}
#presentation img{margin-bottom:12px}

/* LINKS */

#links{position:relative; clear:both; height:46px; background:url(../images/b_links.jpg) 0 0 no-repeat;}

#links ul{height:22px; position:absolute; top:12px; left:19px}
#links ul li{float:left;}

#links ul li.packages a{width:208px; height:22px; display:block; background:url(../images/btn_packages.gif) 0 0 no-repeat; text-indent:-20000px; margin-right:43px}
#links ul li.him a{width:120px; height:22px; display:block; background:url(../images/btn_him.gif) 0 0 no-repeat; text-indent:-20000px; margin-right:40px}
#links ul li.featured a{width:217px; height:22px; display:block; background:url(../images/btn_featured.gif) 0 0 no-repeat; text-indent:-20000px;}

/* FOOTER */

#footer{position:relative; clear:both; height:90px; background:#241915;}
#footer p{padding: 30px 0 0 0; font:12px/16px Tahoma, Arial, Helvetica, sans-serif; font-weight:normal; text-align:center; color:#fff;}
#footer p a{font:12px/16px Tahoma, Arial, Helvetica, sans-serif; font-weight:normal; color:#fff; text-decoration:none; padding: 0 5px }
#footer p a:hover{
	border-bottom: #fff 1px dotted;
	text-decoration:none;
	background:#ab9a50;
	color: #000;
}

/* RIGHT */

#right{width:12px; float:left;}.cquinndesign {
	font-size: 9px;
	font-style: normal;
	line-height: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	color: #584C3E;
	
}
#container #incontainer #center #footer p {
	color: #241915;
}
#container #incontainer #center #footer p {
	color: #FFF;
}
#container #incontainer #center #content #rightPan #fuckyou table tr td {
	font-size: 16px;
}
#container #incontainer #center #content #rightPan #fuckyou table tr th {
	font-size: 18px;
	color: #B99A50;
}

[colweb]

I have save the page from Firefox on a windows computer to "d:\daniweb\Diamond.... "

Then I save your css as posted in your last post. Opened html-kit and combined the two. As accepted, in IE 6 nothing but trouble. After a closer look at the css I removed a lot of position:relative statements and surprise surprise it started to work in IE 6.

In the attached zip file you see index.html (a partial copy of your problem page) with rewritten css inside. You have to change the url's for the images but this page displays correctly in IE 6.