It is popular to use ul and li elements float them and set them to width:auto in CSS in order to create a horizontal list of self-sizing boxes. These can easily be used to create horizontal navigation or a listing of tabs, and it works very well. However, there is one caveat; given the right mix of CSS this solution doesn’t work properly in IE 6.

To create this scenario, we can simply use something like the following:

<style type="text/css">
    ul {
        height: 30px;
        overflow: hidden;
    }
    ul li {
        float: left;
        width: auto;
    }
    ul li a {
        display: block;
        height: 30px;
    }
</style>
<ul>
    <li><a href="#">Link 1</a></li>
    <li><a href="#">Link 2</a></li>
</ul>

This will show the problem in IE 6 nicely. The problem is that IE 6 interprets this mix of CSS and decides that each li element should actually expand out to 100% width.

I’ll explain how to fix this issue and provide and example page so you can easily play around with the HTML and CSS yourself.

Fix #1

A quick way to tame the IE 6 beast is to give the offending element a width of 0. Counter to intuition, this won’t force the element to an infinitely-small width; rather, it will force IE 6 to automatically-size the width of the element. However, this has an immediate problem, all other browsers will see this width of 0 for what it really is and render nothing for that element since, well, it has a width of 0.

There are a few different ways to correct this:

1. We can use a hack to introduce the width 0 command to IE 6 without having the other browsers take notice. This works and can be implemented by using _width:0 to specifically target IE 6. For example:

   #nav ul li {
       width: auto;
       _width: 0;
       float: left;
   }

2. Since using a hack isn’t always preferable, another option is to selectively-load a CSS document that adds the IE 6-only behavior. In the HTML document, you first load the standard stylesheet followed by the IE 6-specific stylesheet:

   <link rel="stylesheet" href="/css/style.css" type="text/css" media="screen" />
   <!--[if lt IE 7]>
       <link rel="stylesheet" href="/css/lt-ie7.css" type="text/css" media="screen" />
   <![endif]-->

   In the IE 6 stylesheet, add the width:0 style:

   #nav ul li {
       width: 0;
   }

3. We can use CSS selectors that are ignored by IE 6. This doesn’t use a hack and also avoids using a separate stylesheet.

   #nav ul li {
       width: 0;
       float: left;
   }
   #nav ul > li {
       width: auto;
   }

Each of these methods work nicely, however, after some additional testing, a new limitation becomes clear. For some reason, IE 6 now decides that only one word should be permitted in each box. Basically, it seems to word-wrap all additional words, effectively cutting them off. Thus the need for another fix.

Fix #2

The solution to preventing IE 6 from truncating each element is simple: prevent word wrapping. This is easily done using the white-space:nowrap CSS instruction.

Using the third example above, we can change it to the following to apply this next fix:

#nav ul li {
    width: 0;
    float: left;
    white-space: nowrap;
}
#nav ul > li {
    width: auto;
}

Example Page

I built an example page that shows what is actually occurring during each step of this process and shows how each fix improves the rendering in IE 6. The final example renders as it should.

Here is a screenshot that shows how it renders in IE 6:

Example Rendering in IE 6

Today I  have yet another entry on HTML and CSS. Today it is how to vertically center content in HTML using CSS.

You’d think that there would be a standard definition of how to vertically center any content by now, but there isn’t. There are a variety of methods out there that do this. I frequently see people using the line-height CSS property to vertically center content. While this appears to work, it isn’t very flexible, only works properly if there is only one line of text, and doesn’t work in all situations.

I found Yuhu’s Definitive Solution with Unknown Height which looks great, works properly with all major browsers, doesn’t have the limitations I’ve seen in other solutions, and is quite simple to implement. Basically all you have to do is have three divs wrapped around the content you wish to vertically center and use specific styling for those divs.

The following code is what does the magic. Replace the comment with the content to be vertically centered, change the height to match the vertical height of the container, and you’re set.

<div style="display:table; height:400px; #position:relative;">
    <div style="#position:absolute; #top:50%; display:table-cell;
vertical-align:middle;">
        <div style="#position:relative; #top:-50%">
            <!-- content to be centered -->
        </div>
    </div>
</div>

I built a quick example document that shows how I applied the rules via a style block in the head to keep the HTML clean.

As with my taming HTML lists fix, I tested this successfully on the following browsers:

• OS X
  • Firefox 3.5
  • Safari 4
• Ubuntu (Linux)
  • Firefox 3.5
  • Google Chrome 4
  • Konqueror 4.2
  • Midori 0.1.2
  • Opera 10
• Windows
  • Firefox 3.5
  • Google Chrome 4
  • Internet Explorer 6, 7, and 8
  • Safari 4

Thank you Yuhu for the great solution.

Anyone that works with HTML and CSS will tell you that positioning things exactly where you want them to be is often times difficult. If you want to position something somewhere vertically, it becomes even worse.

I just finished working on a theme where I needed to force the footer of the layout to the very bottom of the page. While logically putting the footer after all the other content is easy, making it sit at the very bottom of the page even when the content doesn’t take up enough space to push it down there is quite difficult.

After struggling with getting this right for a couple of hours, I finally found a site that has done all the hard work for me. CSS Sticky Footer is the site that saved my sanity.

CSS Sticky Footer provides a solution that sticks the footer to the bottom of the page in a cross-browser compliant manner. The site reports, and I can confirm, that it works with Internet Explorer 6 through Internet Explorer 8,  Firefox, Google Chrome, Safari, Opera, and Konqueror.

Since the implementation could change, I recommend that you visit the site to get details; however, just in case something happens to the site, I’m going to add the solution here as well.

HTML

<div id="wrap">
    <div id="main" class="clearfix">
        <!-- non-footer content -->
    </div>
</div>

<div id="footer">
    <!-- footer content -->
</div>

CSS

/*
Sticky Footer Solution
by Steve Hatcher

http://stever.ca

http://www.cssstickyfooter.com

*/

* {
    margin: 0;
    padding: 0;
}

/* must declare 0 margins on everything, also for main layout components
use padding, not vertical margins (top and bottom) to add spacing, else
those margins get added to total height and your footer gets pushed down
a bit more, creating vertical scroll bars in the browser */

html, body, #wrap {
    height: 100%;
}

body > #wrap {
    height: auto;
    min-height: 100%;
}

#main {
    padding-bottom: 150px;  /* must be same height as the footer */
}

#footer {
    position: relative;
    margin-top: -150px;  /* negative value of footer height */
    height: 150px;
    clear: both;
} 

/* CLEAR FIX */
.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
.clearfix {
    display: inline-block;
}
/* Hides from IE-mac \*/
* html .clearfix {
    height: 1%;
}
.clearfix {
    display: block;
}
/* End hide from IE-mac */

Sample

I have a sample page available to see this in action.

Many thanks to Steve Hatcher who made my job a lot easier.

Update

Someone reported that they have a roughly 45 pixel white gap at the bottom of footer of the sample and that they saw this on Firefox 3.5.3 on Vista. I’ve tested this on the exact same OS and browser, and I don’t see it. I’ve tested this on a huge variety of platforms, browsers, and browser versions, and I can’t see the gap. Does anyone else see any odd rendering?

It seems that every browser rendering engine has a completely different way of rendering lists. I recently had the frustrating job of getting them all to play nicely together.

The CSS I ended up using is quite simple and works across all the browsers I tested (list at the bottom).

This is the magic bit of CSS:

ul, ol {
    list-style-position: outside;
    margin: 0 0 0 15px;
    padding: 0;
}
ol {
    margin-left: 20px;
    *margin-left: 24px; /* targeted IE 6, 7 fix */
}
li {
    margin: 0;
    padding: 0;
}

This CSS forces all the browsers to play by the same rules. The end results are nice and clean.

The left margins are necessary to get all the browsers to not clip part of the bullet/number; however, you can change this left margin on ul/ol elements contained within the primary ul/ol if you need to adjust the indentation of each sub-list.

Each browser that I tested rendered the same thing, albeit with slightly different bullets or padding in front of the number.

The following are the browsers I tested:

• OS X
  • Firefox 3.5
  • Safari 4
• Ubuntu (Linux)
  • Firefox 3.5
  • Google Chrome 4
  • Konqueror 4.2
  • Midori 0.1.2
  • Opera 10
• Windows
  • Firefox 3.5
  • Google Chrome 4
  • Internet Explorer 6, 7, and 8
  • Safari 4