At 2/3/2010 09:56 AM, Troy Harshman wrote:
>If I'm understanding correctly, you want each item in your menu to
>have the same dimensions. You would just need to add height and width
>then. Such as...
>
>#nav-menu a {display:block; height:30px; width:60px;}
>
>If you want them to grow with changes in browser text settings than
>you would size then using ems or percentages. If your navigation isn't
>using any pop-up or drop-down menus, then you generally don't need
>JavaScript unless you're doing something out of the ordinary.Of course the big problem with vertical dimensions is that plain text is, for practical purposes, unpredictable when it enlarges via text-only zoom within a confined width. At some point during enlargement, multi-word text will wrap around; at exactly what point it wraps will depend on the font the browser uses to render it, something you can suggest in the stylesheet but not control. Even if you set your block heights in ems to enlarge with the text, the framework will break when one of the menu items wraps -- if it's inside a container whose width does not expand equally with the text. Solutions that I'm aware of include: 1) Don't let the text wrap. This means not containing it in a fixed-width block (setting the container's width in ems). This might mean a) allowing the menu item blocks themselves to wrap so that very large text will produce a multi-row menu or b) allowing the menu to widen past the viewport margin creating a horizontal scroll. I really dislike inflicting horizontal scroll so I prefer a). 2) Mark up the menu in a table or style it as a table to take advantage of the cells on one row maintaining a fixed height. You will still have the problem of keeping the anchors a consistent height; block elements naturally fill their containers horizontally but not vertically. You can assign the hyperlink href to the table cell td itself in HTML5 or using JavaScript, and fall back to different-height anchors for others. 3) Use client-side scripting to adjust all the anchor heights when text size is changed, and fall back to different-height anchors in user agents in which scripting is not running. Regards, Paul __________________________ Paul Novitski Juniper Webcraft Ltd. http://juniperwebcraft.com ______________________________________________________________________ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
