if have this code:
HTML Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="keywords" content="free web hosting, free webspace, free webhosts, web hosting, website providers, web site, webhosting, reviews, web space, free php hosting, free mysql hosting" />
<title>Find Free Web :: The Free Web Host Database</title>
<style type="text/css" media="all">
html,body,p,div,img,h1,h2,h3,h4,li,ul,ol,dl,dd,dt,form,table,td,tr {
margin: 0;
padding: 0;
border: 0;
border-collapse: separate;
border-spacing: 0;
}
html, body { height: 100%;}
body {min-width: 770px;} /*** Content Minmum Width, not used by IE5/6, or early versions of Safari ***/
input, select {
margin: 0;
padding: 0;
}
#fullheightcontainer {
position: relative; /*** Let's be nice to IE ***/
width: 100%; /*** Content Width ***/
display: table; /*** For non-IE browsers ***/
height: 100%;
margin-bottom: -116px; /*** NEGATIVE TOTAL Height of Footer Rows ***/
background: #E6E6FA; /*** Background colour of navigation column now ***/
}
#wrapper {
display: table-cell; /*** For non-IE browsers ***/
position: relative; /*** Let's be nice to IE ***/
}
#outer {
position: relative;
margin-left: 180px; /*** Left Column Width ***/
margin-right: 180px; /*** Right Column Width ***/
background: #E6E6FA; /*** Background colour of content column ***/
height: 100%;
}
#float-wrap {
width: 100%;
float: left;
display: inline;
}
#clearheadercenter {
height: 152px; /*** TOTAL Height of Header Rows ***/
overflow: hidden;
}
#clearheaderleft {
height: 152px; /*** TOTAL Height of Header Rows ***/
overflow: hidden;
}
#clearheaderright {
height: 152px; /*** TOTAL Height of Header Rows ***/
overflow: hidden;
}
#clearfootercenter {
height: 112px; /*** TOTAL Height of Footer Rows ***/
overflow: hidden;
}
#clearfooterleft {
height: 112px; /*** TOTAL Height of Footer Rows ***/
overflow: hidden;
}
#clearfooterright {
height: 112px; /*** TOTAL Height of Footer Rows ***/
overflow: hidden;
}
#center {
position: relative; /* fix for IE */
width: 100%;
float: right;
height: 100%;
display: table;
}
#left {
float: left;
display: inline;
width: 180px; /*** Left Column Width ***/
margin-left: -180px; /*** NEGATIVE Left Column Width ***/
position: relative;
}
#right {
float: left;
display: inline;
width: 180px; /*** Right Column Width ***/
margin-right: -180px; /*** NEGATIVE Right Column Width ***/
position: relative;
}
#footer {
z-index: 1;
position: relative;
width: 100%;
height: 0;
}
#subfooter1 {
margin: 0;
background: #E6E6FA;
text-align: center;
height: 80px;
overflow: hidden;
}
#subfooter2 {
margin: 0;
padding-top: 5px;
color: darkgrey;
background: #FFFFFF; /*#FFFFCC; */
text-align: center;
height: 30px;
overflow: hidden;
border-top: 1px solid #000000;
}
#header {
z-index: 1;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 0;
}
#header-inner {
min-width: 770px; /*** Minimum Content Width ***/
height: 0;
}
#subheader1 {
margin: 0;
background: #FFFFFF;
text-align: center;
height: 30px;
overflow: hidden;
}
#subheader2 {
margin: 0;
background: #000000;
text-align: center;
height: 60px;
overflow: hidden;
}
#centerfill, #leftfill {display: none;}
</style>
<!--[if IE 7]>
<style type="text/css" media="all">
#fullheightcontainer{ height: auto; min-height: 100%;}
#centerfill, #leftfill, #rightfill {
display: block;
position: absolute;
top: 0;
width: 100%;
min-height: 100%;
background: #E6E6FA;
}
#leftfill {
width: 180px;
background: #E6E6FA;
}
#rightfill {
left: 100%;
margin-left: -180px;
width: 180px;
background: #E6E6FA;
}
</style>
<![endif]-->
</head>
<body>
<div id="fullheightcontainer">
<div id="centerfill"><!-- Center column color filler for IE7 --></div>
<div id="leftfill"><!-- Left column color filler for IE7 --></div>
<div id="rightfill"><!-- Right column color filler for IE7 --></div>
<div id="wrapper">
<div id="outer" class="floatcontainer">
<div id="float-wrap" class="floatcontainer">
<div id="center">
<div id="clearheadercenter"></div>
<div id="container-center">
<p>Not much going on here!</p>
</div>
<div id="clearfootercenter"></div>
</div>
<div id="left">
<div id="clearheaderleft"></div>
<div id="container-left">
<p>No links to see!</p>
</div>
<div id="clearfooterleft"></div>
</div>
</div>
<div id="right">
<div id="clearheaderright"></div>
<div id="container-right">
<p>Maybe some ads here!</p>
</div>
<div id="clearfooterright"></div>
</div>
</div>
</div>
</div>
<div id="footer">
<div id="subfooter1">
<p>This is the Footer Row1 (with Fixed Height)</p>
</div>
<div id="subfooter2">
<p>This is the Footer Row2 (with Fixed Height)</p>
</div>
</div>
<div id="header">
<div id="header-inner">
<div id="subheader1">
<p>This is Header Row #1 (with Fixed Height)</p>
</div>
<div id="subheader2">
<p>This is Header Row #2 (with Fixed Height)</p>
</div>
</div>
</div>
</body>
</html>
the problem is the font color in the second footer row,
in firefox it is grey, like it should be, but in IE7 it is black
why is that
