Lists
Essentia Home Page Redeaux
By Josh on May 31, 2011
We recently updated the Essentia Health home page with a reasonably crazy location menuing system of their invention. We reused the data from the find services page, extra customized to do weird things of course. The menu itself consists of 4 positioned show/hide-ish boxes, a different width for MN, and a super/suckerfish menu from there. Of note are the issues we had with pre IE9; with both the iE z-index bug (the list items following the subs, because we had multi-column had this nasty overlappingness that needed resolution) and with the IE cleartype bug causing odd stuff with the transparent png animations.
For the z-index bug, we used some js to alter the z-index of each li.
The cleartype bug was a pain in the ass, and the couple of fixes I’ve seen in the past weren’t taking due to everything else. So basically I just made a png-8 alternative for IE 7-8. I hate IE. Trying to get IE compatible with CSS type rounds and shadows was also a failure.
Nate also made some multi-column madness that made the columns read more book style and some other weird ordering:
1 4 7
2 5 8
3 6 9
Unfortunately even IE9 doesn’t like the new CSS3 column magic… which rules. IE sucks.
Posted in Javascript, Updates | Tagged cleartype, Columns, IE, jQuery, Lists, superfish, z-index | Leave a response
Multiple Column Lists
By Bryce on February 26, 2010
Make multi column lists using only one ul
HTML
<ul class="double"> <!-- Alter ID accordingly --> <li>CSS</li> <li>XHTML</li> <li>Accessibility</li> <li>Usability</li> <li>Web Standards</li> <li>PHP</li> <li>CSS3</li> <li>HTML5</li> </ul>
CSS
ul { width:760px; margin-bottom:20px; overflow:hidden; } li { line-height:1.5em; border-bottom:1px solid #ccc; float:left; display:inline; } .double li { width:50%;} /* 2 col */ .triple li { width:33.333%; } /* 3 col */ .quad li { width:25%; } /* 4 col */ .six li { width:16.666%; } /* 6 col */
Via: csswizardry.com
Posted in CSS | Tagged Columns, Lists | Leave a response
Recent Comments