[SOLVED] Validates, but blank page in ie6

[tippy_102]

I spent the last few months working on a site and have been testing in ie7, firefox and opera. The css and html both validate without warnings. Today a friend had a look at in it ie6 and I was shocked to see that nothing displayed!

 

Can anyone give me a few pointers as to the troublesome tags I should be looking at so I can narrow down the options of what needs to be changed?

[AndyB]

First pointer: give us the URL

 

Blank page? Like white text on a white background but otherwise OK, or like view source shows absolutely no code?

[tippy_102]

The site isn't live - it's available only on my local network.

 

Viewing the source shows that all the text is being generated, it's just not displayed. After saving the source as a .html file the text is viewable in ie6 as long as the .css cannot be accessed. As soon as the .css file comes into play, nothing is displayed....not even white text on a white background.

 

/* controls the width of fluid layout */

div.fluid {
width: 90% !important;
}

/* Basic Stuff ---------------------------------------------------------------------------------------- */

* {
margin: 0em;
padding: 0em;
}

body {
background-color: #fff;
color: #000;
font-size: 90%;
font-family: arial, verdana, "Trebuchet MS", Helvetica, sans-serif;
}

img {
border: none; 
} 

h1,h2,h3,h4,h5,h6 {
font-weight: normal;
letter-spacing: 0px;
}

h3,h4,h5,h6 {
color: #000;
}

h1 span {
font-weight: bold;
}

h3 span {
font-weight: bold;
}


br.clear {
clear: both;
}

a {
text-decoration: none;
color: #D90000;
}

a:hover {
text-decoration: underline;
}

a:visited {
text-decoration: none;
color: #993333;
}

ul.links {
list-style: none;
}

ul.links li {
line-height: 1.3em;
padding: 0 0 11px 0;
}

p {
line-height: 1.5em;
}

small {
font-size: 70%;
font-weight: normal;
letter-spacing: 0px;
}

/* Header ---------------------------------------------------------------------------------------- */

#header {
width: 100%;
height:122px;
background: #440000 url('bg-leaf4.jpg') repeat-x;
}

#header_inner {
position: relative;
width: 90%;
height: 122px;
margin: 0px auto;
}

/* Logo  ---------------------------------------------------------------------------------------- */

#logo {
position: absolute;
bottom: 0.6em;
}

#logo h1 {
display: inline;
color: #fff;
font-size: 2.4em;
}

#logo h2 {
display: inline;
color: #fff;
font-size: 1.5em;
}

/* Menu ---------------------------------------------------------------------------------------- */

#menu {
position: absolute;
right: 0em;
bottom: 0em;
}

/* Main ---------------------------------------------------------------------------------------- */

#main {
background: #fff url('shadow.jpg') 0px 1px repeat-x;
}

#main_inner p {
margin-bottom: 1.5em;
text-align: left;
line-height: 180%;
}

#main_inner ul {
margin-bottom: 2.0em;
}

#main_inner {
position: relative;
width: 90%;
margin: 0 auto;
padding-top: 1.0em; 
}

#main_inner h3 {
margin: 5px 0 20px 0;
padding-left: 33px; 
background: url(red_leaf.gif) no-repeat left center;
font-size: 1.5em;
font-weight: bold;
padding-bottom: 0.1em;
margin-bottom: 0.8em;
border-top: solid 1pt red;
border-bottom: solid 1pt red;
}

#main_inner h4 {
font-size: 105%;
font-weight: bold;
letter-spacing: 0.05em; 
/* padding-bottom: 0.175em; */
margin-bottom: 0.95em;
margin-top: 0.95em;
padding: 4px 0 4px 0;
border-top: dotted 1px #c1c1c1;
border-bottom: dotted 1px #c1c1c1;
}


/* Footer ---------------------------------------------------------------------------------------- */


#footer {
width:100%;
margin-top: 1.55em;
padding-top: 2.0em;
text-align: center;
color: #eee;
background: #b22222 url('shadow-up.jpg') repeat-x;
}
#footer a {
text-decoration: none;
color: #999;
}

/* content ---------------------------------------------------------------------------------------- */

#content {
position: relative;
margin-right: 17em;
}

#content-main {
position: relative;
float: left;
width: 100%;
}


/* sidebar ---------------------------------------------------------------------------------------- */

#sidebar {
float: right;
}

#side-menu {
width: 13.0em;
float: left;
padding: 0em 0em 0.5em 2em;
border-left: dotted 1px #E1E1E1;
}

#sidebar h5 {
height: 25px; 
padding: 8px 0px 0px 38px;
background: #ffffff url(leaf-bar3.jpg) no-repeat;
font-size: 15px;
font-weight: bold;
color: #FFFFFF;
}

#sidebar ul {
margin-bottom: 0em;
line-height: 1.0em;
}

/* Comments -------------------------------------------------- */

ol.commentlist {
list-style-type: none;
margin:1.5em 0 0;
padding:0;
color: #333;
font-family: Helvetica, Verdana, Arial, sans-serif;
font-size: 1.1em;
}

ol.commentlist p {
line-height: 1.5em;
}

ol.commentlist li {
margin: 1.3em 0;
}

ol.commentlist li.alt:hover,
ol.commentlist li.norm:hover {
background: #fff;
}

ol.commentlist li.norm {
background: #fffafa;
padding:1px 20px 1px 20px;
line-height: 1.6em;
border: 1px solid #c9c9c7;
}     

p.commenter {
padding: 3px 15px 3px 10px;
margin: 0px -20px; 
background: #d9d9d9; /* grey */
border-bottom: 2px solid #fff;
}

.commenttext p {
margin-left: 10px;
}

ol.commentlist span {
background:#fff;
padding:3px 1px;
}

ol.commentlist a:hover,.cauthor a:hover {
color:rgb(34, 34, 34);
text-decoration:none;
}

/* tables -------------------------------------------------- */

table.post_comment td {    
border-width: 0px 0px 1px 0px;    
padding: 8px;    
border-style: inset;    
border-color: #888888;    
}

table.add_link td {    
border-width: 0px 0px 1px 0px;    
padding: 6px;    
border-style: inset;    
border-color: #888888;    
}

/* rss feed -------------------------------------------------- */
.feed {
  margin-left: 3px;
  padding: 0 0 0 19px;
  background: url("feed-icon-14x14.png") no-repeat 0 50%;
} 

[ToonMariner]

http://www.satzansatz.de/cssd/onhavinglayout.html

 

give your div that is 'hidden' a css property that triggers hasLayOut.

[tippy_102]

That's what I needed to know! Thanks ToonMariner!!