Center... float... IE... they don't mix!

I am about to drop a metric butt-load of geekiness on you right now. I have had a LONG standing issue with certain types of navigation menus that float list items (still block elements) in order to apply graphics and dimension to anchors that are made block level (which is inline by default)... the problem lies in positioning the list itself. Because the list items have been floated the entire list itself wants to float that way and no amount of dickering with the code can convince it otherwise.

What I would really like to do is center that list and for years this has baffled me. Don't get me wrong, there are plenty of styles of navigation that can be centered, but this very specific one, one which allows for all sorts of graphical hover states, active states, etc... I have spent hours trying to solve this puzzle.

Out of nothing more than absolute desperation I thought to try applying inline-block to the <ul>. inline-block, however is so poorly supported that it has made it a nearly useless function of CSS 2.1, so applying it here would have done little more than satisfy my curiosity. And what would you know... it worked... In Safari!

Well I am that much closer but there are two more issues now; Firefox has nothing more than wet dreams about supporting inline-block and IE only supports inline-block on inline elements (which a list is not). The fix for Firefox is not all that tough since they have a proprietary display state, display: -moz-inline-box; that works... sometimes. IE, on the other hand, had me stumped. That's when I found this website who credits the genius of this guy for coming up with a brilliant solution.

I won't get into the full course meal here (you can read that for yourself) but what it came down to for me was this;

• overcome IE's has-layout bug which can be done with either height: 1%; or the proprietary zoom: 1; (I had to use the latter since the former defeated the layout I needed in this instance)
• Next I needed to tell IE that the block element that I turned into inline-block was actually inline... confusing? Anyhow, not wanting anyone else to see this I have to precede it with a star, like this *display:inline;
• so the end result was this:
  

  ul#myList {
   display: -moz-inline-box; /* for Mozilla*/
   display: inline-block; /* for real browsers */
   zoom:1; /* fix for IE has-layout bug */
   *display:inline; /* IE thinks a block is inline */
  }

So what does this mean for me? Well I have a few themes out there that will get an update soon to take advantage of my new centering ability and a few that I have been holding off making because of the former limitation. And one theme that is about to be released... :)