[jQuery] slideToggle und IE 7 (Background-Color)

Carrear

Erfahrenes Mitglied
Hi meine Lieben,

wie der titel schon sagt habe ich im IE 7 (und aktuell nur da) ein Problem mit einem slideToggle in jQuery.
Der Ganze Container wird wie gewollt auf un zu gefahren. Am Anfang ist er ja nicht sichtbar. Wenn er auftogglet, dann verschiebt sich zwar alles richtig und der Inhalt erscheint, ABER das Hintergrundbild, welches ich im CSS deklariert habe wird nicht angezeigt. Der Hintergrund bleibt also transparent.

Erst wenn ich den Container wieder schließe, zeigt er plötzlich das Hintergrundbild an, was dann ja nicht mehr allzuviel bringt ^^ Der Code dazu:


Code:
$('nav.support').click(function() {
  $('section.support > section').slideToggle("middle");
});
HTML:
	<section class="support">
		<section>
			<article>
				Inhalt der getogglet wird!
			</article>
		</section>
		<nav class="support">Navigation zum auf und zuklappen</nav>
		<p class="clear">&nbsp;</p>
	</section>

Code:
section.support {
	position: relative;
	left: 0px;
	height:1px;
	width:592px;
	top: 0px;
	z-index: 600;
}

section.support section{
	position: relative;
	background: #004f7c url('../images/unterstuetzerbox_blauverlauf_bg.png') repeat-x;
	height:332px;
	display: none;
	z-index: 601;
}
section.support nav.support {
	position: relative;
	width: 179px;
	height: 60px;
	float: right;
	background: url('../images/unterstuetzer_button_gross_oben.png') no-repeat;
	z-index: 602;
}
 
(verschoben nach Javascript)

Sorry, aber IE7 ist sogar bei simplen HTML5-Dingen überfordert,
http://www.quirksmode.org/dom/html5.html

derweilen völlig veraltet (Final 2006, Ende 2009). Sogar das Benutzen von png über die CSS ist für diese Version schon ein Kampf. An Deiner Stelle würde ich überlegen, ob die Unterstützung von IE7 überhaupt notwendig ist. Das Argument kann man nämlich auch umdrehen, wer IE7 benutzt, hat keine aktuellen Techniken verdient.

langer Rede kurzer Sinn: Auch wenn es irgendwelche Hacks oder Realisierungsmöglichkeiten gibt, es lohnt - meines Erachtens - nicht, sich darüber eine Sekunde den Kopf zu zermartern.

mfg chmee
 
Ich muss es leider :( Bin in Ausbildung als Mediengestalter und ich denke nicht, dass ich es mir rausnehmen kann die Kundenwünsche in Frage zu stellen :( Aber vielleicht nehm ich einfach mal das PNG raus als Hintergrundbild und nutze eine Farbe, vielleicht kommt er damit zurecht. Unterrichte euch da gleich mal, wie es ausging ^^
 
Bringt mich leider nicht weiter, die Hintergrundfarbe wird auch erst dann angezeigt, wenn ich den div wieder "eintoggle" :D
 
mal als fiddle gecodet. Wenn man auf die Suche geht nach ie7 background url css, findet man das Problem ständig. Ich kann nun nicht auf Anhieb sagen, ob es an einer schöneren CSS-Schreibweise liegen soll oder am Javascript. Am unteren Link ausprobieren..

http://jsfiddle.net/Ygry9/1/

mfg chmee

Nachtrag: Dennoch, kommt die Aufgabe explizit mit der Aussage, es soll auch mit IE7 laufen? ..manchmal frage ich mich nämlich, was unseren Azubis beigebracht wird.. ;) Und ich denke, es wird ein Extrabienchen geben, wenn man in das Ergebnis reinschreibt, dass die Nutzung von IE7 ein Sicherheitsproblem ist, zudem liegt der Nutzanteil (03/2012) bei angeblichen 2,5%.. Großteilig wohl bei Ämtern, wo der Admin zu faul ist, n Update laufen zu lassen..

http://www.w3schools.com/browsers/browsers_stats.asp
 
Zuletzt bearbeitet:
Also wenn ich die jeweiligen Codefragmente in dieser Oberfläche eintrage funktioniert es im IE7 noch weniger als auf der richtigen Seite. Im FF usw funktioniert es wie erwartet.

Ja, das mit dem Googeleinträgen zu 'ie7 background url css' stimmt, aber ich sagte ja - selbst wenn ich es durch eine einfache farbangabe ersetze wird es erst nicht angezeigt, ich denke also eher, dass es was mitdem slideToggle Befehl zu tun hat und da ist meine Google suche nicht allzu erfolgreich. Es gibt einige Suchergebnisse die sich mit dem IE7 im Zusammenhang mit slideToggle beschäftigen, aber da ging es vorrangig um Positionierungsprobleme usw.
 
Ich habe soeben noch folgendes festgestellt. Inline Styleangaben bringen nichts. Wie zuvor wird die Hintergrundfarbe erst angezeigt wenn man den Tag wieder eintogglet :D

Was ich jetzt gemacht habe war die Styleangabe 'display: none;' nicht in der CSS Datei sondern inline zu setzen - dann funktioniert es wie gewollt. Ist zwar nicht die sauberste Lösung, aber sie funktioniert :) Danke für die Hilfe
 
Zurück