This past week while working on a project I ran into the most frustrating IE7 bug I’ve encountered to date. I have tried to recreate it in separate environments from the site I was developing but up to now have been unable to do so. However, in hopes of helping someone tortured by this bug down the road I will give my best guess as to what is causing it and explain how I fixed it.

First off, the bug looks like this:

Alright, the first thing is that this bug comes into play only in IE7 (IE6 works fine). Second, it seems to occur only when there are html elements nested inside an anchor tag and these elements are told to change their background properties on the :hover phase of a parent element. This most often happens with nested list drop down menus like the example above. Third, the elements that act buggy are positioned absolutely within the :hover(ed) parent element. Once again this only really occurs with drop down menus.

In the code below the element that gets the bug is the anchor element within the nested list items.

<div id="navigation"><ul id="nav">
<li><a href="" title=""><span>Solutions</span></a></li>
<li><a href="" title=""><span>Investors</span></a><ul>
	<li><a href="" title="">Buggy nav item 1</a></li>
	<li><a href="" title="">Buggy nav item 2</a></li>
	<li><a href="" title="">Buggy nav item 3</a></li>
</ul></li>
</ul></div>

What happens is that when a top level navigation item is hovered over the drop down appears, however, because a top level nested element had a background image change on the :hover state the drop down list loses its padding. In essence, the ul > li > ul > li > a element will lose its padding and end up looking like the buggy menu above. Although once the user rolls over this anchor element it will once again regain its padding and jump back into place.

When would this occur?

Good question. The most likely occurrence of this would be if you had a navigation menu that required a lot of imagery. For example, a menu with which you were forced to use a span tag to get one extra background image. And then on the hover you wanted the span background image to change, perhaps to point an arrow downward instead of sideways. Therefore the user would know which top level item they had hovered over even if the mouse was placed on the nested sub-menu below. In this case you’d probably have some CSS like this.

#header ul#nav li.active a span,
#header ul#nav li:hover a span {
   color: #fff;
   background: url(/images/icons/downward-arrow.gif)
   no-repeat 15px 50%;
}

Alright, so basically you decide to help the viewer see what nav menu they’re on by changing the span background property to have a down arrow. Unfortunately all you end up with is a buggy IE7 drop down menu. What’s the best fix? In this case the best fix is the apply that downward arrow to the li background and just have the span item go transparent instead of change the image on the fly. One added bonus to this method is that you won’t have to load that image on the hover state. Still, this means that if you’re using the li background already you will be forced to find another way to highlight the top-level navigation item.

What’s really going on here?

Apparently when IE7 tries to re-render a background image on the :hover state, nested absolutely positioned elements are reset to their default value causing them to lose padding, etc. Hence, the best option is to avoid making IE7 redraw background images when there are absolutely positioned nested elements. Instead, rely on background colors or transparency for effect, or apply the effect to the li background.

Months ago when working on development for RMI | BET’s video website I needed a way to do image rollovers but I didn’t want to have a reliance on javascript. So, I set out to a create a reusable image rollover solution that was completely CSS based. Basically the concept was to have a universal class that could be called at any time in the HTML to create a rollover image.

Since first creating this code I’ve integrated it as a standard into all of our starting CSS templates.

Here’s how this works:

Start out with a basic anchor tag and give it a class of “hover-box”. Then inside the anchor tag add both images, your original and your hover version. Place the hover image first in the tag, and then add the original one second. Add a class of “hover” to the hover image. It should look like this:

<a href="#" title="Link title..." class="hover-box">
   <img src="rollover-image.jpg" class="hover" alt="Rollover"/>
   <img src="original-image.jpg" class="original" alt="Original"/>
</a>


Now, make sure this CSS is included in your document.

a.hover-box img.original { /* required for IE6 */
    float: left;
    position: relative;
}
a.hover-box img.hover {
    display: none;
}
a.hover-box {
    position: relative;
    float: left;
    display: block;
}
a.hover-box:hover {
    display: block;
    font-size: 100%;
    z-index: 1;
}
a.hover-box:hover img.hover {
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1000;
}

Okay, basically this is hiding the hover image to begin. Then, once the anchor tag is hovered over the image with class “hover” displays itself as block and is positioned absolutely directly on top of the original image. This is accomplished because the hover-box class is set with relative positioning, meaning that the hover image is tied to its boundaries.

Bang! There you have it, a simple CSS hack-free solution that works in: Firefox, Safari, IE 6 & 7, and presumably all other standards compliant browsers. Check it out in action…

P.S. This is especially sweet because the image is preloaded and then hidden, meaning the hover effect is instant for the viewer.

Edit: After some testing I found out my original version wasn’t always working in IE6. It seems that for some reason IE6 needs a class applied to the original image that floats it and positions it relative. I tried every possible way and this is the only thing making it work without a * hack. Not a huge deal though. Also, IE6 requires the original image to come second in the HTML, unlike I originally thought.

A constant problem that we run into here at Imulus is clients that want tables with alternating color rows but don’t understand the concept of editing HTML to add a class of odd or even to them.

So today Ryan took a few minutes and created a tiny javascript that automatically applies an “even” class to every row of a table. Now we can apply our styles via the CSS and the clients don’t have to worry if they generate their own tables via Central 2 (the Imulus CMS). The script relies on Jquery (http://www.jquery.com) and is incredibly easy to set up.

Download the script: Table-Row-Switch.zip

Occasionally when working with images in HTML it’s nice to have cool effects along the borders of the image. For instance, a nice drop shadow, rounded corners, etc. The problem is that usually to achieve these effects each and every image has to be taken into a photo application and altered. Which, even with batch actions, can be a time consuming and frustrating process. Further, if the design of the site changes in the future all the images have to be altered as well. Clearly there has to be a better way.

And there is!! By utilizing the CSS background property combined with the image tag and a few borders we get great looking image effects without ever having to alter content images! Let’s take a look at the final outcome before going further.

The key with this technique is to apply a standard background image to the background property of all “content images” in the CSS. From there we can make the effect show up by adjusting the padding of the img tag in the CSS. We’ll apply the effect width in padding.

For instance, if my drop shadow is 3px wide in the effect-image I am using (in this case thumb-bg.gif), then I would apply 3px of padding to the right and bottom of the img tag in the CSS. Or 4px if I wanted 1px of white space before the start of the content images.

In essence, every image that shows up has thumb-bg.gif appended to it as the effect. And the beauty is that thumb-bg.gif is only 1.3k, so it will load quickly and cache for all future images.

Alright, so here’s the raw CSS:

img { background: #fff url(thumb-bg.gif) no-repeat right bottom;
border-top: 1px solid #ddd;
border-left: 1px solid #ddd;
padding: 1px 4px 4px 1px;}


In this code I am applying the background effect to each image and then adding a gray border to the top and left of each image to complete the effect.

In the future as PNG’s and CSS 3 become more common this technique could be revised to be even more powerful. However, in the mean time it is a great way to save time on image editing while still adding a pop to your normal everyday images.

Here at Imulus we recently set a goal to streamline our design and development process by creating templates for starting a new project. As a first step in this process I coded out a simple HTML / CSS example page that offers information on basic HTML elements and what CSS can do to them.

It contains visual examples for the following:

• font rendering (PC and Mac)
• link styling
• heading styling
• list styling
• border style options
• and table styling

You can download this cheat sheet in zip format or view it online. Enjoy!