SFS Site From Scratch

I was designing a site today and going through my normal cross browser testing and of course IE6 let me down again. Internet Explorer 6 just is too picky. I really like the direction IE7 is heading. Especially from a web design stand point. So much easier to work with.

The Problem

Well I was creating a horizontal menu using ul (unordered lists). Rather than use the normal in my CSS I decided I wanted to use floats and floated all my li (list items) within my ul to the left. The reason for me using float is because inline keeps adding and extra space when I do inline and I needed my li's to snug right up against each other. I also needed each li to use because I was using a background image and created some hover effects and active effects. You'll see the new site once it launches at RuffHouse. It's the top navigation.

What was happening with my li's was that they were stretching as wide as the ul container was. So for the most part my horizontal menu became a really wide vertical menu. I did some looking into things and found out that it had to be a white-space issue. One problem that I was running into was that all the other browsers worked. It was just IE6 and I'm sure earlier that were having the issues. To get around that I just decided to use the _(underscore) hack in my style sheet for any elements that needed to be different than the other browsers. If you are not familiar with the different CSS Hacks check out this great resource for all the internet CSS browser hacks.

It may make your code not look so perfect when you do it and your CSS might not validate, but the XHTML validation is much more important anyways. To get around the inline hack I'm using you'd end up creating much more code to do it the way the CSS Nazi's do it. That will just add bits of loading time for every character so I'll do the hack.

The Code

Here is an image so you can see what it looked like visually:

Here is what my old CSS elements looked like before I tweaked them to work in IE6:

Here is what is looked like after I made my changes: Good Top Nav Here is what my new CSS elements look like now that I tweaked them to work in IE6:

I did have to make a negative margin on something because of some minor spacing issues, but I just hacked that with the underscore hack.

That fixed my problem.

Why that Worked?

The reason that worked is pretty simple. If you know much about white-space it controls a lot of the way things wrap. It's one of those elements that you don't use too often. The white-space made it so it didn't wrap and then setting the width to 1px forced the li to widen because the text was wider than 1px and it wouldn't wrap to another line. Just a reminder the _(underscore) hack just makes that code work for specific browsers and IE6 happens to be one of them. It works for IE4 to IE6.

Let me know if it worked or not and if you have any comments or additional questions.