Meta 13 Project Blog
  • Home
  • Links
  • CMS
  • CSS
  • Ecom
  • Email
  • Flash
  • Google
  • HTML
  • Javascript
  • OS
  • PHP
  • SEO
  • SQL
Browse: Home / Lists

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

Tags

.htaccess Advanced Custom Fields Bower c5 cms Composer Concrete 5 Concrete5 Cron CSS3 Cycle Cycle2 fancybox FancyBox2 Foundation Genesis Google Fonts Google Maps Google Webfonts Google Web Fonts Gravity Forms Grunt html5 HTML5 Boilerplate IE7 iPad iPhone jQuery lightbox Lists Magento Media Queries mobile pdf Plesk PrettyPhoto Responsive SASS SCSS static block Twitter typekit Video WordPress YouTube

Meta

  • Log in
  • Entries feed
  • Comments feed
  • WordPress.org

Recent Comments

  • Bryce on Responsive Email Templates
  • Justin on Mail Server Settings (Microsoft365)
  • Justin on Mail Server Settings (Microsoft365)
  • Bryce on Mail Server Settings (Microsoft365)
  • Justin on Mail Server Settings (Microsoft365)

Authors

  • Aaron Huisinga
  • Bryce
  • Darin
  • Jason
  • Josh
  • Justin
  • master
  • Nathan
  • nick
  • Paul

Archives

  • March 2016
  • July 2015
  • March 2015
  • February 2015
  • January 2015
  • December 2014
  • September 2014
  • July 2014
  • June 2014
  • May 2014
  • December 2013
  • November 2013

Copyright © 2023 Meta 13 Project Blog. Powered by WordPress and Hybrid.