TYPO3-Testaccount
Testen Sie die aktuellste TYPO3-Version kostenlos und unverbindlich für einen Monat!

Jetzt testen!

Schulungen

Darstellungs- /Positionierungsfehler IE7 - evtl. CSS-Problem...


Autor Nachricht
Verfasst am: 10. 05. 2011 [13:46]
Shentao
Themenersteller
Dabei seit: 10.05.2011
Beiträge: 1
Hallo liebe Mitglieder des Typo3.net Forums,

ich bin hier neu in diesem Forum und habe mich auch schon etwas umgeschaut ob ich eine Lösung finden konnte, da viele andere anscheinend auch Darstellungsprobleme haben. Ich bin gerade noch dabei TypoScript (und CSS) zu lernen, eigentlich bin ich eher Redakteur. Mein Kollege der sich um den technischen Teil kümmert ist zur Zeit nicht verfügbar, daher versuche (bzw. muss) ich das Problem selbst lösen.

Zwar kenne ich mich nicht so gut aus, habe mit diversen Tools (Firebug, Web Developer für Firefox) glaube ich eingrenzen können, dass es an der CSS liegt (position: absolute oder margin-left vielleicht...?) . Am einfachsten ihr schaut euch die Seite an.

www.e-kern.com

In allen (aktuellen) Browsern wird die Menüleiste soweit korrekt dargestellt, aber der IE7 stellt das Menü um so ziemlich genau eine Seite nach rechts versetzt - und wir haben (leider) noch ziemlich viele User die noch IE7 einsetzen.

Hier der CSS-Code vom Menü

CSS
/* @override http://www.e-kern.kern-server.de/fileadmin/css/kern_menu.css */
 
li.menu_kern_first_item{
	height:25px;
	margin-bottom: 0px;
 
}
li.menu_kern_first_item:hover{
	background: url(hoverlight.png) no-repeat center 22px;
	text-decoration: none;
	padding-top: 4px;
	margin-top: -4px;
 
}
 
li.menu_kern_first_item:hover a{
	text-decoration: none;
}
 
.menu_kern_first {
	height:22px;
	position:absolute;
	top:172px;
	margin-left:220px;
	color:#FF0000;
	padding: 0px;
}
.menu_kern_first li {
	list-style:none;
	padding:0 7px;
}
.menu_kern_first li a {
	color:#FFFFFF;
}
.menu_kern_first_item {
	float:left;
	<!--[if lte IE 7]>
	width: 160px;
	<![endif]-->
}
.menu_kern_first_item_highlight {
	background:#6699FF;
}
 
.menu_kern_second { 
	color: #5f6262;
	background-color: #cedeef;
	padding:5px;
}
.menu_kern_second li {
	height:auto !important;
  	height:110px;  /*für den IE */
  	width: 160px;
	list-style:none;
	padding-top: 10px;
	padding-bottom: 15px;
	padding-left: 10px;
	padding-right: 10px;
	z-index:99999;
	float:left
}
 
.menu_kern_second li a {
	font-size: 11px;
	font-weight: bold;
	color: #00387c;
}
 
.menu_kern_second li a:hover {
	font-size: 11px;
	font-weight: bold;
	background-color: #f59e18;
	padding:2px;
	text-decoration: none;
	color: #ffffff;
}
 
.menu_kern_second_item {
	float:left;
	width: 100px;
 
}
 
a.li.menu_kern_second_item {
	color: #00387c;
}
 
.menu_kern_third {
	padding:0;
	margin:0;
	color: #00387c;
}
.menu_kern_third li {
	padding:0px;
	margin:0px;
}
 
.menu_kern_third li>a { 
	font-size: 11px;
	font-weight: normal;
	padding:0px;
	margin:0px;
}
 
.menu_kern_third li> a:hover { 
 
	font-size: 11px;
	font-weight: normal;
	padding:2px;
	background-color: #f59e18;
	text-decoration: none;
	color: #ffffff;
}
 
.menu_kern_end {
	background-color: #cedeef;
	float:none;
	margin-top: 2px;
	padding:0 480px;
}
.menu_kern_box {
	float:none;
	background-color: #cedeef;
 
}
 
 
.hidden{
	visibility:hidden;
	display:none;
}


Und hier der relevante code vom Typoscript (ich habe hier schon etwas rumprobiert, hat aber nicht wirklich geholfen)

TYPOSCRIPT
# GANZES MENÜ
		FULLNAVI= HMENU
		FULLNAVI{
		special = directory
		special.value = 264
 
    		1 = TMENU
    		1 {
	      		wrap = <!--[if lte IE 7]><table><tr><td><![endif]--> <ul class="menu_kern_first">|</ul> <!--[if lte IE 7]></td></tr></table></a><![endif]-->
      			expAll = 1
 
      			NO{
	      			allWrap = <li id="sl_menu_{elementUid}" class="menu_kern_first_item">|
	      			linkWrap = <span class="hidden">|</span>
				wrapItemAndSub = |</li>
        	        	subst_elementUid = 1
		        }
    			NO = 1
 
	      		RO < .ACT
			RO = 1
 
	      		ACT < .NO
      			ACT = 1
      			ACT.ATagParams = <class="active">
    		}
 
    		2 = TMENU
    		2 {
      		wrap = <!--[if lte IE 7]><table><tr><td><![endif]--><ul class="menu_kern_second">|</ul><!--[if lte IE 7]></td></tr></table></a><![endif]-->
      		expAll = 1
      		NO{
      			wrapItemAndSub = <li class="menu_kern_second_item">|</li>
      			subst_elementUid = 1
   			linkWrap = |
   		}
    		NO = 1
 
      		RO < .ACT
		RO = 1
 
      		ACT < .NO
      		ACT = 1
      		ACT.ATagParams = <class="active">
    		}
 
    		3 < .1
    		4 < .1
 
    		3 {
      		wrap = <!--[if lte IE 7]><table><tr><td><![endif]--><ul class="menu_kern_third">|</ul> <!--[if lte IE 7]></td></tr></table></a><![endif]-->
      		expAll = 1
      		NO{
	      		wrapItemAndSub = <li>|</li>
   			linkWrap = |
	      	}
    		}
 
    		4{
      		NO{
   			linkWrap = |
 
# VISUELLES TRENNZEICHEN
 
		SPC {
		allWrap = <tr><td height="20" class="navi_spacer" width="145">|</td></tr>
		doNotShowLink = 0
		backColor = #94c0fc
		fontColor = #000000
		doNotLinkIt = 0
		}
		SPC = 1
 
		}
    		}
 
		}
 
# HOMEBUTTON
 
		HOMELINK = IMAGE
		HOMELINK {
        	file = fileadmin/css/homelinklogo.png
        	imageLinkWrap = 1
        	typolink.target = _self
        	imageLinkWrap.enable = 1
        	imageLinkWrap.typolink.parameter = 116
        	wrap = <span class="homelinklogo">|</span>
        	}
 
# HAUPTMENÜ
		HEADNAVI= HMENU
		HEADNAVI {
		special = directory
		special.value = 264
    		1 = TMENU
    		1 {
	      		wrap = <ul class="menu_kern_first">|</ul>
      			expAll = 1
      			NO{
	      			linkWrap = <li class="menu_kern_first_item" onmouseover="sl_show({elementUid});" onmouseout="sl_start_countdown();">|</li>
        	        	subst_elementUid = 1
		        }
	                NO = 1
      			ACT < .NO
      			ACT = 1
	      		ACT.ATagParams = <class="active">
    		}
    		}
 
 # 2. MENÜEBENE
 		SECONDNAVI = HMENU
		SECONDNAVI {
		special = directory
		entryLevel = 2
 
    		2 = TMENU
    		2 {
      		wrap = <ul id="sl_menu_box" class="menu_kern_second" onmouseover="sl_extend();" onmouseout="sl_start_countdown();">|</ul>
      		expAll = 1
    		NO.wrapItemAndSub = <li class="menu_kern_second_item">|</li>
    		}
 
		3 = TMENU
    		3 {
      		wrap = <ul class="menu_kern_third">|</ul>
      		expAll = 1
    		NO.wrapItemAndSub = <li>|</li>
 
                ACT < .NO
      		ACT = 1
      		doNotLinkIt = 1
      		ACT.ATagParams = class="thirdlevel"
 
    		SPC {
		allWrap = <tr><td height="20" class="navi_spacer" width="145">|</td></tr>
		doNotShowLink = 0
		backColor = #94c0fc
		fontColor = #000000
		doNotLinkIt = 0
		}
		SPC = 1
 
    		}
    		}



Über jeden Hinweis oder Tip wäre dankbar, und wenn es auch ein Hinweis ist in welche Richtung ich weiter forschen bzw. recherchieren könnte. Ich bin echt seit Freitag letzter Woche am lesen und grübeln. Habe in einigen Büchern nachgeschaut, aber über inkompatibilitäten mit IE7 und Menüs gab es keine hilfreichen Hinweise icon_frown.gif
Profil
Verfasst am: 11. 05. 2011 [10:06]
Julian.Hofmann
Dabei seit: 18.05.2007
Beiträge: 2073
Hallo.

Was mir im IE7 auffällt: die Tagcloud fehlt und es wird ein Fehler geschmissen. Möglicherweise gibt es da einen Zusammenhang. Vielleicht mal die TagCloud für den IE7 rausnehmen und schauen...(und hoffen icon_wink.gif )

Viele Grüße
Julian

Profil