Forum Moderators: open
All working in Firefox but in IE:
This renders fine in transitional mode, with the centeral cell taking the space left by the others. however all the hight specification seems to be forgotten/ignored when i put in a strict doc type. I'm trying to standardise my site and as such i need to isolate why it's happening and what the problem is:
Style Sheet:
html,body {
border:none;
margin:0px;
padding:0px;
height:100%;
width:100%;
background-color:#000000;
}
.default_mainTable {
height: 100%;
width: 100%;
border: none;
padding: 0px;
background-color: #FFFFFF;
}
.default_topBarTr {
width: 100%;
height: 25px;
border: none;
background-color: #2A4766;
}
.default_topBarTd {
width: 100%;
height: 25px;
border: none;
background-color: #2A4766;
}
.defaut_statusBarTr {
width: 100%;
height: 20px;
cursor: default;
background-color: #2A4766;
}
.defaut_statusBarTd {
width: 100%;
height: 20px;
cursor: default;
background-color: #2A4766;
}
.default_blendBarTr {
width:100%;
height:20px;
background-image:url(../images/topTextBg.jpg);
background-repeat:repeat-x;
background-position:top left;
}
.default_blendBarTd {
width:100%;
height:20px;
background-image:url(../images/topTextBg.jpg);
background-repeat:repeat-x;
background-position:top left;
}
.default_mainPaneTr {
height:auto;
width:100%;
background-image: url(../images/logoPrjWhiteBG.jpg);
background-position: center center;
background-repeat: no-repeat;
padding-top:20px;
}
.default_mainPaneTd {
height:auto;
width:100%;
background-image: url(../images/logoPrjWhiteBG.jpg);
background-position: center center;
background-repeat: no-repeat;
padding-top:20px;
}
.default_bottomBorderTr {
height:1px;
width:100%;
background-color:#000000;
}
.default_bottomBorderTd {
height:1px;
width:100%;
background-color:#000000;
}
.default_bottomBarTr {
height:15px;
width:100%;
background-color:#0066CC;
}
.default_bottomBarTd {
height:15px;
width:100%;
background-color:#0066CC;
}
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!-- Start: Page Header -->
<html>
<head>
<title></title>
<link rel="shortcut icon" href="favicon.ico"/>
<link href="styles/default.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<table class="default_mainTable" cellpadding="0" cellspacing="0">
<tr class="default_topBarTr">
<td class="default_topBarTd">
</td>
</tr>
<tr class="defaut_statusBarTr">
<td class="defaut_statusBarTd">
</td>
</tr>
<tr class="default_blendBarTr">
<td class="default_blendBarTd">
</td>
</tr>
<tr class="default_mainPaneTr">
<td class="default_mainPaneTd">
<!-- End: Page Header -->
<!-- Start: Main Content -->
<!-- End: Main Content -->
<!-- Start: Page Footer -->
</td>
</tr>
<tr class="default_bottomBorderTr">
<td class="default_bottomBorderTd">
</td>
</tr>
<tr class="default_bottomBarTr">
<td class="default_bottomBarTd">
</td>
</tr>
</table>
</body>
</html>
<!-- End: Page Footer -->
this should be easy i feel as there isn't much to it at the moment, but WHY IS THIS HAPPENING?
Cheers
Owen
I don't think that the height 100% (on table) is valid for strict doctype - I may be wrong though but my guess would be that it's coming from that.
what happens / error message do you get when you put it trough the W3C validator?
Leo
How about using pur CSS design?
If you copy the 2 bottom cells as an img and the top cell as one as well, you then assign the bottom img to the body of the page (with align: bottom and repeat-x) and create a wrapper div with 100 width with the top img as bg (with repeat-x as well)
Your design will then rely on two images which are displayed the same no matter what browser you look at them in (except very old one which don't support css totally)
This should give you a lighter page in terms of kb and also a friendlier page in terms of SE.
Hope this helps
Leo
