Sent by Francois Jordaan on 7 September 2007 16:04
Here's the test page:
http://www.fjordaan.net/tests/nav-test.html
(Table-based top, list-based bottom)
I've been doing CSS-based layouts for 5 years, but I just can't get a
standards-based approach to work as well as a table for this horizontal
navbar. This is the best I can get it.
This is a liquid layout. The navbar has to cope with different window sizes,
and resized fonts. (The last item is supposed to float right, by the way).
Advantages of table method:
- Button background colour extends to full height of navbar
- More resistant to resizing browser and fonts without visually "breaking"
layout
- Copes better with increased font size (buttons don't crop text)
- More consistent cross-browser
- Easier to maintain (if nav labels change, button percentage widths need to
be changed)
- Doesn't require "clearer" div
Advantages of CSS method:
- Best practice for accessibility and semantic markup
- Can go narrower without nav going outside browser window (buttons
wrapping)
- Can float:right the last item in the menu.
Personally, I think the accessibility risks of the table is negligible in
this case, but I'm working for a public-sector client. If anyone agrees with
me, I'd appreciate help in making the argument!
francois
p.s. I asked CSS-discuss about a similar problem back in 2003,
http://archivist.incutio.com/viewlist/css-discuss/29029
but ended up using a table back then.
______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
