[RESOLVED] IE5 creates space for no reason on page load, but is ok on refresh

[postedoverseas]

Hi all,
I am just in the middle of doing some cross browser testing and I have a major problem. As my site is about the UK military, I need it to be compatable with IE5 as they use IE5 alot.
I have created this script in the head of the documents to use a different CSS document if it is IE version 4, 5.0 or 5.5.
<?php
// Start of MSIE script
$list=$_SERVER['HTTP_USER_AGENT'];
$explode=explode(';', $list);
$vs=$explode['1'];
$query_MSIE="SELECT IF (SUBSTRING('$vs',7,1)=5, '<link rel=\"stylesheet\" type=\"text/css\" href=\"../css/MSIE5.css\" />', '<link rel=\"stylesheet\" type=\"text/css\" href=\"../css/layout.css\" />') AS header;";
$MSIE=mysql_query($query_MSIE, $campaign) or die (mysql_error());
$row_MSIE=mysql_fetch_assoc($MSIE);
echo $row_MSIE['header'];
// End of MSIE script
?>


The problem is that on testing through Browsercam, it creates space under the page header for no reason. If you refresh the document all is fine. see the 2 examples below, the first on is when the page originally loads up and the second is once the page is refreshed.
http://www.thebfpocampaign.co.uk/images/screen1.gif
http://www.thebfpocampaign.co.uk/images/screen2.gif

Has anybody ever come across this problem before or does anybody know why it is doing this?

[bokeh]

It's hard to tell without seeing the code but it looks like a "hasLayout (http://www.satzansatz.de/cssd/onhavinglayout.html)" problem to me.

[postedoverseas]

Ok, while I look up this hasLayout thing here is the code:
first, the stylesheet
* {
margin:0;
padding:0
}
body {
font-family: verdana, arial, sans-serif;
font-size:100%;
background-image:url(../images/background.gif);
}
.clearboth {
clear:both;
}
h1 {
font-size:1.75em;
margin:10px 0 -10px 0;
text-align:center;
}
h2 {
margin-left:70px;
font-size:1em;
line-height:2.5em;
text-align:left;
}
h3 {
margin-left:20px;
font-size:.75em;
line-height:2em;
text-align:left;
margin-top:15px;
}
h4 {
margin-left:10px;
font-size:.75em;
line-height:1.5em;
text-align:left;
}
h5 {
text-align:center;
font-size:1em;
font-weight:bold;
}
h6 {
text-align:left;
font-size:.75em;
text-indent:10px;
padding-bottom:10px;
}
a {
text-decoration:none;
color:#990000;
font-weight:bold;
}
a:hover {
text-decoration:none;
color:#006600;
font-weight:bold;
}
sup {
font-size:75%;
}
div#menu a:hover {
text-decoration:none;
color:#006600;
font-weight:bold;
}
div#content {
width:770px;
border:1px solid black;
background-color:#FFFFFF;
}
.clearboth {
clear:both;
}
div#header {
clear:both;
width:100%;
height:100px;
background-color:#006666;
font-weight:bold;
color:#FFFFFF;
border-bottom:1px solid black;

}
div#header img {
float:left;
}
div#header p {
padding:40px 60px 40px 0;
text-align:right;
}
div#left {
float:left;
width:200px;
border-right:1px solid black;
border-bottom:1px solid black;
}
div#menu {
width:200px;
background-color:#CCCCCC;
}
div#menu a {
display:block;
font-weight:normal;
}
div#menu p {
font-size:.75em;
line-height:1.2em;
text-indent:10px;
border-bottom:1px solid black;
display:block;
text-decoration:none;
text-align:left;
}
div#left_bar {
width:200px;
background-color:#FFFFFF;
}
.xhtml img{
margin:10px 0px 10px 20px;
}
.xhtml a img {
border:0;
}
.paypal {
padding:15px 56px 10px 65px;
}
.comment1 {
font-size:.75em;
padding:0 10px 0 10px;
}
.comment2 {
font-size:.75em;
padding:0 10px 0 10px;
text-align:center;
}
div#main_content {
float:right;
width:560px;
padding-bottom:20px;
}
div#editable_content {
float:right;
width:560px;
padding-bottom:20px;
padding-right:10px;
}
div#editable_content p {
text-align:left;
font-size:.75em;
margin:0 0 0 10px;
line-height:1.5em;
}
div#editable_content ul {
margin:10px;
}
div#editable_content li {
font-size:.75em;
margin-left:50px;
margin-bottom:10px;
text-align:left;
}
div#editable_content ul li ul li{
font-size:.9em;
margin-left:50px;
}
address {
text-indent:50px;
font-style:normal;
font-size:.75em;
line-height:1.5em;
text-align:left;
}
.form500 {
float:right;
width:550px;
margin-top:20px;
}
.label {
float:left;
width:48%;
padding-right:10px;
margin-bottom:10px;
text-align:right;
}
.input {
float:right;
width:49%;
margin-bottom:10px;
padding:0;
font-size:.8em;
}
.form500 img {
padding-left:10px;
}
.submit {
float:right;
}
.help_logo {
float:left;
padding-right:10px;
}
.textarea {
float:right;
width:49%;
margin-bottom:10px;
padding:0;
font-size:.8em;
font-size:1em;
}
.textarea_help {
float:left;
border:1px solid black;
font-size:1em;
}

.radio {
}
table {
margin:9px 0 9px 0px;
}
td {
font-size:.75em;
}
.finance_date {
width:50px;
text-align:center;
}
.finance_item {
width:200px;
text-align:left;
}
.finance_income {
width:75px;
text-align:center;
}
.finance_expenditure {
width:75px;
text-align:center;
}
.finance_2cols {
width:250px;
text-align:left;
}
.finance_4cols {
width:400px;
text-align:left;
font-weight:bold;
}
div#footer {
clear:both;
width:100%;
height:60px;
background-color:#006666;
border-top:1px solid black;
}
div#footer a {
color:#FFFFFF;
margin:10px 0 15px 0;
}
div#footer ul {
width:100%;
}
div#footer ul li {
float:left;
text-decoration:none;
padding:0 23px 0 23px;
font-size:.70em;
}
.keywords {
padding-top:10px;
font-size:.70em;
color:#FFFFFF;
}
.text {
text-indent:15px;
padding:0 0 10px 0;
}
.center {
text-align:center;
font-size:.75em;
}
div#subs {
width:555px;
float:right;
}
.names {
width:47%;
float:left;
padding:0 5px 10px 0;
}
.comments {
width:48%;
float:right;
padding:0 0 10px 0;
}
div#photo img {
margin:0 84px 0 85px;
border:1px solid black;
}
.thanks {
font-size:1.5em;
color:#006600;
line-height:1.5em;
text-align:center;
font-weight:bold;
}
.news_titles {
height:200px;
width:555px;
overflow:scroll;
}
.news_content {
position:absolute;
margin:25px 0 0 -250x;
padding-left:250px;
width:40px;
}
.photo_border img {
border:1px solid black;
float:right;
margin:-10px 0 0 10px;
}
.photo_border2 img {
border:1px solid black;
float:right;
margin:0px 0 0 10px;
}
.photo_no_border img {
float:right;
margin:-10px 0 0 10px;
}
.photo_contact img {
float:right;
margin:0 10px 0 0;
}
.sign {
text-align:center;
font-size:1em;
font-weight:bold;
margin-bottom:10px;
}
.comment {
width:250px;
border:1px solid black;
float:right;
margin:-10px 0 0 10px;
}
If you need the code to the page itself let me know and I''ll have to post seperately as this has just given me a warning about having too many characters

[bokeh]

Well that's pretty meaningless without the URL or the document. To start with add width:100% to every element that does not have a specified width.

[toicontien]

The 100% fix can be problematic if we're talking about IE5/Win (not mac, which doesn't have the hasLayout DOM property). IE5 gets the box model wrong, so be wary of adding width: 100% to elements that have padding and borders. I've found the following snippet of code a little more fail-safe for triggering hasLayout:

<!--[if IE]>
<style type="text/css" media="screen">
#someId {
height: 1px; /* IE5 is less buggy with this */
voice-family: "\"}\"";
voice-family: inherit;
height: auto; /* Reset height, mainly for IE7 */
zoom: 1; /* Trigger hasLayout */
}

.fixIE501 {/* IE 5.01 often ignores the declaration after a voice-family hack. */}
</style>
<![endif]-->

The internet explorer conditional comments hide the errant IE-Win CSS styles for non-IE browsers (and thus will pass validation).

[bokeh]

IE5 gets the box model wrongIE5? Are you serious? That browser was replaced over five years ago. Are you seriously recomending someone code their site for people too lazy to update their browser to the latest free offering after five years of being obsolete?

[postedoverseas]

Normaly I would agree but as this websiet is based on the British military, I need it to be compatible with IE5 as they are still using it in many areas