Browse: Home / Lists

Lists

Essentia Home Page Redeaux

By 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 , | Tagged , , , , , , | Leave a response

Multiple Column Lists

By 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 | Tagged , | Leave a response