• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

probleme bei IE mit onmouse[..] und hintergrundgrafik

W

web_anfänger

Neues Mitglied
hallo erstmal

ich hab auf meiner seite ein dropdown menü und die buttons mit einem mouseover-effekt belegt, das ganze sieht im code so aus.

HTML: 
		<td colspan="3" class="auto-style10" style="height: 500px">
		&nbsp; 
		<div id="menuebox" style="margin: 0 auto; top: -733px; width: 808px; left: -4px; height: 30px;">

	<div id="menue" style="top: -201px; width: 805px; margin-left: inherit; margin-right: inherit; margin-top: inherit; left: 34px; height: 33px;" class="auto-style9" >
	
	<div class="aussen">
		<span class="menutag" style="background-image:url('BUTTONS/normal/button.png'); height: 30px; width: 108px; background-position:right" onmouseover="this.style.backgroundImage='url(BUTTONS/hover_it/button.png)' " onmousedown="this.style.backgroundImage='url(BUTTONS/hover_it/button.png)'" onmouseout="this.style.backgroundImage='url(BUTTONS/normal/button.png)'" onmouseup="this.style.backgroundImage='url(BUTTONS/normal/button.png)'"><a href="chor.html" target="I1"><object data="BUTTONS/empty_button.png" type="image/png" width="200" height="30"></object></a></span>
			<a class="innen-1" href="link.html" target="I1">Unterpunkt1</a>
			<a class="innen" href="#">Unterpunkt2</a>
			<a class="innen" href="#">Unterpunkt3</a>
	</div>
		
	<div class="aussen">
		<span class="menutag" style="background-image:url('BUTTONS/normal/button1.png); height:30px; width: 193px; background-position:right" onmouseover="this.style.backgroundImage='url(BUTTONS/hover_it/button1.png)"><a href="orchester.html" target="I1"><object data="BUTTONS/empty_button1.png" type="image/png" width="200" height="30"></object></a></span>
			<a class="innen-1" href="link.html" target="I1">Unterpunkt1</a>
			<a class="innen" href="#">Unterpunkt2</a>

		</div>
		
	<div class="aussen">
		<span class="menutag" style="background-image:url('BUTTONS/normal/button2.png'); height:30px; width:156px; background-position:right" onmouseover="this.style.backgroundImage=url(BUTTONS/hover_it/button2.png)"></span>
			<a class="innen-1" href="#">unterpunkt</a>
			<a class="innen" href="#">unterpunkt</a>
			<a class="innen" href="#">unterpunkt</a>
		</div>
		
	<div class="aussen">
		<span class="menutag" style="background-image:url('BUTTONS/normal/button3.png'); background-position:right; height:30px; width: 127px" onmouseover="this.style.backgroundImage=url(BUTTONS/hover_it/button3.png)"></span>
			<a class="innen-1" href="#">2010</a>
			<a class="innen" href="#">2009</a>
			<a class="innen" href="#">2008</a>
		</div>

		
		</div>
</div>
natürlich mach ich den code später bei allen buttons, aber zuerst mal bei einem sehen ob alles funktioniert.
dazu ein bisschen css um das dropdown menü zu machen.
Code: 
<style type="text/css">

#menuebox {
position: relative;
height: 30px;
}
.stupidie {
display: none;
}
#menue {
position:absolute;
top: 5px;
left: 0;
z-index: 200;
}

#menue .aussen {
float: left;
display: block;
overflow: hidden;
width: 9em;
height: 1.9em;
font-weight: bold;
text-align: center;
background: transparent;
color: white;
border: 0px solid;
border-color: 0000 0000 0000 0000;
color:black
}
#menue .aussen:hover {
height: auto;
background-color: transparent;
color: white;

}

a.innen-1 {
margin-top: 2px;
}
a.innen,
a.innen-1 {
opacity: 0.9;
display: block;
width: 7.9em;
padding: 2px 0;
text-decoration: none;
font-weight: normal;
border-bottom: 1px solid 11111;
background-color: white;
color: orange;
text-align: center;
float: right;
font-family: Calibri;
}
a:visited.innen,
a:visited.innen-1 {
background-color: 00000;
color:0000;
}
a:hover.innen,
a:hover.innen-1 {
background-color: #EEE8E8;
color: 0000;
}

span.menutag {
display: block;
cursor:default;
}
.auto-style9 {
	margin-bottom: 0px;
}
.auto-style10 {
	text-align: center;
}
.auto-style11 {
	font-family: Calibri;
	color: rgb(132, 130, 127);
	font-size: small;
}
.auto-style12 {
	border-width: 0;
}
.auto-style13 {
	font-family: Calibri;
	font-size: medium;
	border-bottom-style: none;
	border-bottom-width: medium;
	text-align: center;
}
</style>

soweit sogut, funktioniert tadellos im chrome und mozilla firefox. der internetexplorer macht natürlich faxen: zuerst eine meldung im gelben balken oben "Das zulassen von skripts und active-x-steuerelementen die auf ihren computer zugreifen können sind aus sicherheitsgründen eingeschränkt" lässt man geblockte inhalte zu ändert sich nichts.
das dropdown menü funktioniert zwar, doch statt den buttons sind nur weiße kästen mit rahmen zu sehen. zudem hüpfen die "ausklappbaren" untermenüpunkte des dropdown menüs einige pixel unter die "buttons" (die ja nur weiße kästchen sind) sodass eine lücke zwischen button und unterpunktmenü entsteht. deshalb verschwinden die unterpunkte wieder wenn man einen davon anklicken möchte bevor man dass tun kann, weil der mauszeiger den "button" verlässt aber noch keinen menüpunkt anklicken kann.

das sind mal die zwei probleme mit der menüleiste. noch ein drittes dazu:

ich habe in die seite einen iframe eingebunden:
HTML: 
<iframe id="I1" name="I1" src="willkommen.html" width="900" style="height: 524px" border="0" frameborder="0" marginheight="12">
		Ihr Browser unterstützt keine Frames.
		</iframe>
die seite die der frame anzeigen soll enthält dann:
HTML: 
<body style="margin: 10px 50px; background-image: url('../../innen_background.png'); background-attachment:fixed;">

das "innen_background.png" ist eine halbtransparente grafik, die eigentlich nur eine hellweise fläche mit weicher kante als in den frame als hintergrund für die eigentliche seite legen sollte. diese grafik ist halbtransparent damit der websiten-background noch durchscheint, man aber den text darauf gut lesen kann. die grafik besitzt die abmessungen des iframes.
funktioniert in mozilla und chrome tadellos. IE streikt: der frame ist weiß. nicht transparent, ganz normal undurchsichtig weiß, was hässlich aussieht. wahrscheinlich wird die png-hintergrundgrafik zwar angezeigt, aber da es ja nur weiß transparent ist, sieht man es auf dem (vom IE kreierten) weißen frame-hintergrund ohnehin nicht.


wie kann ich IE durch code-änderungen/zusätze beibringen das ganze genauso wie im mozilla/chrome anzuzeigen????


danke für eure hilfe
mfg
 
Werbung:
Willkommen im Forum.

Wieso nutzt du für den 'mouseover'-Effekt JavaScript? Mit dem CSS-Pseudoelement hover arbeitest du barrierefreier.
Bei deinem Menü handelt es sich um eine Liste von Links, deshalb solltest du es auch als Liste auszeichnen. -> <ul> + <li>

Ein iFrame sehe ich in deinem Fall als keine gute Lösung. Sie (auch normale Frames) gelten als veraltet und sind unfreundlich gegenüber Besuchern und Suchmaschinen.

Deine Skepzis gegenüber IE ist unbegründet, dein Code ist ein Durcheinander.
Code: 
width="900" style="height: 524px"
Zum Vergrößern anklicken....
Die Höhe gibst du mit CSS, die Breite aber mit HTML..? (abgesehen davon, dass nach 524px ein Semikolon fehlt)

wie kann ich IE durch code-änderungen/zusätze beibringen das ganze genauso wie im mozilla/chrome anzuzeigen????
Zum Vergrößern anklicken....
Indem du deine HTML-Dokument einen ordnetlichen DocType gibst und dich an diesen hälst. IE kann alles, was ein Webdesigner braucht.

Gruß
 
okay ich werde meinen code in ordnung bringen. wie gesagt bin ich anfänger, kann also schon mal vorommen. kann ich mit dem hover-css auch die grafiken austauschen, hab das bisher nur mit texfarbe gesehen. würde so dann aussehen?:
HTML: 
background: url(image_hover.gif)(image_hover.gif)

was schlägst du dann als alternative für frames vor wenn die menüleiste stets sichtbar bleiben soll und nur der seiteninhalt gescrollt werden kann...?



danke vorerst aber damit bin ich noch nicht wirklich weiterkommen...
 
Werbung:
oke dann werd ich das mit dem include mal versuchen. müsste dann gleich wie frames aussehen?

hm, nur das problem wo schreib ich diesen CSS hover jetzt rein? ich habe ja alles gleich divs aber überall soll ein anderer button ausgetauscht werden. also müsste ich für jeden eigenen einen div so definieren? im vergleich zum onmouse[..] konnte ich die auszutauschenden grafiken einfach in das <div><span ... onmouse usw.></span></div> schreiben. wo kommt das hin?
 
Werbung:
dankeschön :) jetzt hab ichs in den griff bekommen, code aufgeräumt und alle onmouse.this durch onmouse.name.src="#" ersetzt...

danke für eure hilfe
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben