Banner image gone in IE7

[MindPlunge]

I guess I'm going snowblind here. Can't figure out why IE7 isn't displying the banner. All looks good in Safari, IE6 and FF.

SITE
CSS

[Dan_A]

The css should be completely rewritten, ie hacks moved between conditional comments...
As a quick fix, add before </head>

<!--[if IE 7]>
<style type="text/css">
#navcontainer{height:auto;}
</style>
<![endif]-->

remove width and height from #banner
add height:150px; in #banner-inner

[MindPlunge]

Thanks! The quick fix worked. One other problem is that my navigation is 'hidding' in IE7. If I change the height in the #navcontainer (currently 22px) the navigation will be visible but the 1px doesn't stretch 100%. Changing the height will also change the design in FF and Safari...

Any work around this problem?

CSS

#navcontainer
{
margin: 0;
padding: 0;
height: 22px;
font: 11px Verdana, sans-serif;
width: 100%;
border-bottom: 1px solid #bbb;
list-style-type: none;
background: #fff;
}

#navlist li
{
float: left;
margin: 0;
padding: 0;
width: auto;
display: block;
}

#navlist li a, #navlist li a:link
{
background: #fff;
color: #333;
text-decoration: none;
padding: 3px 5px 3px 5px;
display: block;
}

#navlist li a:hover
{
color: #333;
border-bottom: 3px solid #647858;
cursor: pointer;
background: #eee;
}

#navlist li a#current, #navlist li a#current:link
{
color: #000;
cursor: default;
font-weight: bold;
border-bottom: 3px solid #999;
}

#navlist li a#current:hover
{
border-bottom: 3px solid #f90;
background: #eee;
}

CSS

<ul id="navlist">
<li><a href="http://www.mindplunge.com" >home</a></li>
<li id="active"><a href="http://www.mindplunge.com/weblog/" id="current">blog</a></li>
<li><a href="http://www.mindplunge.com/weblog/archives.php">archives</a></li>
<li><a href="http://www.mindplunge.com/weblog/about.php">about</a></li>
<li><a href="http://www.mindplunge.com/weblog/contact.php">contact</a></li>
</ul>

[Paul O'B]

Hi,

Your clearing technique is flawed in ie7 because you have copied it incorrectly. You need to remove * html from the inline-block property because ie7 needs it.

e.g.

 /* .pkg class wraps enclosing block element around inner floated elements */
 .pkg:after
 {
 	content: " ";
 	display: block;
 	visibility: hidden;
 	clear: both;
 	height: 0.1px;
 	font-size: 0.1em;
 	line-height: 0;
 }
  .pkg { display: inline-block; }
 /* no ie mac \*/
 * html .pkg { height: 1%; }
 .pkg { display: block; }
 /* */

ie7 uses inline-block to force layout and then uses display:block to reset the display but still keeps "layout" forced.

Your other problems could have been sorted quite easily also by using these styles.

 #container-inner{float:none}
 #navcontainer{height:auto}

Then add the clearing technique to the navcontainer instead of the height.

 		<div id="navcontainer" class="pkg">
 			<ul id="navlist">

That works for all without resorting to conditional comments or extra hacks.

There is no need to add the clearing technique to actual floats either as floats will automatically encompass child floats. You only add the clearing technique to elements that are not floated so that they will contain their nested floats.

[MindPlunge]

Awesome! Thanks for the help. I'm still not sure how the 'float' behaves but for now I'm good to go.