Hi All, I'm converting a table-based layout to CSS, and have run into some complications with a horizontal navigation menu. There are always five buttons on the menu, but the text varies. There's a sample table-based layout here:
http://www.washington.edu/doit/Stem/ Here are the things we like about the table-based menu that we'd like to preserve with CSS: 1. Buttons are equal width, each being 20% of the full screen width 2. If buttons contain excessive text, all buttons expand to have equal height 3. Font size is specified in relative units so it can be enlarged in IE and scales well 4. Hovering over a button highlights the entire button, not just the link text. 5. Button text is vertically centered. So far, I've marked up the menu as an unordered list of links inside a div. I'm floating each list item left, and have deployed the usual tricks to attain goal #2, including setting a ridiculously high positive value to each list item's padding-bottom, then reining it back in with an equally ridicules negative value for margin-bottom. This did the trick for getting all the buttons to fill the container vertically. Now, I'm struggling with goal #4. How do I get the anchors to fill the full height of their parent list item? List items currently have margin and padding both set to 0, and if all buttons are equal height the anchor *does* fill the entire button. However, the buttons are seldom of equal height. The techniques I've used to stretch list item height to attain vertical equality aren't stretching the anchors along with them, and I can't figure out how to get that to happen. I've tried setting the anchor's height and/or min-height to 100% and/or auto, but this didn't work in any browser. If I specify a large enough pixel value for the height, this does fix the problem, but not if the user enlarges their font size or reduces the width of their browser window to the point where the buttons grow. I'm not absolutely opposed to using Javascript to do this full-button highlighting, but I'd rather do it with CSS if possible. The current mockup is here: http://staff.washington.edu/tft/menutest/test.html Thanks for any insights! Terry ______________________________________________________________________ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- 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/
