This tutorial will show you how to create the illusion of an overlapping image that doesn’t use transparencies with a few CSS rules.

I’m also going to show you how to get Internet Explorer to properly render the page.

Once again, I’m going to be using the Out To Lunch Productions’ website as my example. I just can’t stop loving that place. Here is a screenshot of the header:

A screenshot of OTL's header

This layout does not make use of transparent images or browser-rendered drop-shadows, simply because not every browser supports them.

The images

Logo.png

MenuOverlap.png

The HTML

<div id=”logo”>
<img src=”images/Logo.png” />
</div>
<div id=”tagline”><img src=”images/Tagline.png” alt=”Creativity. With a sense of humor.” />        </div>
</div>
<div id=”middle”>
<div id=”topMenu”>
<ul>
<li><a href=”index.html”>Welcome</a></li>
<li><a href=”services.html”>Services</a></li>
<li><a href=”philosophy.html”>Philosophy</a></li>
<li><a href=”contact.html”>Contact</a></li>
</ul>
</div>

The CSS

#middle {
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
background-image: url(../images/MenuOverlap.png);
background-repeat: no-repeat;
background-position: left top;
width: auto;
}

Fixing it in IE

As with most site code, this will require some IE tweaking. To get your page to format differently in IE, use this code somewhere in your head tag:

<!–[if lte IE 6]><style type=”text/css”>@import “css/ie_fixes.css”;</style><![endif]–>
<!–[if IE 7]><style type=”text/css”>@import “css/ie_fixes.css”;</style><![endif]–>

Now, you’re going to need an additional CSS file named ie_fixes.css in the same directory as your other CSS file.

For this particular problem, the entire “middle” DIV class needed to come up 3 pixels. The code for this is:

#middle {
margin-top: -3px;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
background-image: url(../images/MenuOverlap.png);
background-repeat: no-repeat;
background-position: left top;
clear: both;
}