CSS-Trouble with IE while placing header elements (using Plone)

Do you have a question? Post it now! No Registration Necessary.  Now with pictures!

Hi all,

I've got some annoying trouble with IE's display of my new website
header. On my site, the corporate logo shall be right-aligned:

|                                       siteactions    .             |
|                                                      |    _  _  _  |
|                                                      |___(_)(_](_) |
|                                                             ._|    +

That's where the trouble begins. I wished to see the logo on the outmost
right border of the page, even right of the siteactions. Different from
Firefox, IE mixes the position of the elements up:

|                                          .              siteactions|
|                                          |    _  _  _              |
|                                          |___(_)(_](_)             |
|                                                 ._|                |

#portal-header (div, the complete header box) which  uses 'width:100%'
and embeds #portal-siteactions (ul, the site actions, e.g. login,
sitemap, contact) as well as #portal-logo (h1, the logo).
#portal-siteactions is placed with 'float:right' and I added some
padding-right to leave space for the logo. The logo places on the right
side by using 'background-position:right center;' for the #portal-logo
definition -- at least with Firefox.

As a workaround, I tried to set 'width:100%' for the #portal-logo. But
then, IE refused to stack logo and siteactions, which both should span
the whole page width. Even explicitly setting unique z-indices didn't
make any difference.

I have compiled details including screenshots and CSS definitions at
http://www.tschirley.com/plone (67kB). I would be grateful for any hint
or suggestion.


Site Timeline