ie6 – Belafonte Code

3 Ways to Get Rid of Spaces in List Item Navigation in IE6

.abelafonte — Fri, 18 Jan 2008 03:41:45 +0000

If you’ve ever tried to create an all-css navigation for your website, then you’ve seen it: dreaded spaces when viewed in Internet Explorer 6 on Windows. This article will outline 3 different ways that you can get rid of these spaces in vertical list item navigation. And in the usual Belafonte style, these solutions are hack-free. (Who❤you?!)

Let’s start with a test navigation. We’ll jump right to the part where we’ve completed the navigation’s XHTML and CSS. Copy the following code into your own document if you want to follow along.

CSS

body {
	font: normal .9em Helvetica, Verdana, Arial, sans-serif;
	background: #FFF;
	color: #FFF;
}
#sideNav {
	margin: 0;
	padding: 0;
	list-style: none;
	width: 200px;
	border: solid 1px #000;
}
#sideNav li {
	margin: 0;
	margin-bottom: 1px;
	background: #CCC;
}
#sideNav li a {
	text-decoration: none;
	color: #FFF;
	padding: 5px 3px;
	background: #000;
	display: block;
}

HTML


	Home
	About
	Portfolio
	Contact

This code is designed in the way that most nav lists would look. Also, most designers would want their links to change on rollover. Since IE6 does not recognize :hover pseudo classes when applied to any element that’s not the a tag, we have cannot simply apply the hover to the li tag. Therefore, in order to achieve the rollover, we went ahead and applied display:block to the link so that the rollover color will fill the entire button area.

This is where the problem comes in. If we apply a background color (yellow) to the li element, we can see that the gap that appears below the link element has something to do with either the outside of the a or the inside of the li.

Above: Test menu in IE6 after display:block applied to links. Notice the yellow from list items area showing between block-level links.

Space Removal Method 1: Define Border-Bottom

I came up with this solution a few years back and found this to be the simplest fix for the problem: add a border to the bottom of the li element. If your navigation has divisions between the links, then this is a perfect fit. You see how we have a margin-bottom:1px; applied to the list item? We can simply write in border-bottom:solid 1px #FFF; and eliminate the margin-bottom property. So, we still get the one-pixel white separation, and our gaps disappear in IE6. Success!

Space Removal Method 2: Define Link Width

One of my theories about where the gap comes from is that I imagined there to be an unseen hard return at the end of the link. In my vision, this hard return gets dropped down below the link when display block pushes the link all the way edge to edge. With that in mind, I decided to see what would happen if I reduced the width by one pixel or even made it match the width of the containing element.

So, I added width: 200px; to the a to exactly match the width we defined for our nav as a whole. (You could also use width: 100%; but sometimes that doesn’t work.) If my theory of why this happens is close, then this would keep the line return from dropping down below the link. BAM! It worked! The caveat here is that if you have any left/right padding applied to the link element, compliant browsers will add that to the total width. So, if you go with this method, you’ll have to adjust for that accordingly. (My preferred method is to send different widths to each browser using conditional comments for IE.)

Notice how, since we have 3 pixels of padding applied to both sides, defining the links’ width as ‘200px’ results in a 206-pixel width in compliant browsers.

Space Removal Method 3: IE Whitespace Fix Using Floats

After a long time of using the methods described above, I came across some prett useful information: this phenomenon has a name. It has been dubbed the “IE Whitespace Bug”. If I had known that, I could have just looked it up online and moved along. (It’s OK. I ain’t mad.) Anyway, when I did a search for solutions on this bug, I found tons of hacky “solutions”. Some involved commenting out the space after the li, others had a couple of Tantek-styled backslashes. {shudders}

I found this one at Jon Hicks‘ website, which involves floating and clearing the list item surrounding the link. In an IE6-specific conditional stylesheet, I make sure to include the following in my rule for the navigation li:

#sideNav li {
	float: left; 	/* IE WHTESPACE BUG */
	clear: left;	/* IE WHTESPACE BUG */
	width: 200px; 	/* IE WHTESPACE BUG */
}

Note: it’s always good practice to add notes to remind you why you added something. This way, if you choose to go a different route to solve this bug, you know which declarations to remove.

A few things to understand about this method: The width must be defined on the list item once it’s floated. If it’s not, it will collapse down onto the text that it contains. Also, the containing element must be floated as well, since only floated elements can wrap to contain other floated items. Since this is probably a sidebar navigation, it will likely be floated already, so this shouldn’t be a problem.

I know that there are lots of solutions presented to fix gaps in IE6. These are the ones that I choose since they don’t require much to remember and don’t use hacks.

Create Transparent PNGs in IE6 Using AlphaImageLoader & No Hacks

.abelafonte — Thu, 01 Nov 2007 04:16:09 +0000

As promised, this article describes how to use transparent PNGs in your CSS design in a very clean way. This method simply uses the default cascade and inheritance instead of the CSS hack for transparency described in my previous article on the subject.

As in our previous example of old-school CSS for transparency, we start with our basic background image that includes alpha transparency.

#truck {
	width: 470px;
	height: 294px;
	background: url(images/mater.png) no-repeat left top;

}

And, as expected, it shows up with a crummy blue haze in IE 6. (Which we won’t show here…)

Last time, we isolated which version we wanted to deliver to Internet Explorer by using the parent > child selectors of CSS and a hack that only IE would recognize.

The Clean Solution
This go-round, we will take it up a notch. Start by defining an IE-only stylesheet. Personally, I always have one of these (and another for IE7) at the start of a project. It’s good practice because there will always be little hiccups in IE that you can address easily by serving it a separate CSS file.

So, create a CSS document called stylesIE6.css or something to that effect.

Now, let’s link to that stylesheet using IE’s conditional comments. So, in the head of your document AFTER your existing stylesheet, enter

*Please note: WordPress is adding a space before the exclamation point and ‘endif’. There should be no space there in your code.

This code reads: ‘If less than or equal to IE6, then use this stylesheet’. Remember, that all previously defined styles our primary stylesheet will apply to our document. (You can view all of the possible conditional statements at MSDN). In this stylesheet, we simply want to define the things that we want to change. My IE stylesheets usually contain only a few lines of code.

Next, in your stylesIE6.css stylesheet add the transparent graphic on our #truck element using Microsoft’s AlphaImageLoader filter that we used before.

#truck {
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (src='images/mater.png', sizingMethod='scale');
}

At this point, there are two things that you should notice:
One – We did not have to specify our width and height in the IE-only stylesheet because the #truck element will inherit those settings from the main style sheet.
Two – The #truck element will also inherit the original PNG graphic from our original style sheet. Now, we see two trucks, one of which we don’t want.

Solve this by adding the background property to your IE stylesheet to override the display of the original graphic. Our IE stylesheet wins in specificity because we placed it BELOW our original stylesheet in the source code.

#truck {
	background: transparent;
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (src='images/mater.png', sizingMethod='scale');
}

Now, we should have the same transparent png graphic in IE as we do in all other browsers without relying on hacks. Using this method to isolate browser-specific CSS gives you the most control and keeps you from having to make changes in the future if a browser update renders your hack useless.

Notes:

Find out more about the attributes of AlphaImageLoader at MSDN
Find out more about IE Conditional Comments at MSDN

Transparent PNG in IE6 with CSS Hacks and AlphaImageLoader

.abelafonte — Sun, 16 Sep 2007 21:17:11 +0000

This entry describes a method for displaying a transparent PNG in IE6 using a technique that I actually don’t use anymore. I just wanted you all to be aware of your options when it comes to getting the desired results. You can find the preferred, hack-free method here.

This is an example of isolating browsers using hacks, or exploiting the deficiencies in some browsers. Understand that browser targeting is not limited to transparent PNG and can be used for anything that you want to do only in certain browsers.

We start by defining the code for our awesome transparent graphic. Nothing special here… business as usual. If you view this in IE6, it will have a translucent blue box around the image in all the transparent areas.

#logo {
	background: url(images/logo.png) no-repeat left top;
}

Then we would add the parent-child selector.
In this example, the immediate parent element to the ‘logo’ is the ‘header’ element. So, we use the ‘greater than’ symbol separated by spaces to say: for element ‘logo’ that is a direct child to ‘header’, do this. IE6 and below don’t understand parent-child selectors, and skip right over them. So, we have effectively hidden this entire CSS rule from those browsers.

#header > #logo { /* FOR ALL BUT IE */
	background: url(images/logo.png) no-repeat left top;
}

Next, we would follow that with an IE-specific hack.
As it turns out, IE5.5 and IE6 think that it’s possible have an element above the HTML element. Fortunately, all other browsers on the planet know better, so they skip the next rule because it says: For all elements (*) with this selector path starting above the HTML element, do this.

And this is where we’d add our IE-specific alpha transparency filter.

* HTML #logo {/* PNG Alpha IE Win ONLY */
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (src='images/logo.png', sizingMethod='scale');
}

What we’ve done here is display a transparent PNG natively in all browsers except for IE6, and displayed the same graphic via a proprietary alpha filter only in IE6.

For most of you who have been doing CSS for a while, this is nothing new. I’m only doing this as a precursor to the cleaner way that I want to introduce you to shortly. So, stay tuned.

Notes:

Find out more about the attributes of AlphaImageLoader at MSDN