Zum Inhalt springen

Probleme im IE mit horizontalem Menu

Erstellt am 22. Februar 2010 · 2 Antworten · letzte Antwort am 23. Februar 2010

Tags: HTML & CSS, Frage

Bubu35 ·

Hallo liebe Leute,

ich habe aus einem Tutorial ein horizontales menu gebaut. Bis auf den IE funktioniert es in allen Browsern.
Hier mein Quelltext:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
	"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<link rel="stylesheet" href="../css/site.css" media="screen,projection" />
<script type="text/javascript">
   sfHover = function() {
   	var sfEls = document.getElementById("nav").getElementsByTagName("LI");
   	for (var i=0; i<sfEls.length; i++) {
   		sfEls[i].onmouseover=function() {
   			this.className+=" sfhover";
   		}
   		sfEls[i].onmouseout=function() {
   			this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
   		}
   	}
   }
if (window.attachEvent) window.attachEvent("onload", sfHover);
</script>
<title></title>

</head>

<body>
<!-- ###DOKUMENT### start -->
<div style="width:910px; margin:30px auto;">
	<div style="width: 910px;">
		<img src="fileadmin/relaunch/images/logo.jpg" alt="" />
	</div>
	<div style="width: 910px;">
		<img src="fileadmin/relaunch/images/header.jpg" alt="" />
	</div>
	<div style="width: 910px;">
		###MENU###
	</div>
	<div style="width: 910px; height: 50px;">
		<div style="width: 230px; float: left; text-align: left;">
			Barnimer Hof
		</div>
		<div style="width: 600px; float: left; text-align: left;">
			Überschrift
		</div>
		<div style="width: 80px; float: left;">
			Wappen
		</div>
	</div>
	<div style="width: 910px;">
		<div style="width: 230px; float: left; height: 40px; background: #881609;">
			<div style="width: 230px; text-align: center; color: #fff; font-size: 11px; margin: 10px 0 10px 0;">
				Buchungsanfrage
			</div>
			<div style="width: 230px; background: #9A190B;">
				<table border="0" cellspacing="5" cellpadding="0" width="200" style="font-family: arial; font-size: 12px; font-weight: bold;">
					<tr>
						<td colspan="3">
						Anreisetag
						</td>
					</tr>

					<tr>
						<td colspan="3">
						<input type="text" id="arrival" size="20" maxlength="32" name="arrival" /> <a href="JavaScript:Kalender.anzeige(null,null,'arrival',1,360,'%d.%b.%y')"><img src="fileadmin/bilder/calendar.gif" border="0" alt="" /></a>
						</td>
					</tr>
					<tr>
						<td colspan="3">
							Abreisetag
						</td>

					</tr>
					<tr>
						<td colspan="3">
							<input type="text" id="departure" size="20" maxlength="32" name="departure" /> <a href="JavaScript:Kalender.anzeige(null,null,'departure',2,360,'%d.%b.%y')"><img src="fileadmin/bilder/calendar.gif" border="0" alt="" /></a>
						</td>
					</tr>
					 <tr>

				      <td align="left" colspan="3"><span style="margin-left: 11px; margin-right: 35px;">Personen</span>Zimmer</td>

				    </tr>
					<tr>

				      <td align="center" colspan="3"><input type="text" name="persons" value="" style="width: 70px; margin-right: 20px; margin-left: 10px;" /><input type="TEXT" name="rooms" value="" size="4" maxlength="4" style="width: 70px; margin-right: 20px;" /></td>

				    </tr>


					<tr>
						<td colspan="3" align="center">
						<input type="button" onclick="go()" value="Anfrage starten" />

						</td>
					</tr>
				</table>
			</div>
		</div>
		<div style="width: 660px; float: right; background: white; margin: 0; text-align: left;">
			<div style="float: left; margin: 0 20px 0 20px;">
				###INHALT###
			</div>
		</div>
	</div>
</div>
<!-- ###DOKUMENT### end -->
</body>
</html>

und hier der TS-Code

page = PAGE
page {
	bodyTag = <body>
	includeCSS {  
    	file1 = fileadmin/relaunch/css/site.css
	}
	
	10 = TEMPLATE
	10 {
    	template = FILE
    	template.file = fileadmin/relaunch/templates/template.html

    	workOnSubpart = DOKUMENT
		marks.MENU = HMENU
marks.MENU {
	special = directory
	special.value = 454

	1 = TMENU
	1 {
		expAll = 1
		wrap = <ul id="nav">|</ul>
		noBlur = 1
		NO = 1
		NO.wrapItemAndSub = <li>|</li>

		IFSUB = 1
		IFSUB.wrapItemAndSub = <li class="menuparent">|</li>
		ACTIFSUB < .IFSUB
	}
	2 < .1	
	2.wrap = <ul class="underNavi">|</ul>

	3 < .2
	4 < .2
}

marks {
INHALT < styles.content.get		
		
}

	}
	}

Worin liegt der Fehler?
Vielen Dank für Eure Hilfe.

Julian.​Hofmann ·

Hallo.

Bubu35 schrieb

ich habe aus einem Tutorial

Hilfreich für Helfer ist es oft, wenn man auch weiß, auf welchem Tutorial Du aufbaust. Hier dürfte es http://htmldog.com/articles/suckerfish/dropdowns/ sein, oder?

Bubu35 schrieb

Bis auf den IE funktioniert es in allen Browsern.

Welcher IE? Leider ist Microsoft ja nicht gerade für Kontinuität bekannt, und ziemlich jede Version des IE verhält sich anders, als die Vorgänger und Nachfolger.

Bubu35 schrieb

Worin liegt der Fehler?

Ja, das frag ich mich auch. Was macht der der IE falsch? Wie äußerst sich "der" Fehler?

Viele Grüße
Julian

Bubu35 ·

Das Tutorial habe ich auf der Seite http://www.sk-typo3.de/Die-Anwendung.114.0.html gefunden. Mittlerweile habe ich das TS dank eines Tutorials hier aus dem Forum (#65143)angepasst. Das IE-Problem besteht weiterhin und zusätzlich hat sich das Problem ergeben, dass nicht alle Menüpunkte geladen werden. Es wird nur der erste Menüpunkt komplett, incl. des Untermenüs, geladen. Die weiteren Menüpunkte werden aber nicht angezeigt oder aus Typo3 ausgelesen.

Welcher IE wird von mir genutzt? Internet Explorer 8

Nachstehend der von mir eingesetzte TypoScript-Code

page = PAGE
page {
	bodyTag = <body>
	includeCSS {  
    	file1 = fileadmin/relaunch/css/site.css
    	}	
	10 = TEMPLATE
	10 {
    	template = FILE
    	template.file = fileadmin/relaunch/templates/template.html

    	workOnSubpart = DOKUMENT
		marks {
		
		MENU = HMENU
MENU {
	special = directory
	special.value = 484
	1 = TMENU
	1.wrap=<ul>|</ul>
	
	1.noBlur = 1
	1.NO = 1	
	1.NO.wrapItemAndSub = <li>|</li>
	1.NO.stdWrap.htmlSpecialChars = 11
	1.NO.ATagTitle.field = title
	1.ACT <.NO
	1.ACT.wrapItemAndSub = <li>|</li>	
	
	2 < .1
	2.wrap = <ul>|</ul>
	2.ACT.wrapItemAndSub = <li>|</li>
	
	3 < .2
	3.wrap = <ul>|</ul>
	3.ACT.wrapItemAndSub = <li>|</li>	       
	}
	
	 INHALT < styles.content.get
		}
	}
}