By quinti on

Hi All

I'm always having problems with the menus on IE, etc..., you know...

here my proposal for system-menu.css, collapsed, expanded and leaf

li.collapsed {
  background:transparent url(../../misc/bkg-li-menu.gif) no-repeat scroll left -20px; /* LTR */
  display:block;
  list-style-type:none;
  padding:0 0 0 14px; /* LTR */
}
li.expanded {
  list-style-type: none;
  background:transparent url(../../misc/bkg-li-menu.gif) no-repeat scroll left -85px; /* LTR */
  display:block;
  padding:0 0 0 14px; /* LTR */
}
li.leaf {
  list-style-type: none;
  background:transparent url(../../misc/bkg-li-menu.gif) no-repeat scroll left 10px; /* LTR */

tested only ie IE7 and FF 3.0.1, and only probed with one submenu, but i think this way can be the best:
1st, agrouping the 3 images in one,
and 2nd, with this way (using bkg image instead list-image) is best for IE, no?, really i'm not sure

the image can be something like this:
http://www.empresasdelugo.com/misc/bkg-li-menu.gif

and the result http://www.empresasdelugo.com

what do you think?

greetings

⋅ Categories: Drupal 6.x

Comments

Jeff Burnz’s picture

Jeff Burnz commented

I like the use of a CSS sprite. I might be inclined to take more advantage of the cascade and so something such as:

.menu li {
  display: block;
  list-style-type: none;
  padding: 0 0 0 14px; /* LTR */
  background: transparent url(../../misc/bkg-li-menu.gif) no-repeat;
}
li.collapsed {
  background-position: left -20px; /* LTR */
}
li.expanded {
  background-position: left -85px; /* LTR */
}
li.leaf {
  background-position: left 10px; /* LTR */
}

Background image is good, list-style-image is problematic from time to time as you point out.

Pimp your Drupal 8 Toolbar - make it badass.
Adaptivetheme - theming system for people who don't code.
quinti’s picture

quinti commented

so perfect,
nice