Misbehaving header in IE

Get Started
1

I code in Opera and test in FF and Chrome. Then I close my eyes, cross my fingers, and fire up the site in IE. This time, the gremlins from Redmond had a good time in my header.

site mockup

I can never keep straight the little tics and persnicketies that make my designs break in IE. :nono: Anyone care to help a brother out? Thanks!

[ot]If someone says, “Geez, Max, you had this problem last year and we fixed it in this thread,” I won’t be irate. Embarrassed, yes.[/ot]

Edit: Seems it’s only broken in IE7 and earlier. Figures.

2

Hi Michael,

IE doesn’t like that structure much :slight_smile:

You’ll need to add this additional code:


#wrapper {zoom:1.0}/* layout disappears without this*/
.slugline {
	top: 1em;
	line-height:1.1;/* need line-height or IE cuts text off */
}
form#search{width:auto}/* IE thinks its too wide so use auto width */
#navgrn{clear:both}/* clear the nav to start on a new line */
.headerlink{float:left}
.headinner{float:left}/* floats must come first */

Then add a div to wrap and float that block like this:


<div id="wrapper">
		<div id="header">
				<h1><b>NeuroNexus</b></h1>
			[B]<div class="headinner">[/B]
			<a class="headerlink" href="index.html"><img class="imgposlogo" src="http://www.iraqtimeline.com/nn/images/logo/3dnpilogo.png" alt="NeuroNexus logo"></a>
				<h2 class="slugline">NeuroNexus</h2>
				<p class="subslug">the educational and research arm of the <a href="http://www.neurosci.us/" title="Advanced Neuroscience Institute" class="green">advanced neuroscience institute</a></p>
			[B]	</div>[/B]
				<form method="get" action="http://www.google.com/search" id="search">

That works for me in IE6

3

You are the awesomest, Paul. Can’t wait to try that out.