IE hates my CSS file so much I get no content! - css

Question

My web site seems to be working fine with every other broser but IE8, IE9 and compatibility mode!!
As soon as I disable my CSS, I see content, but when its switched back on I get nothing!
This is giving my hell.
This is my CSS here:
body {
background: center top url(./images/background.jpg) no-repeat;
background-color: #FFF;
margin: 0px;
}
body,td,th {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: bold;
color: #8e8f91;
}
h1 {
font-size: 12px;
color: #FFFFFF;
text-transform: uppercase;
line-height: normal;
margin: 0;
padding: 0;
letter-spacing: 1px;
}
#Table_01 {
top:0px;
width:1200px;
margin: 0 auto;
}
.backing {
background: repeat transparent url(./images/backing.png);
padding: 4px;
margin-left: 4px;
margin-top: 443px;
width: 130px;
text-transform: uppercase;
color: #FFF;
font-size: 11px;
letter-spacing: 1px;
}
.backing a, a:active {
text-decoration: none;
color: #FFFFFF;
}
.backing a:hover {
text-decoration: underline;
color: #FFFFFF;
}
.snipet {
background: repeat transparent url(./images/backing.png);
padding: 4px;
margin: 4px;
width: 100px;
text-transform: uppercase;
color: #FFF;
font-size: 11px;
letter-spacing: 1px;
}
.snipet_text {
font-size: 12px;
font-style: italic;
font-weight: normal;
letter-spacing: 0px;
line-height: 18px;
}
.snipet_container {
margin: 10px;
}
a, a:active {
text-decoration: underline;
color: #8e8f91;
}
a:hover {
text-decoration: none;
}
a img {
border:none;
}
.clear {
clear:both;
}
ul.menu {
list-style:none;
margin: 0;
padding: 0;
}
ul.menu li {
width:auto;
height:29px;
margin-left: 1px;
}
ul.menu li a {
display:block;
position:relative;
}
ul.menu li a img {
position:absolute;
z-index:1;
}
ul.menu li span {
display:block;
height: 29px;
width: auto;
position:absolute;
z-index:2;
}
/* TABLES */
div.index-1_ {
position:absolute;
left:0px;
top:0px;
width:1200px;
height:17px;
}
div.index-2_ {
position:absolute;
left:0px;
top:22px;
width:33px;
height:675px;
}
div.index-3_ {
position:absolute;
left:33px;
top:22px;
width:208px;
height:221px;
}
div.index-4_ {
position:absolute;
left:241px;
top:22px;
width:12px;
height:675px;
}
div.index-5_ {
position:absolute;
left:254px;
top:22px;
width:82px;
height:29px;
}
div.index-6_ {
position:absolute;
left:335px;
top:22px;
width:10px;
height:43px;
}
div.index-7_ {
position:absolute;
left:346px;
top:22px;
width:102px;
height:29px;
}
div.index-8_ {
position:absolute;
left:447px;
top:22px;
width:11px;
height:43px;
}
div.index-9_ {
position:absolute;
left:459px;
top:22px;
width:77px;
height:29px;
}
div.index-10_ {
position:absolute;
left:535px;
top:22px;
width:10px;
height:43px;
}
div.index-11_ {
position:absolute;
left:546px;
top:22px;
width:87px;
height:29px;
}
div.index-12_ {
position:absolute;
left:632px;
top:22px;
width:10px;
height:43px;
}
div.index-13_ {
position:absolute;
left:643px;
top:22px;
width:73px;
height:29px;
}
div.index-14_ {
position:absolute;
left:715px;
top:22px;
width:485px;
height:43px;
}
div.index-15_ {
position:absolute;
left:253px;
top:46px;
width:82px;
height:14px;
}
div.index-16_ {
position:absolute;
left:345px;
top:46px;
width:102px;
height:14px;
}
div.index-17_ {
position:absolute;
left:458px;
top:46px;
width:77px;
height:14px;
}
div.index-18_ {
position:absolute;
left:545px;
top:46px;
width:87px;
height:14px;
}
div.index-19_ {
position:absolute;
left:642px;
top:46px;
width:73px;
height:14px;
}
div.index-20_ {
position:absolute;
left:253px;
top:60px;
width:1px;
height:481px;
}
div.index-21_ {
position:absolute;
left:254px;
top:60px;
width:249px;
height:470px;
background-image: url(./images/projects/HomeProject001.jpg);
}
div.index-22_ {
position:absolute;
left:503px;
top:60px;
width:618px;
height:442px;
background-color: #CBCBCB;
}
div.index-23_ {
position:absolute;
left:1121px;
top:60px;
width:79px;
height:632px;
}
div.index-24_ {
position:absolute;
left:33px;
top:238px;
width:208px;
height:67px;
}
div.index-25_ {
position:absolute;
left:503px;
top:502px;
width:606px;
height:16px;
background-image: url(./images/index-25.png);
padding:6px;
}
div.index-26_ {
position:absolute;
left:254px;
top:530px;
width:867px;
height:11px;
}
div.index-27_ {
position:absolute;
left:253px;
top:541px;
width:619px;
height:151px;
background-color: #FFF;
}
div.index-28_ {
position:absolute;
left:872px;
top:541px;
width:249px;
height:151px;
background-image: url(./images/index-28.png);
}
/* sliding panel */
/***** clearfix *****/
.clear {clear: both;height: 0;line-height: 0;}
.clearfix:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
.clearfix {height: 1%;}
.clearfix {display: block;}
#toppanel {
position: absolute; /*Panel will overlap content */
/*position: relative;*/ /*Panel will "push" the content down */
top: 0;
left: 0;
width: 100%;
z-index: 999;
text-align: center;
margin-left: auto;
margin-right: auto;
font-size: 130%; /* font-size set to 130% for the default Kubrick Wordpress theme */
}
#panel {
width: 100%;
height: 280px;
color: #333;
background: transparent url(images/tab_bk.png) repeat;
overflow: hidden;
position: relative;
z-index: 3;
display: none;
}
#panel h1 {
font-size: 1.6em;
padding: 5px 0 10px;
margin: 0;
color: #15ADFF;
text-align: left;
}
#panel h2{
font-size: 1.2em;
padding: 10px 0 5px;
margin: 0;
color: #e01000;
text-align: left;
}
#panel p {
margin: 5px 0;
padding: 0;
}
#panel a {
text-decoration: underline;
color: #333;
}
#panel a:hover {
color: #666;
}
#panel a-lost-pwd {
display: block;
float: left;
}
#panel ul {
margin: 0 0 5px 0;
padding: 0;
line-height: 1.6em;
list-style: none;
}
#panel .content {
width: 960px;
margin: 0 auto;
padding-top: 15px;
text-align: left;
font-size: 0.85em;
}
#panel .content .left {
width: 280px;
float: left;
margin-bottom: 25px;
padding: 0 15px;
min-height: 220px;
}
#panel .content .border {
border-left: 1px solid #333;
}
#panel .content .narrow {
width:1000px !important;
}
#panel .content form {
margin: 0 0 10px 0;
}
#panel .content label {
padding-top: 8px;
clear: both;
width: 280px;
display: block;
}
#panel .content input.field {
border: 1px #1A1A1A solid;
background-color: #efefef;
margin-right: 5px;
margin-top: 4px;
width: 300px;
color: white;
height: 16px;
}
#panel .content input:focus.field {
background: #ccc;
}
#panel .content .ui-state-highlight .ui-icon {background-image: url(./images/icon_sprite.png); width: 16px; height: 16px; margin-top: -2px;}
#panel .content .ui-state-error .ui-icon, #panel .content .ui-state-error-text .ui-icon { background: url(./images/icon_sprite.png) -16px 0 no-repeat !important; width: 16px; height: 16px; margin-top: -2px;}
#panel .content .ui-state-highlight { border: 1px solid #d2dbf4; background: #f4f8fd; color: #0d2054; }
#panel .content .ui-state-error { border: 1px solid #e2d0d0; background: #fcf0f0; color: #280b0b;}
/* BUTTONS */
#panel .content .ui-button {
outline: none;
color: #1c4257;
border-color: #7096ab;
display: block;
font-size: 14px;
font-weight: bold;
border: thin solid;
margin-top: 20px;
padding: 4px 20px 4px 20px;
}
#panel .content .ui-button:hover {
background: #fbc900;
}
/* Panel Tab/button */
.tab {
height: 25px;
position: relative;
top: 0;
z-index: 999;
}
.tab ul.login {
display: block;
position: relative;
float: right;
clear: right;
width: auto;
font-weight: bold;
line-height: 25px;
margin: 0;
right: 150px;
color: white;
font-size: 80%;
text-align: center;
}
.tab ul.login li.left {
background: url(images/tab_l.png) no-repeat left 0;
height: 25px;
width: 30px;
padding: 0;
margin: 0;
display: block;
float: left;
}
.tab ul.login li.right {
background: url(images/tab_r.png) no-repeat left 0;
height: 25px;
width: 30px;
padding: 0;
margin: 0;
display: block;
float: left;
}
.tab ul.login li {
text-align: left;
padding: 0 6px;
display: block;
float: left;
height: 25px;
background: url(images/tab_m.png) repeat-x 0 0;
}
.tab ul.login li a {
color: #15ADFF;
}
.tab ul.login li a:hover {
color: #333;
}
.tab .sep {color:#666}
.tab a.open, .tab a.close {
height: 20px;
line-height: 20px !important;
padding-left: 30px !important;
cursor: pointer;
display: block;
width: 100px;
position: relative;
top: 2px;
}
.tab a.open {background: url(images/bt_open.png) no-repeat left 0;}
.tab a.close {background: url(images/bt_close.png) no-repeat left 0;}
.tab a:hover.open {background: url(images/bt_open.png) no-repeat left -19px;}
.tab a:hover.close {background: url(images/bt_close.png) no-repeat left -19px;}
I know it's a little messy... Sorry :(

Answer 1

how to determine the error:
remove all classes from the stylesheet.
add the classes one by one.
see when/where it fails
fix/solve bug
if not at the end proceed to step 2

Answer 2

#panel {
width: 100%;
height: 280px;
color: #333;
background: transparent url(images/tab_bk.png) repeat;
overflow: hidden;
position: relative;
z-index: 3;
display: none;
}
Though the DIV was actually closed off, for some reason IE completely ignored it!
This was the problem:
display: none;
So all I did was place the DIV in the footer at it all worked. It still puzzled me why it was only doing it in IE!!