Drupal and Menus
Submitted by prophead on 13 August, 2007 - 15:36Well, it all starts with a style sheet that Drupal loads during the installation process. There's a mandatory core module called "system" that gets installed, along with some related CSS files called admin.css, default,css and system.css. these files get quietly buried on the modules/system directory structure and live happily ever after. That is, until someone such as myself decides to muck with the menu styling!
Now a reasonable person who is having trouble with the menu styling would probably take a look at the modules/system/default.css file to see if there is anything in there that is being inherited by the themes's style sheet. And when they do, nothing is found that pertains to the default menu styling. So it must be a theme issue. Well, not really. The modules/system/system.css file is the keeper of the default menu-related CSS classes:
/*
** Menus
*/
ul.menu {
list-style: none;
border: none;
text-align:left;
}
ul.menu li {
margin: 0 0 0 0.5em;
}
li.expanded {
list-style-type: circle;
list-style-image: url(../../misc/menu-expanded.png);
padding: 0.2em 0.5em 0 0;
margin: 0;
}
li.collapsed {
list-style-type: disc;
list-style-image: url(../../misc/menu-collapsed.png);
padding: 0.2em 0.5em 0 0;
margin: 0;
}
li.leaf {
list-style-type: square;
list-style-image: url(../../misc/menu-leaf.png);
padding: 0.2em 0.5em 0 0;
margin: 0;
}
I finally realized that IE does not seem to always recognize the overrides present in the theme's style.css file and/or treats inheritance differently than FF. Although the modules/system/system.css file is typically loaded before the theme's style sheet, it appears that IE gets confused about what takes precedence in defining the values for margins and padding.
So how does one fix this? I take the easy way out. I comment out all the menu-related CSS in the modules/system/system.css file and start with a "blank slate." That way I know that whatever is in the theme's stye.css file is the final authority. A non-elegant solution I know...but it works!










