OK so I’ve been working on a auto-resizing menu bar for quite a while now, but its compatibility was extremely limited (Firefox 3-3.5, IE 7-8) so one day I was goofing off and moved the data from a list to tables, without changing much (if any) measurement data and bam! it worked. it worked in every single version of Firefox, it worked in Webkit browsers and opera now, It worked in IE (the menu bar not the margins) all the way down to IE4! so I went back and confirmed that all my css measurements were correct on both versions. they were. So the simple fact that they were tables made everything magically delicious. But the fact is they’re still tables. so before I move the design to the main page, I’m making one last plea, does anyone know a better way to get this to work exactly how it is now with lists or some other friendly entity?
it doesn’t work completely in opera or webkit, the right-hand side doesn’t "stick" to the header like it does in firefox and IE. also I would like to be firefox 2 compatible as its still used rather often. I’m having trouble finding why tables are bad in this case now. I’ve removed the css from my page to see if anything got screwed up, but it was sitting there fine and dandy. i’m wondering if this is one of those "exceptions" to the don’t use tables rule.
in IE 6 and below it "staircases" the lists instead of lining them up, in case you were wondering.