[Plone-UI] CSS, IE, and lists

Thu Dec 21 20:38:08 UTC 2006

I'm creating a custom footer and am having enormous CSS trouble.  I'd
love to some direct help, but pointing me in the right direction would
also be greatly appreciated.  The technique I'm using is listed on
many CSS websites for creating horizontal lists, so I must be doing
something wrong.

I'm trying to display a horizontal list of contact information in the
footer.  It works okay in firefox, but completely breaks in both IE 6
and 7.  In IE, there is no division among the list items, not even
line breaks.  Probably easier to show than to describe - see the
following screenshots.

Firefox:
http://www.lashicap.org/firefox-footer.png

IE:
http://www.lashicap.org/IE-footer.png

I copied the CSS code from portal-colophon (which is a horizontal list
that works in every browser I've tried), but can't seem to make it
work in this application.  Any help would be greatly appreciated.

Kai

footer:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"
      i18n:domain="plone">
<body>
<div id="portal-footer-hz" metal:define-macro="portal_footer"
i18n:domain="plone">

  <ul>
  <li>Office Hours:<br />Monday to Friday 9-5<br />We're closed 12-1
for lunch<br /><br />464 7th St, Oakland, CA 94607</li>
  <li>Legal Assistance:<br />(510) 832-3040<br /><a
href="mailto:las at fakeaddress.org">las at fakeaddress.org</a></li>
  <li>Health Insurance Counseling (HICAP)<br />Alameda County - (510)
839-0393<br />Southern and Eastern County - (800) 393-0363<br
/>Statewide - (800) 434-0222<br /><a
href="mailto:hicap at fakeaddress.org">hicap at fakeaddress.org</a></li>
  </ul>

</div>
</body>
</html>

CSS:

#portal-footer-hz {
    background-color: &dtml-globalBackgroundColor;;
    border-top: &dtml-borderWidth; &dtml-borderStyle; &dtml-globalBorderColor;;
    border-bottom: &dtml-borderWidth; &dtml-borderStyle;
&dtml-globalBorderColor;;
    margin: 0em 0em 2em 0em;
    padding: 0.5em 0em 1em 0em;
    text-align: center;
}

#portal-footer-hz ul,
#portal-footer-hz ul li,
#portal-footer-hz ul li a {
    list-style-type: none;
    display: inline;
    text-decoration: none;
    color: &dtml-fontColor;;
    width: 20em;
}

#portal-footer-hz ul {
    display: table-row;
    list-style-type: none;
}

#portal-footer-hz ul li {
    display: table-cell;
    padding: 0.3em 1em;
}