TMENU_LAYERS: Inkompatibilität im IE

Hallo!

Ich würde gerne TMENU_LAYERS einsetzen, da Textmenüs entsprechend schneller laden. Doch ich ärgere mich vor allen Dingen mit den folgenden drei Kompatibilitätsproblemen im IE (getestet unter XP SP2 mit IE 6):

- Formatierung zu stark auseinandergezogen
- endlose Breite der 2. Menüebene (???)
- Offset unterschiedlich gegenüber anderen Browsern

Wer kann mir da weiterhelfen?

Zu sehen gibt es den Prototyp unter: http://web13.hostspirit.ch

Hier der Menü Typoscript code:

  # Menue erzeugen
  marks.MENUE = HMENU
  marks.MENUE.1 = TMENU_LAYERS

  # Hauptmenu
  marks.MENUE.1 {
    hideMenuWhenNotOver = 150
    relativeToTriggerItem = 1

    topOffset = 18

    expAll = 1

    NO {
      allWrap = <td nowrap=""> | </td>
      ATagBeforeWrap = 1
      ATagParams = class="Menu"

      10 = text
      10.text.field = title

    }
  }

  # Navigation 2. Ebene (Submenu)
  marks.MENUE.2 = TMENU_LAYERS
  marks.MENUE.2 {
    hideMenuWhenNotOver = 150
    relativeToTriggerItem = 1
    topOffset = 227
    leftOffset = 486
    expAll = 1
    NO {
      allWrap = <td nowrap=""> | </td>
      ATagBeforeWrap = 1
      ATagParams = class="SMenu"

      10 = text
      10.text.field = title
    }
  }

  # Navigation 3. Ebene (Submenu)
  marks.MENUE.3 = TMENU_LAYERS

  relativeToParentLayer = 1

  marks.MENUE.3 {
    NO {
      allWrap = <td nowrap=""> | </td>
      ATagBeforeWrap = 1
      ATagParams = class="SMenu"

      10 = text
      10.offset = 3,8
      10.text.field = title
    }
  }

Und hier die CSS-Settings:

a.SMenu:visited {
  color: #000000! important;
  text-decoration: none! important;
  display: block;
}

a.SMenu:hover, a.SMenu:active {
  color: #663300! important;
  text-decoration: none! important;
}

a.SMenu, a.SMenu:visited{
  position: relative;
  left:0px; top:7px;
  background-image: url(../_images/bg_dunkel.gif);
  border-bottom: 1px solid #E7B44E;
  border-left: 1px solid #E7B44E;
  border-right: 1px solid #E7B44E;
  color: #000000! important;
  display: block;
  font: 200 12px Arial, Helvetica, sans-serif;
  line-height: 24px;
  padding-right: 10px;
  padding-left: 10px;
  display: block;
  font-weight: bold! important;
  text-decoration: none! important;
  display: block;
}
a.SMenu:hover {
  position: relative;
  left:0px; top:7px;
  background-image: url(../_images/bg_dunkel.gif);
  border-bottom: 1px solid #E7B44E;
  border-left: 1px solid #E7B44E;
  border-right: 1px solid #E7B44E;
  display: block;
  font: 200 12px Arial, Helvetica, sans-serif;
  line-height: 24px;
  padding-right: 10px;
  padding-left: 10px;
  display: block;
  font-weight: bold! important;
  text-decoration: none! important;
  display: block;
  color: #663300! important;
  text-decoration: none! important;
}

Oder soll ich doch lieber zu einer Alternative wie ypMenu greifen?

Vielen Dank für Eure Hilfe!

Gruss M.