Dropdowns And Floats

But first, what if I put together a forums system for Ruthsarian-related stuffs? It’s something that’s been on the back burner for a while but I got an e-mail suggesting it and that got me thinking a bit more about it. Any interest there?

I intend to get the latest copy of WordPress installed on this server and give it another go. If all goes well, I’ll probalby move to that platform and ditch MT.



It looks like the secret to CSS-based dropdown menus is to float everything. There are a lot of rendering bugs in IE that only go away when I start to float things. Rendering bugs that have existed since IE 5.0 are still there in IE 7. IE 7, however, now implements the :hover pseudoclass, meaning there’s a light at the end of the tunnel. There will be a day when JavaScript will not be needed to create dropdown menus that can be used by the majority of the web user base.

But IE7 still has problems. There are new bugs with the old dropdown system I used (as seen in Tank!). IE7 doesn’t like it at all. This is why it’s taking so long to get a new system put together. I’m trying to get something that works with IE7 and previous versions of IE. Opera and FireFox and Safari have no problems with the basic stuff I’ve done in the past. It’s really just IE that’s causing problems. Problems that, it seems, can be solved by using floats.


Here’s the deal. All the lists that pop-up are absolutely positioned. This means I don’t really have to bother with any sort of clearing element at the end of the item list that pops up. This is nice. It means I don’t have to worry about getting into the business of clearing.

What’s the problem with clearing?

Well, the purists believe that web pages should not contain extra markup that provides no meaning to the document. So an empty DIV being used to clear things out is considered bad form. Still, I use this method quite a lot and it appears to be the solution recommended by the w3.

W3 be damned, the purists want to be rid of that extra markup. I tend to agree too, even if I don’t practice what I preach. As a result, there have been severalh different methods developed to clear floats without the use of extra markup.

But those methods are either very specific to the application (for example, the overflow:auto clips the menus that pop to show only that bit which appears in the root menu.. ick) or are very hacky and will break in IE7 anyways (such as the P.I.E. method).

But guess what? The tried and true W3 supported method still works. Which is why, for now, this is the way I think all web developers will want to go. It’s the most compatible and the least likely to break in future/obscure browser platforms.

Now you can be clever and do this without extra markup. If you have an element that will follow your menu, an element you know will always be there, you can apply a clear:both; to that element. But this really isn’t possible in something like a skidoo layout where a clear is used to get the #outerColumnContainer element to hold all 3 columns (thus allowing for the borders on that element to carry the full height of the page and minic side-colum background colors). In that instance an empty, clearing element must be put to use. But the overflow:auto; clearing hack might apply there (I haven’t tried it yet, and won’t use it on any existing layouts, but only future layouts where applicable).

The point I want to make to you is that you shouldn’t be afraid to use an empty element to clear things out. It requires no hacks, is w3 approved, and is the most compatible solution out there.

In a world where us web developers have to balance compatibility with proper page design, this is probably the best solution.

So You’ve Got Something?

No. Not yet. I am working on my new menu system but I don’t have anything to offer up yet. Just passing along notes on my experience thus far.

A Book?

I’m going to write a book. A web design book. Or at least that’s the plan. I don’t have any book deal, I’m not pursuing one either. I’m looking to do a proper, self-published book. A friend passed along a magazine article that gave instructions on how to get a book published and up on Amazon.com for under a thousand bucks. Plus I’ve always wanted my own ISBN number.

The math works out that if you can seel about 100 or so copies of the book, the thing pays for itself and everything after is cake. But I’m less about the money and more about the experience. Besides, it seems everyone with a copy of FrontPage is publishing web design books these days. I might as well add more clutter to that field.

But I plan on doing it differently in that it will contain about half design philosophy and half actual examples. It won’t be a CSS book. It will be a web design book. The philosophy half will essentially be an rehash of what I wrote in my Web of Information series (read that from bottom-top… blogs aren’t made for this kind of writing).

The hope is that the philosophy half of the book will still be relevant 10 years from now, whereas the examples half will probably be irrelevant at that point.

But this is just in the “oh, what a nifty idea” stage. And I’m joining the mass of about 4 billion people out there who have that nifty idea. The trick is to actually do it. We’ll see.


2 thoughts on “Dropdowns And Floats

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s