Zum Inhalt springen

CSS Flyout Menu funktioniert im IE nicht

Erstellt am 4. Oktober 2010 · 3 Antworten · letzte Antwort am 7. Oktober 2010

Tags: HTML & CSS, Frage

deXx ·

Hallo zusammen,

ein wohl weit verbreitetes Problem: Fehlerhafte Darstellung des CSS Flyout Menus im IE

Endlich habe ich – nach langem ausprobieren – ein Flyout Menu in Typo3 realisieren können. Folgende Internetseite hat mir dabei geholfen http://www.crnet.de/crnet-work/typo3-co/dropdown-flyout-menue-in-typo3.html.

Im Firefox und Google Chrome läuft es prima, im IE klappt nichts auf und ist noch zusätzlich total verschoben. Hier mal die Seite http://vvb.at-web.biz/index.php?id=7.

Mein TScript sieht folgendermaßen aus:

####################################################
# Dropdown-FlyOut-Menu rendern
temp.MENUA = HMENU
temp.MENUA {
    wrap = <div class="menu2">|</div>
    excludeUidList = 
  special = directory
  
  # Hier die Start-Page-ID angeben
  special.value = 25
  
  # Hauptmenue
  1 = TMENU
  1 {
 wrap = <ul> | </ul>
    expAll = 1
    NO.ATagTitle.field = subtitle//title
    NO.wrapItemAndSub = <li> | </li>
    NO.stdWrap.prepend = COA
    NO.stdWrap.prepend.10.wrap = ~  |
    IFSUB = 1
    IFSUB {
      wrapItemAndSub = <li> | </li>
      allWrap = | <!--<![endif]-->
      linkWrap = |<!--[if IE 7]><!-->
      ATagBeforeWrap = 1
    }
    ACT < .NO
    ACT = 1
    ACT.ATagParams = class=dropact
    ACTIFSUB < .IFSUB
    ACTIFSUB.ATagParams = class=dropact
  }
  2 = TMENU
  2 {
    wrap = <!--[if lte IE 6]><table><tr><td><![endif]--><ul> | </ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
 expAll = 1
    NO.ATagTitle.field = subtitle//title
    NO.wrapItemAndSub = <li> | </li>
    IFSUB = 1
    IFSUB {
      wrapItemAndSub = <li> | </li>
      allWrap = | <!--<![endif]-->
      linkWrap = |<!--[if IE 7]><!-->
      ATagBeforeWrap = 1
      ATagParams = class=drop
    }
  }
 
# 3. Ebene
3 < .2
# 4. Ebene
4 < .2
 
}

Und hier das CSS dazu:

/* FLYOUT MENU */

.menu2 {
	text-align: left;
	font-family: Tahoma, Arial, Helvetica, sans-serif; 
	font-size: 11px;
	color: #ffffff;
	position: relative;
	z-index: 100;
/* margin-top: 15px */  }
/* remove all the bullets, borders and padding from the default list styling */

.menu2 ul { padding:0; margin:0; list-style-type:none;   }
.menu2 ul ul li { padding:0; margin:0; list-style-type:none; border-left: 1px black;}
.menu2 ul ul { width:auto; }  /* Cell size. Divide the main width (750px) by the number of cells you need */

/* float the list to make it horizontal and a relative positon so that you can control the dropdown menu positon */
.menu2 li { 
	float: left;
	width: auto;
	position:relative;
	}
/* style the links for the top level */
.menu2 a, .menu2 a:visited {
	display:block;
	font-family: Tahoma, Arial, Helvetica, sans-serif; 
	font-size: 11px;
	color: #ffffff;
	font-weight: normal;
	text-decoration:none;
	width: auto;
	height: 23px; 
	padding-top: 7px;
	padding-left: 8px;
	padding-right: 8px;
	line-height: 14px;
	text-transform: uppercase;
}

a.menu2 {
	display:block;
	font-family: Tahoma, Arial, Helvetica, sans-serif; 
	font-size: 11px;
	color: #ffffff;
	font-weight: normal;
	text-decoration:none;
	width: auto;
	height: 23px; 
	padding-top: 7px;
	padding-left: 8px;
	padding-right: 8px;
	line-height: 14px;
	text-transform: uppercase;
}

a.menu2:link {
	display:block;
	font-family: Tahoma, Arial, Helvetica, sans-serif; 
	font-size: 11px;
	color: #ffffff;
	font-weight: normal;
	text-decoration:none;
	width: auto;
	height: 23px; 
	padding-top: 7px;
	padding-left: 8px;
	padding-right: 8px;
	line-height: 14px;
	text-transform: uppercase;
}

a.menu2:visited {
	display:table-cell;
	font-family: Tahoma, Arial, Helvetica, sans-serif; 
	font-size: 11px;
	color: #ffffff;
	font-weight: normal;
	text-decoration:none;
	width: auto;
	height: 23px; 
	padding-top: 7px;
	padding-left: 8px;
	padding-right: 8px;
	line-height: 14px;
	text-transform: uppercase;
}

/* a hack so that IE5.5 faulty box model is corrected */
* html .menu2 a, * html .menu2 a:visited {
width: 74px;
w\idth: 73px;
}

/* style the second level background */
.menu2 ul ul a.drop, .menu2 ul ul a.drop:visited {
width: 140px;
background: #ffffff;
font-family: Tahoma, Arial, Helvetica, sans-serif; 
font-size: 11px;
border-bottom: 1px solid #cccccc;
}

/* style the second level hover */
.menu2 ul ul a.drop:hover {
width: 140px;
background: #ffffff;
font-family: Tahoma, Arial, Helvetica, sans-serif; 
font-size: 11px;
border-bottom: 1px solid #cccccc;
}

.menu2 ul ul :hover > a.drop {
width: 140px;
background: #ffffff;
font-family: Tahoma, Arial, Helvetica, sans-serif; 
font-size: 11px;
border-bottom: 1px solid #cccccc;
}
/* style the third level background */
.menu2 ul ul ul a, .menu2 ul ul ul a:visited {
width:140px;
background:#efefef;
font-size:1em;
}
/* style the third level hover */
.menu2 ul ul ul a:hover {
width:140px;
background:#E0E0E0;
font-size:1em;
color: black;
}
/* hide the sub levels and give them a positon absolute so that they take up no room */
.menu2 ul ul {
visibility:hidden;
position:absolute;
height:0;
top:31px;
left:0;
width:140px;
}
/* another hack for IE5.5 */
* html .menu2 ul ul {
top:30px;
t\op:31px;
}

/* position the third level flyout menu */
.menu2 ul ul ul {
left:160px;
top:0;
width:140px;
}

/* position the third level flyout menu for a left flyout */
.menu2 ul ul ul.left {
left:-140px;
}
/* style the table so that it takes no part in the layout - required for IE to work */
.menu2 table { margin:0; padding:0 0px 0px 0px; position:absolute; top:0; left:0; /*Make the container moveable*/ }

/* style the second level links */
.menu2 ul ul a, .menu2 ul ul a:visited {
width: 140px;
background: #ffffff;
color: #797979;
font-family: Tahoma, Arial, Helvetica, sans-serif; 
font-size: 11px;
border-bottom: 1px solid #cccccc;
height:auto;
padding:7px 10px;
width:140px /* yet another hack for IE5.5 */;
}
* html .menu2 ul ul a {
width:140px;
w\idth:140px;
}

/* style the top level hover */
.menu2 a:hover {
	font-family: Tahoma, Arial, Helvetica, sans-serif; 
	font-size: 11px;
	color: #0662a9;
	background-image: url(http://vvb.at-web.biz/fileadmin/vvb_neu/img/backs2/top_menu2.jpg);
	background-repeat: repeat-x;
	background-color: #ffffff;
	background-position: center top;
	padding-top: 7px;
}

.menu2 :hover > a {
	font-family: Tahoma, Arial, Helvetica, sans-serif; 
	font-size: 11px;
	color: #0662a9;
	background-image: url(http://vvb.at-web.biz/fileadmin/vvb_neu/img/backs2/top_menu2.jpg);
	background-repeat: repeat-x;
	background-color: #ffffff;
	background-position: center top;
	padding-top: 7px;
}

.dropact {
	font-family: Tahoma, Arial, Helvetica, sans-serif; 
	font-size: 11px;
	color: #0662a9;
	background-image: url(http://vvb.at-web.biz/fileadmin/vvb_neu/img/backs2/top_menu2.jpg);
	background-repeat: repeat-x;
	background-color: #ffffff;
	background-position: center top;
	padding-top: 7px;
}

a.dropact {
	font-family: Tahoma, Arial, Helvetica, sans-serif; 
	font-size: 11px;
	color: #0662a9;
	background-image: url(http://vvb.at-web.biz/fileadmin/vvb_neu/img/backs2/top_menu2.jpg);
	background-repeat: repeat-x;
	background-color: #ffffff;
	background-position: center top;
	padding-top: 7px;
}

a.dropact:visited {
	font-family: Tahoma, Arial, Helvetica, sans-serif; 
	font-size: 11px;
	color: #0662a9;
	background-image: url(http://vvb.at-web.biz/fileadmin/vvb_neu/img/backs2/top_menu2.jpg);
	background-repeat: repeat-x;
	background-color: #ffffff;
	background-position: center top;
	padding-top: 7px;
}
a.dropact:hover {
	font-family: Tahoma, Arial, Helvetica, sans-serif; 
	font-size: 11px;
	color: #0662a9;
	background-image: url(http://vvb.at-web.biz/fileadmin/vvb_neu/img/backs2/top_menu2.jpg);
	background-repeat: repeat-x;
	background-color: #ffffff;
	background-position: center top;
	padding-top: 7px;
}

.menu2 ul ul a:hover {
	font-family: Tahoma, Arial, Helvetica, sans-serif; 
	font-size: 11px;
	color: #0662a9;
	background-color: #ffffff;
	padding-top: 7px;
}

.menu2 ul ul :hover > a {
	font-family: Tahoma, Arial, Helvetica, sans-serif; 
	font-size: 11px;
	color: #0662a9;
	background-color: #ffffff;
	padding-top: 7px;
}
/* make the second level visible when hover on first level list OR link */
.menu2 ul li:hover ul, .menu2 ul a:hover ul { visibility:visible; }
/* keep the third level hidden when you hover on first level list OR link */
.menu2 ul :hover ul ul { visibility:hidden; }
/* make the third level visible when you hover over second level list OR link */
.menu2 ul :hover ul :hover ul { visibility:visible; }

Ich habe schon verschiedenes ausprobiert ... leider ohne Erfolg.

Hat jemand einen Tipp für mich?

Liebe Grüße
deXx

deXx ·

Ich habe es nun hin bekommen ;-)

Für alle, die es interessiert:

Meine TYPO3 Seite lief wohl im Quirksmode :o. Am Anfang des Dokuments stand nur:

<!DOCTYPE html	PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

Also einfach auf der Rootpage im TS folgendes eingeben:

config {
	// Global language definitions
	language = de
	locale_all = de_DE.utf8
	htmlTag_langKey = de-DE
	metaCharset = utf-8
#DOCType setzen auf XHTML trans
        doctype = xhtml_trans
#erzeugten XHTML code bereinigen
        xhmtl_cleaning = all
#internet explorer - quirks mode
        [browser = msie]
        config.doctypeSwitch = 1
        [GLOBAL]

} // end config

und voilà ... es funktioniert ;-)

Offen gestanden habe ich darauf noch nie geschaut. Nun bin ich ein ganzen Stück schlauer geworden :o

Liebe Grüße
deXx