[horde] Opera float style for UL/LI

Wed Dec 8 08:46:27 PST 2004

Hello there,

about the rendering issues I told before, I took
some time to have a closer look at one of these
problems.

For example the horde main page which is rendered
incorrectly inside opera 7.52 and 7.54 for linux and windows.
This concerns the menu, which is build by a <ul>
with <li> items for each menu item.

The difference between the horde main page and other pages is
that there is a <span style="float:right"> around
the <ul>. And this seems to be the cause of the problem.

Opera does, however all other browsers do, not apply the
height style for floats around <ul>. The height of 50px which
is defined for menu inside the screen.css wont have any effect
for the <ul> in this case.

In short, this does not work with opera:

    <span style="float:right">
      <ul style="height=50px">

A quick example:

<html>
<body>
  <div style="height:50px">
    <h1 style="float:left">Welcome, username</h1>
    <span style="float:right">
      <ul style="padding: 5px">
        <li style="list-style-type: none;text-align: center;margin: 2px;float:
left;">m1</li>
        <li style="list-style-type: none;text-align: center;margin: 2px;float:
left;">m2</li>
        <li style="list-style-type: none;text-align: center;margin: 2px;float:
left;">m3</li>
        <li style="list-style-type: none;text-align: center;margin: 2px;float:
left;">m4</li>
        <li style="list-style-type: none;text-align: center;margin: 2px;float:
left;">m5</li>
      </ul>
    </span>
  </div>
</body>
</html>

Here how it looks like on Mozilla:

Welcome, username               m1 m2 m3 m4 m5

Here how it looks inside Opera

Welcome, username               m1
                                m2
                                m3
                                m4
                                m5

Removing the style information for <span> and it will look both
browsers as follows:

Welcome, usernamem1 m2 m3 m4 m5

I hope I brought some light into that one

Regards, Stephan