By markusveralius on

I can't get the unordered lists to look the same (or similar - that would do) in firefox, IE 6 & 7. Vertical alignment / spacing problem.

here is the code, modified from the Amadou theme:

/*
** 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:disc;
  list-style-image: url(../../misc/menu-leaf.png);
  padding: 0.1em 0.5em 0 0;
  /*display:block fixes layout in IE6 but breaks it in firefox. Doing it this way does the reverse.*/
 /* display:inline;*/
}
li a.active {
  color: #000;
}
td.menu-disabled {
  background: #ccc;
}
ul.links {
  margin: 0;
  padding: 0;
}
ul.links.inline {
  display: inline;
}
ul.links li {
  display: inline;
  list-style-type: none;
  padding: 0 0.5em 0 0;
}
.block ul {
  margin: 0;
  /*padding: 0 0 0.25em 1em;*/
}

I am using firebug and internet explorer developer toolbar and both show the problem is to do with ul.menu and / or ul.leaf. However whatever i change, the problem remains that there is too much vertical space between li items. I have tried turning off margins, padding, but the large gaps remain. Big changes happen when I alter display:block or display:inline in li.leaf, and swapping these values alternately fixes the problem in ie or firefox, but not both at the same time.

Can anyone help, with a hack or otherwise?

Thanks,
Mark

⋅ Categories: Drupal 5.x

Comments

mfer’s picture

mfer commented

If you can get it to look right in ie or firefox you might want to use a conditional style sheet. Something like...

<!--[if IE]>
<style type="text/css" media="all">@import "/sites/all/themes/mytheme/ie.css";</style>
<![endif]-->

This sheet will only load for ie. Just a thought.
--
Matt
http://www.mattfarina.com

cmsproducer’s picture

cmsproducer commented

You can easily isolate and create different selectors for each of the browsers by exploiting a difference in their tolerance for rogue characters in the CSS code. Straight to the solution.

Example:
li.leaf {
list-style-type: disc;
list-style-image: url(../../misc/menu-leaf.png);
padding: 0.1em 0.5em 0 0;
display: inline;/*setting for FF and other standards compliant browsers*/
#display: block /*setting for IE7*/
_display: block /*setting for IE6*/
}
Although the above CSS would not be declared pure by the W3C validator, it allows you to use differetn settings for each browser family by exploiting the fact that IE7 and IE6 are not thrown off by the existence of # and _ before selectors.

I have some detailed reviews of such issues and how to approach them:
Creating different CSS settings for Firefox, Internet Explorer 7 and IE 6.0 or older browsers

@import Directive in CSS - Understanding the inclusion of external CSS commands

-----
iDonny Productions: Accessibility & Web Standards-based Design & Devt., CMS & Web Branding

markusveralius’s picture

markusveralius commented

Good suggestions from both of you, thanks. The second one seems to be the best bet but then our work would need to validate. I will experiment with the two methods (while hoping that someone will send me a fix for my layout problem in addition!).

Mark

cmsproducer’s picture

cmsproducer commented

The XHTML and your page will validate OK
it is the CSS fiel that will not validate, but this will only be visible if you submit the CSS for validation, not just the page XHTML. I often struggle with validating right or making stuff that works....

I have previously used UL/LI and set display: inline; and it works inboth IE6/IE7/Firefox. I suspect that your issue may be related to the specificity of the selector and its being overriden by something else thast only IE6 can see.

Can you re-avaluate the entire CSS fiel and make sure that there are no conflicts.
Also, some versions of IE are sensitive to there being a space between the selector and the command
i.e
display: inline;
display:inline;

Let me know what the URL of your site is and I will look at the XHTML/CSS to see what needs to be fixed

-----
iDonny Productions: Accessibility & Web Standards-based Design & Devt., CMS & Web Branding

markusveralius’s picture

markusveralius commented

Very helpful, thanks. unfortunately the site is just on a development server for now so I can't show it to you. I'll get a public url sorted soon though.

Your i.e. rogue characters tip has now helped me to get rid of the excess white space in ie6. Now I need to get the bullets to show up and to fix minor problems with left / right padding.

There are two style sheets with 'menu' in them, so I have been fearing that the problem lies with conflicting css statements. (style.ccs, system.css).

i have found firebug and IE developer toolbar invaluable, but they don't help when you need a hack like yours to fix poor browser css interpretation.

cmsproducer’s picture

cmsproducer commented

Glad to have helped.
If you need to send me XHTML source, you can view source in firefox and send the results. from your CSS, I see that the bullets are set both as disc and then as an image... you need to resolve that.

If you need a custom theme built (this one will not be free though), or if you want me to review your current theme for errors and conflicts, let me know.

-----
iDonny Productions: Accessibility & Web Standards-based Design & Devt., CMS & Web Branding

markusveralius’s picture

markusveralius commented

I tracked the problem and found that if I turned off DHTML menus, all the problems I was having pretty much vanished. The only real issue now is that in IE, my bullets are a little to high and not centred vertically with the list items.

AdrianB’s picture

AdrianB commented

I guess you were struck by this, right?
Menus Shifted to the left on IE 6 and 7