[TYPO3] Two strange problems with IE and stylesheets

Heiner Lamprecht heiner at heiner-lamprecht.net
Sun May 21 15:10:17 CEST 2006


Hi everybody,

I have two strange problems with IE.  On
http://www.heiner-lamprecht.net/css_tests/menu_layout.html you can
see five menus, which are made with nearly the same HTML-code, all
use the same stylesheet.

When opening the page in firefox, opera or konqueror, all menus look
the same.  But in IE, there are some differences:

In the two menus on the left there are vertical spaces between the
entries.  The two on the right don't have them.  The reason is the
HTML-code:  The left have linebreaks between the entries, while the
others are in one single line:

---------------------------------------------------------------------
<div class="navMenu">
  <ul class="first">
    <li><a href="index.php?id=6" title="Über mich">&Uuml;ber mich</a></li>
    <li><a href="index.php?id=2" title="Photographie">Photographie</a></li>
    <li><a href="index.php?id=19" title="Reisen">Reisen</a></li>
    <li><a href="index.php?id=3" title="Filme und Bücher">Filme und B&uuml;cher</a></li>
    <li><a href="index.php?id=4" title="Software">Software</a></li>
  </ul>
</div>
---------------------------------------------------------------------

And the other:

---------------------------------------------------------------------
<div class="navMenu">
  <ul class="first"><li><a href="index.php?id=6" title="Über mich">&Uuml;ber mich</a></li><li><a href="index.php?id=2" title="Photographie">Photographie</a></li><li><a href="index.php?id=19" title="Reisen">Reisen</a></li><li><a href="index.php?id=3" title="Filme und Bücher">Filme und B&uuml;cher</a></li><li><a href="index.php?id=4" title="Software">Software</a></li></ul>
</div>
---------------------------------------------------------------------

But that's not the only difference.  You will notice, that the first
and the third have a small icon as last entry.  That has an effect
on the hover-behavior:  When you move the mouse over an entry, the
complete item is highlighted for the first and the third menu.  But
for the two others you have to move the mouse across the text instead
of only the colored background.

What is even more strange to me, is the last menu:  Here the
hover-behavior is the same as for the other menus with icon.  But
the icon is located in an other ul-element!

Maybe I'm blind or only too tired.  But can anybody please give me
any hint for a solution to this problem?  What I noticed is, that at
lease the hover is correct if I comment out the float- and width-value
for the div container, that contains the menus.  But that's not a
solution.


Any ideas?


Thanks,


    Heiner

-- 
    heiner at heiner-lamprecht dot net    GnuPG - Key: 9859E373
  Fingerprint:  3770 7947 F917 94EF 8717 BADB 0139 7554 9859 E373



More information about the TYPO3-english mailing list