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.
Rene