@charset "iso-8859-1"; /******************************************************************************* * hnav.css : 2005.09.01 : Ruthsarian Layouts * ------------------------------------------------------------------------------ * responsible for the horizontal navigation elements, one of which is usually * placed below the masthead but on top of the columns. * * this seems awfully complex for something seemingly so simple, no? the big * issue here is we need to make the menu items inline elements. we could make * them block elements and float them left or right, but that creates a lot of * problems with compatibility and how elements are ordered on-screen versus * source. just trust me on this, inline is the way to go here. * * the main reason people would float these elements rather than go inline is * because padding and margin values have an effect on surrounding elements. * meaning if an element is 20 pixels tall, and has 5 pixels of padding on * top and bottom, a browser is going to treat that element as 30 pixels tall * when rendering the page. but for an inline element (versus a block element) * the browser treats it as 20 pixels tall. That padding will still be applied * and if you've got a background color on this element, you'll see that color * extend 5 pixels into the elements immediately above and below this inline * element with padding. * * in short: vertical padding on inline elements can make things look really * bad. * so we need to work around it. thus all of the hacks you see in this * stylesheet. * * Example HTML: *
* * What's with the funny placement of each tag's closing less-than character? * Whitespace between elements inside the unordered list can cause render * problems in some web browsers. This style of mark-up is valid (X)HTML, * easy to read, and removes all whitespace between the elements. * *******************************************************************************/ ul.hnav { border: solid 1px #000; display: block; text-align: center; } ul.hnav, ul.hnav li { list-style-type: none; margin: 0; padding: 0; } ul.hnav li { display: inline; } ul.hnav, ul.hnav li a { /* need to mimic veritcal padding on .hnav and child anchor elements * because the anchors are _not_ block elements. since they are not * block elements web browsers will not expand .hnav to contain them * even with the extra padding. by applying the same padding to both * the parent .hnav _looks_ like its containing the child anchor * elements. */ padding-top: 3px; padding-bottom: 4px; } ul.hnav li a { margin: 0 -1px 0 0; padding-left: 10px; padding-right: 10px; /* short-hand padding attribute would overwrite top/bottom padding set in a previous rule */ border-left: solid 1px #000; border-right: solid 1px #000; white-space: nowrap; /* keep it so a button doesn't wrap */ } ul.hnav li a:link, ul.hnav li a:visited, ul.hnav li a:active, ul.hnav li a:hover { text-decoration: none; cursor: pointer; } ul.hnav li span.divider { display: none; } * html ul.hnav li, * html ul.hnav li a { width: 1%; /* IE/Mac needs this */ display: inline-block; /* IE/Mac needs this. CSS validators will complain about this rule, but it's okay. */ /* \*/ width: auto; display: inline; /* reset above hack */ } * html ul.HNAV li a { width: 0.01%; /* IE/Win 5 needs this. note incorrect case in selector */ } * html ul.HNAV { /* IE/Win 5 will automatically expand ul.hnav vertically to contain * padding on its child elements. so we need to remove the vertical * padding using an incorrect case selector which is ignored * by IE 6+ and IE/Mac, but still processed by IE/Win 5. */ padding-top: 0; padding-bottom: 0; } /******************************************************************************/