Suche
Teilen
startseite » forum

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

  • Shentao Shentao
    Typ im Roten Hemd
    0 x
    2 Beiträge
    0 Hilfreiche Beiträge
    10. 05. 2011, 13:46

    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.

    [url=]www.e-kern.com[/url]

    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ü

    1. /* @override http://www.e-kern.kern-server.de/fileadmin/css/kern_menu.css */
    2.  
    3. li.menu_kern_first_item{
    4. 	height:25px;
    5. 	margin-bottom: 0px;
    6.  
    7. }
    8. li.menu_kern_first_item:hover{
    9. 	background: url(hoverlight.png) no-repeat center 22px;
    10. 	text-decoration: none;
    11. 	padding-top: 4px;
    12. 	margin-top: -4px;
    13.  
    14. }
    15.  
    16. li.menu_kern_first_item:hover a{
    17. 	text-decoration: none;
    18. }
    19.  
    20. .menu_kern_first {
    21. 	height:22px;
    22. 	position:absolute;
    23. 	top:172px;
    24. 	margin-left:220px;
    25. 	color:#FF0000;
    26. 	padding: 0px;
    27. }
    28. .menu_kern_first li {
    29. 	list-style:none;
    30. 	padding:0 7px;
    31. }
    32. .menu_kern_first li a {
    33. 	color:#FFFFFF;
    34. }
    35. .menu_kern_first_item {
    36. 	float:left;
    37. 	<!--[if lte IE 7]>
    38. 	width: 160px;
    39. 	<![endif]-->
    40. }
    41. .menu_kern_first_item_highlight {
    42. 	background:#6699FF;
    43. }
    44.  
    45. .menu_kern_second { 
    46. 	color: #5f6262;
    47. 	background-color: #cedeef;
    48. 	padding:5px;
    49. }
    50. .menu_kern_second li {
    51. 	height:auto !important;
    52.   	height:110px;  /*für den IE */
    53.   	width: 160px;
    54. 	list-style:none;
    55. 	padding-top: 10px;
    56. 	padding-bottom: 15px;
    57. 	padding-left: 10px;
    58. 	padding-right: 10px;
    59. 	z-index:99999;
    60. 	float:left
    61. }
    62.  
    63. .menu_kern_second li a {
    64. 	font-size: 11px;
    65. 	font-weight: bold;
    66. 	color: #00387c;
    67. }
    68.  
    69. .menu_kern_second li a:hover {
    70. 	font-size: 11px;
    71. 	font-weight: bold;
    72. 	background-color: #f59e18;
    73. 	padding:2px;
    74. 	text-decoration: none;
    75. 	color: #ffffff;
    76. }
    77.  
    78. .menu_kern_second_item {
    79. 	float:left;
    80. 	width: 100px;
    81.  
    82. }
    83.  
    84. a.li.menu_kern_second_item {
    85. 	color: #00387c;
    86. }
    87.  
    88. .menu_kern_third {
    89. 	padding:0;
    90. 	margin:0;
    91. 	color: #00387c;
    92. }
    93. .menu_kern_third li {
    94. 	padding:0px;
    95. 	margin:0px;
    96. }
    97.  
    98. .menu_kern_third li>a { 
    99. 	font-size: 11px;
    100. 	font-weight: normal;
    101. 	padding:0px;
    102. 	margin:0px;
    103. }
    104.  
    105. .menu_kern_third li> a:hover { 
    106.  
    107. 	font-size: 11px;
    108. 	font-weight: normal;
    109. 	padding:2px;
    110. 	background-color: #f59e18;
    111. 	text-decoration: none;
    112. 	color: #ffffff;
    113. }
    114.  
    115. .menu_kern_end {
    116. 	background-color: #cedeef;
    117. 	float:none;
    118. 	margin-top: 2px;
    119. 	padding:0 480px;
    120. }
    121. .menu_kern_box {
    122. 	float:none;
    123. 	background-color: #cedeef;
    124.  
    125. }
    126.  
    127.  
    128. .hidden{
    129. 	visibility:hidden;
    130. 	display:none;
    131. }

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

    1. # GANZES MENÜ
    2. 		FULLNAVI= HMENU
    3. 		FULLNAVI{
    4. 		special = directory
    5. 		special.value = 264
    6.  
    7.     		1 = TMENU
    8.     		1 {
    9. 	      		wrap = <!--[if lte IE 7]><table><tr><td><![endif]--> <ul class="menu_kern_first">|</ul> <!--[if lte IE 7]></td></tr></table></a><![endif]-->
    10.       			expAll = 1
    11.  
    12.       			NO{
    13. 	      			allWrap = <li id="sl_menu_{elementUid}" class="menu_kern_first_item">|
    14. 	      			linkWrap = <span class="hidden">|</span>
    15. 				wrapItemAndSub = |</li>
    16.         	        	subst_elementUid = 1
    17. 		        }
    18.     			NO = 1
    19.  
    20. 	      		RO < .ACT
    21. 			RO = 1
    22.  
    23. 	      		ACT < .NO
    24.       			ACT = 1
    25.       			ACT.ATagParams = <class="active">
    26.     		}
    27.  
    28.     		2 = TMENU
    29.     		2 {
    30.       		wrap = <!--[if lte IE 7]><table><tr><td><![endif]--><ul class="menu_kern_second">|</ul><!--[if lte IE 7]></td></tr></table></a><![endif]-->
    31.       		expAll = 1
    32.       		NO{
    33.       			wrapItemAndSub = <li class="menu_kern_second_item">|</li>
    34.       			subst_elementUid = 1
    35.    			linkWrap = |
    36.    		}
    37.     		NO = 1
    38.  
    39.       		RO < .ACT
    40. 		RO = 1
    41.  
    42.       		ACT < .NO
    43.       		ACT = 1
    44.       		ACT.ATagParams = <class="active">
    45.     		}
    46.  
    47.     		3 < .1
    48.     		4 < .1
    49.  
    50.     		3 {
    51.       		wrap = <!--[if lte IE 7]><table><tr><td><![endif]--><ul class="menu_kern_third">|</ul> <!--[if lte IE 7]></td></tr></table></a><![endif]-->
    52.       		expAll = 1
    53.       		NO{
    54. 	      		wrapItemAndSub = <li>|</li>
    55.    			linkWrap = |
    56. 	      	}
    57.     		}
    58.  
    59.     		4{
    60.       		NO{
    61.    			linkWrap = |
    62.  
    63. # VISUELLES TRENNZEICHEN
    64.  
    65. 		SPC {
    66. 		allWrap = <tr><td height="20" class="navi_spacer" width="145">|</td></tr>
    67. 		doNotShowLink = 0
    68. 		backColor = #94c0fc
    69. 		fontColor = #000000
    70. 		doNotLinkIt = 0
    71. 		}
    72. 		SPC = 1
    73.  
    74. 		}
    75.     		}
    76.  
    77. 		}
    78.  
    79. # HOMEBUTTON
    80.  
    81. 		HOMELINK = IMAGE
    82. 		HOMELINK {
    83.         	file = fileadmin/css/homelinklogo.png
    85.         	typolink.target = _self
    86.         	imageLinkWrap.enable = 1
    87.         	imageLinkWrap.typolink.parameter = 116
    88.         	wrap = <span class="homelinklogo">|</span>
    89.         	}
    90.  
    91. # HAUPTMENÜ
    92. 		HEADNAVI= HMENU
    93. 		HEADNAVI {
    94. 		special = directory
    95. 		special.value = 264
    96.     		1 = TMENU
    97.     		1 {
    98. 	      		wrap = <ul class="menu_kern_first">|</ul>
    99.       			expAll = 1
    100.       			NO{
    101. 	      			linkWrap = <li class="menu_kern_first_item" onmouseover="sl_show({elementUid});" onmouseout="sl_start_countdown();">|</li>
    102.         	        	subst_elementUid = 1
    103. 		        }
    104. 	                NO = 1
    105.       			ACT < .NO
    106.       			ACT = 1
    107. 	      		ACT.ATagParams = <class="active">
    108.     		}
    109.     		}
    110.  
    111.  # 2. MENÜEBENE
    112.  		SECONDNAVI = HMENU
    113. 		SECONDNAVI {
    114. 		special = directory
    115. 		entryLevel = 2
    116.  
    117.     		2 = TMENU
    118.     		2 {
    119.       		wrap = <ul id="sl_menu_box" class="menu_kern_second" onmouseover="sl_extend();" onmouseout="sl_start_countdown();">|</ul>
    120.       		expAll = 1
    121.     		NO.wrapItemAndSub = <li class="menu_kern_second_item">|</li>
    122.     		}
    123.  
    124. 		3 = TMENU
    125.     		3 {
    126.       		wrap = <ul class="menu_kern_third">|</ul>
    127.       		expAll = 1
    128.     		NO.wrapItemAndSub = <li>|</li>
    129.  
    130.                 ACT < .NO
    131.       		ACT = 1
    132.       		doNotLinkIt = 1
    133.       		ACT.ATagParams = class="thirdlevel"
    134.  
    135.     		SPC {
    136. 		allWrap = <tr><td height="20" class="navi_spacer" width="145">|</td></tr>
    137. 		doNotShowLink = 0
    138. 		backColor = #94c0fc
    139. 		fontColor = #000000
    140. 		doNotLinkIt = 0
    141. 		}
    142. 		SPC = 1
    143.  
    144.     		}
    145.     		}

    Ü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 :(

  • 1
  • 0 x
    3270 Beiträge
    157 Hilfreiche Beiträge
    11. 05. 2011, 10:06

    Hallo.

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

    Viele Grüße
    Julian

    Kleiner Hinweis:
    das Forum hier ist leider nicht mehr so frequentiert :-(
    Für schnellere Hilfe und mehr Leser, guck mal
    - auf stackoverflow ( https://stackoverflow.com/questions/tagged/typo3 )
    - oder in die slack-Channels ( https://typo3.org/community/meet/chat-slack )

  • Shentao Shentao
    Typ im Roten Hemd
    0 x
    2 Beiträge
    0 Hilfreiche Beiträge
    05. 03. 2014, 14:35

    Sorry für die super späte Antwort, aber ich bin eher zufällig wieder hier draufgestoßen :) ein paar Monate später habe ich mich endlich eingehender mit CSS beschäftigen können, und das schreckliche Javascript-Menü von meinem Vorgänger mit einem reinen CSS-Menü ausgetauscht.

    Das Javascript hat damals wohl irgendwie nicht mit dem IE7 zusammengearbeitet...

  • 1
Präsentiert von