CSS Problem with IE: lost my header

header contains img floated left and h1 text adjacent on rt

[oneofmany]

Trying to understand IE's rendering could do one's head in!
Below is the script to my problem page. I don't get why I'm losing the <h1>?

I am sorry...I am a newbie and I'm sure there are many viewing this and cringing at the lack of abbreviation! (It will atleast be external....)

<style type="text/css">
<!--
body {
margin:0;
background: url(../Sidebar2Gradbg.gif) repeat-y 75% 0 ;
padding: 0;
}
html, body, #wrap {
min-height:100%;
width:100%;
height:100%;
min-width:750px;
}
html>body, html>body #wrap {
height:auto;
}
html {
background: url(../sidebarGrad.gif) repeat-y 28% 0;
}

#wrap {
margin: auto;
position: relative;
top:0;
left:0;
min-height: 100%;
background: background: url(../sidebarGrad.gif) repeat-y 28% 0;

}
#wrap-inner {
background-image:url(../sidebarGrad.gif) repeat-y 28% 0;
}
#header {
background-color: #003399;
padding-top:10px;
padding-left:20px;
}
h1 img {
float:left;
margin-right:15px;
margin-bottom:5px;
}
#main-body {
float: left;
width:75%;
}
#content {
float: right;
width: 70%;
}
content ul li {
list-style:square;
}
#sidebar2 {
float: right;
width: 25%;
}
#footer {
clear: both;
background-color: #003399;
text-align:center;
color: #BBBBBB;
font-size:80%;
font-weight:800;
padding: 5px;
}
#sidebar {
float: left;
width: 30%;
background-position: left top;
z-index: 2;
}
#sidebar2Div {
padding-top: 10px;
padding-right: 40px;
padding-bottom: 10px;
padding-left: 20px;
z-index:20;
list-style: none;
}
#sidebar2Div ul li {
list-style:none;
}
#sidebarDiv {
padding-right: 20px;
padding-bottom: 10px;
padding-left: 20px;
padding-top: 20px;
}
td#sidebarDivMenu a {
display:block;
margin: 0 3px 0 0;
padding:10px 10px 1px 5px;
font: medium Arial, Helvetica, sans-serif;
text-decoration: none;
border-right: 2px solid #cccccc;
border-left: 2px solid #cccccc;
border-bottom: 3px solid #cccccc;
color: #003399;
background: transparent;
}
td#sidebarDivMenu a:hover {
background-color: rgb(100%,70%,70%);
color: rgb(50%,0%,0%);
border-right: 4px solid rgb(80%,30%,20%);
padding-right: 7px;
}
td#sidebarDivMenu a:visited {
color: rgb(55%,55%,60%);
}
td#sidebarDivMenu a#comment {
background-color: rgb(100%,92%,90%);
color: black;
border: 1px solid rgb(60%,50%,40%);
border-right-width: 4px; padding-right:7px;
margin-right:3px;
}
td#sidebarDivMenu h4 {
background-color: transparent; color: #EE0000;
margin:0 3px 0 0;
font: bold 100% Arial, Helvetica, sans-serif;
border-bottom:2px solid #cccccc;

}

#sidebarDiv h3 {
text-align:left;
}
#contentDiv {
padding-right: 15px;
padding-bottom: 10px;
padding-left: 20px;
padding-top: 20px;
list-style: square;
border-left: 2px solid #cccccc;

}

#registrationTable {
font-size: small;
}
#CCregistration {
font-size:small;
}
#topnav a {
color:#FFFFFF;
text-decoration: none;
font-size:small;
}
#topnav a:hover {
color:#CCFFFF;
}
#navTable {
vertical-align:top;
}
body{
font-size: medium;
font-family: Arial, Helvetica, sans-serif;
color:#222222;
height: 100%;
}
*html body {
font-size:small;/*forIE5/Win*/
font-size:medium;/*for other IE versions*/
clear: right;
height: 100%
}
h1{
font-size:150%;
font-weight:600;
color: #FFFFFF;
background-color: #003399;
}
h2{
font-size:115%;
}
h3 {
font-size:110%;
color:#DD0000;
text-align:center;
}
h4 {
font-size:110%;
color: #003399;
}
ul li {
font-size:90%;
}
#topnav {
color:#FFFFFF;
background-color: #003399;
clear: both;
padding-bottom:5px;
}
#HowCCWorks {
background: transparent;
background-color: ;
}
.box {
background:url(Round-Bottom.gif) no-repeat bottom left;
width:210px;
margin-left: 40px;
margin-top:20px;
font-size: 100%;
z-index: 20;
}
.box h3 {
background: url(Round-Top.gif) no-repeat top left;
margin:0;
padding: 6px 8px 4px 10px;
border-bottom: 1px solid #999966;
font-size: 16px ;

}
.box ul {
margin: 0;
padding:14px 10px 14px 10px;
list-style: none;
}
.box ul li {
margin: 0 0 6px;
padding: 0;
}
.box p {
padding: 10px;
}
a:link {
color: #003399;
}
a:visited {
color: #003399;
}
a:hover {
color: #3366CC;
}
a:active {
color: #FF6600;
}

dl.feature {
margin: 15px 0;
padding: 15px;
}
dl.feature dt img {
float:left;
margin-top: 0;
margin-right: 15px;
margin-bottom: 0;
margin-left: 0;
padding-top: 0;
padding-right: 4px;
padding-bottom: 4px;
padding-left: 5px;
background-color: #000077;
}
dl.feature dd {
margin-left: 78px;
font-size: 140%;
line-height:1.2em;
color:#FFFFFF;
}
dl.feature dt {
margin: 0;
font-family:Arial, Helvetica, sans-serif;
font-size:140%;
color: #FFFFFF;
}
/* Hide from IE5/MAC \*/
* html #footer {
height:1%;
}
.style8 {color: #EEEEEE}
.style11 {font-size: small}
.style13 {
font-family: "Times New Roman", Times, serif;
font-style: italic;
font-size: 90%;
}
.style14 {
color: #EE0000;
font-style: italic;
font-family: "Times New Roman", Times, serif;
font-weight: bold;
}
/* End hide from IE5/Mac */

-->

</style>
<!--[if gte IE 5]>
<style type="text/css">
body {
width:expression(documentElement.clientWidth < 780? (documentElement.clientWidth == 0? (body.clientWidth < 780? "780px" : "auto") : "780px") : "auto" );
}
</style>
<![endif]-->
</head>

<body>

<div id="wrap">
<div id="wrap-inner">
<div id="header">
<h1><img src="whitecap.gif" alt="logo" width="80" height="80" /><span class="style13">collegefair.info by</span> <br />
CAREER COUNCIL &amp; NATIONAL HISPANIC COLLEGE FAIRS</h1>
<p id="topnav"><a href="index.html" target="_self">home</a> ¦ <a href="#">contact</a> ¦ <a href="#">site map</a></p>
</div>
<div id="main-body">

[Setek]

What exactly do you mean by "losing the

h1

"?

Does the

h1

not show at all? Does it allocate the space for the

h1

, but it's invisible? Does the image inside it not show only? Does the text not show only?

Does it sometimes show if you scroll down the page and back up? If you highlight the text that isn't there, but should be, does it show?

[oneofmany]

Hi
Thanks for your response!
The h1 was invisible in IE 6. If I scrolled down the page and then back up I would catch a glimpse of only some of the heading when I rolled over it.
I played a bit and discovered this:
The <h1> label needed to be wrapped around just the heading and not the img as well, the floated/cleared elements needed a "relative" position (I will check where I got this info and post it for other readers but I need to retrace a bit.)

I had: <h1 img src="" alt="" width="" height=""/>the heading was here</h1>
with: #header {
background-color: #003399;
padding-top:10px;
padding-left:20px;
}
#header img {
float:left;
margin-right:15px;
margin-bottom:5px;

What I should have had:

<img src="" alt="" width="" height=""/><h1>heading here</h1>
with: #header {
background-color: #003399;
padding-top:10px;
padding-left:20px;
position:relative;
}
#header img {
float:left;
margin-right:15px;
margin-bottom:5px;
position:relative;

All is well now, thanks!