Welcher Browser rendert richtig/falsch?

[XimeX]

Ich bin gerade dabei für unsere Tanzschule eine Homepage zu basteln.
Erreichbar unter: http://82.218.28.51/tc/
Ich hab jetzt folgendes Problem:
Wenn man im Menü unter Tanzkurs->Kurse geht und dann auf den 4 oder 5 Eintrag gehen will verschwindet das Menü. Aber nur hier. Jedoch passiert das nur bei IE (8/9) und Opera (11). Bei Firefox (3.6/4.0) und Chrome (10) verschwindet es nicht.
Meine Frage ist jetzt. Welche 2 Browser machen es richtig bzw falsch. Wenn IE/Opera richtig rendern, was könnt ich machen damit es nicht verschwindet? Die einzelnen Einträge will ich aber nicht komplett zusammen schieben. Und ich will es <nicht> mit JS lösen sondern mit CSS.
Ich hab auch noch eine bissl andere Version unter http://82.218.28.51/tc/test/ mit einer neuen Menüanordnung die ich jetzt übernehmen werde. Für IE8 Tester die die neuen HTML5 Tags nicht unterstützen auch eine Version unter http://82.218.28.51/tc/ie/ wo einige Sachen auch einen Workaround mit JS bekommen haben für Abwärtskompatibilität.

Und wenn wir schon dabei sind: Vll gleich auch so noch ein Feedback geben wie die Seite ist und was man besser machen könnte.

 

[nicoc]

... wenn es nur an der Stelle hapert gibt es ein Problem im Script. Das es in Firefox denoch geht, hängt u.U. damit zusammen, dass die Standards etwas großzügiger ausgelegt werden.

 

[slay24]

Sieht doch schonmal ganz gut aus deine Seite =) aber du solltest evt keine Transperenten hintergründe für die aufgeklappten menüs vewenden

 

[XimeX]

Was mich so wundert ist ja das es bei den anderen Einträgen funktioniert. Wenn dann sollte es doch entweder überall gehen oder bei keinem. Das Problem titt auf wenn der Corsour genau zwischen 2 Einträgen im Freiraum ist (der 1px). Wenn man schnell drüberfährt (funzt nicht immer) schafft mans bis auf den 4 oder 5 Eintrag.
Aber dann sollte es doch auch bei den anderen Spalten verschwinden...

 

[nicoc]

... wenn es nur an der Stelle hapert gibt es ein Problem im Script...

... erscheint das nicht logisch?

 

[XimeX]

naja eig erscheint mir das nicht logisch. weil auf alle einträge die gleichen css eigenschaften angewendet werden. Mir kommts ja eher so vor als würde IE und Opera pfuschen. Wäre mal schön wenn es auch noch mit paar anderen Browsern getestet werden würde. Auch wenn Safari etc fast alle auf den gleichen Render engines laufen...

 

[Xidus]

Also es liegt an IE und Opera HTML5 wird halt noch nicht wirklich 100% von allen unterstützt

Safarie und Chrome sind hier die führenden was HTML5 und CSS3 angeht gefolgt von Opera und IE und FireFox sind die schluß leuchten

hier kanste z.B sehen was die Browser schon so unterstützen http://www.findmebyip.com/litmus#target-selector

ich bin selbst Webentwickler und weiß das wenn besonders IE und Firefox sehr viel Probleme machen.

was mich bei deinem Fall etwas stutzig macht das FF und Opera die rollen getauscht haben aber dies liegt wohl an HTML% und CSS3 also du solltest am besten auf dies Komponenten verzichten den fast alle Nutzer benutzen nicht die neusten Versionen von den Browsern

dazu hier von 01/2011 ne kleine Statistik http://www.browser-statistik.de/statistiken/versionen/

ps: warum wilst du kein js nutzen ?

 

[firexs]

Also ich sehe mit meinem FF keine probleme. und den ie packe ich auch nicht extra aus. die seite läuft flott, stabil und ohne probleme. wenn sie in CSS gehalten werden soll, was ich persönlich gut finde, dann schau mal nach was im CSS Stil geschrieben ist, und was eher davon abweicht und zu problemen führen könnte.

lg
fire

 

[XimeX]

Also ich würd zwar sagen FF unterstützt HTML5 und CSS3 besser als Opera aber das ist glaub ich eher ansichtssachen von welchen technologien genau gesprochen wird. (Ich vergleiche jetzt FF4 mit Opera 11; Das FF3.6 hinter Opera 11 ist weiß ich)

Vom unterstützen der technologien sollte es eig <hier> nicht liegen. Ist ja immerhin eine reines ":hover" (pseudo-selektor)

Wegen Browserstatistiken kenn ich eh genug seiten aber danke Ich will zuerst mal eine Seite auf aktuellen Techniken machen und erst dann Workarounds schreiben.

Weil es genug leute gibt (inkl. mir) die JS blocken. und so funktioniert trotzdem alles. In diesem Fall würde man (wenn mans nur mit JS machen würde) ohne JS keine seite aufrufen können bis auf über die Sitemap...

hier mal auszüge aus dem Code:

<li class="menupunkt1">
	<a href="tanzkurse.html">Tanzkurse<img src="pfeil_unten.png" alt="⇓" width="12" height="12"/></a>
	<menu class="menu2">
		<li class="menupunkt2">
			<a href="tanzkurse_kurse.html">Kurse<img src="pfeil_rechts.png" alt="⇒" width="12" height="12"/></a>
			<menu class="menu3">
				<li class="menupunkt3"><a href="tanzkurse_kurse_standard-latein.html">Standard/Latein</a></li>
				<li class="menupunkt3"><a href="tanzkurse_kurse_rock-n-roll.html">Rock 'n' Roll</a></li>
				<li class="menupunkt3"><a href="tanzkurse_kurse_paarkurs.html">Paarkurs</a></li>
				<li class="menupunkt3"><a href="tanzkurse_kurse_schwarz-weiss.html">Schwarz-Weiß</a></li>
				<li class="menupunkt3"><a href="tanzkurse_kurse_zusatztraining.html">Zusatztraining</a></li>
			</menu>
		</li>
		<li class="menupunkt2"><a href="tanzkurse_kurstage.html">Kurstage</a></li>
		<li class="menupunkt2"><a href="tanzkurse_anmeldung.html">Anmeldung</a></li>
	</menu>
</li>

.menu2 {
	margin: 0px;
	padding: 2px 8px 8px;
	list-style-type: none;
	width: 158px;
	position: relative;
	left: -9px;
	visibility: hidden;
	opacity: 0;
}
.menupunkt2 {
	margin: 1px 0px;
	height: 20px;
}
.menupunkt2:hover .menu3 {
	visibility: visible;
	opacity: 1;
	transition: opacity 400ms ease-in;
	-moz-transition: opacity 400ms ease-in;
	-webkit-transition: opacity 400ms ease-in;
	-o-transition: opacity 400ms ease-in;
}
.menu3 {
	margin: 0px;
	padding: 2px 8px 8px 3px;
	list-style-type: none;
	width: 158px;
	position: relative;
	top: -24px;
	left: 156px;
	visibility: hidden;
	opacity: 0;
}
.menupunkt3 {
	margin: 1px 0px;
	height: 20px;
}

 

[Xidus]

hmm dann mach doch am besten eine kombi version sobald js nicht an is nimm HTML5

ps: dein HTML5 Quelltext ist astrein hat keinen fehler aber deine css code ist nicht nach den W3C normen und somit können auch viele Fehler auftreten den nach der Norm halten sich die Browser ( ok lassen auch einiges durch gehen wird aber dadurch auch langsamer)

hier die css fehler :
http://jigsaw.w3.org/css-validator/...profile=css3&usermedium=all&warning=1&lang=de

edit: hab mir die fehler nicht durch gelesen sind nur die Browser CSS spezifischen Sachen.
also du kannst an deinem Quelltext nix verbessern es liegt daran das die Browser es noch nicht unterstützen

 

[XimeX]

hmmm... IE8/9 & Opera 11 unterstützen ja das :hover sonst würde ja das Menü nicht aufgehen.
Was mir noch aufgefallen ist. Wenn ich in Opera Dragonfly starte und dann die Menüs aufklappe funktionierts... aber nur wärend ich in diesem modus bin...

Das Problem sollte man mal bei Opera oder so melden oder? Vll finden die den fehler.
PS: noch ein geiler fehler von Opera: schnell über den menüs hin und herfahren. dann kommt manchmal so ein "regenbogen" effekt. auf einmal hat das menü alle farben^^

 

[nobodo]

Ich hab keine Ahnung von Programmierung, aber warum fehlt ab Paarkurs der weiße Unterstrich? Fehlt vielleicht ein Abschluss bei der Button-Programmierung bzw. Zuweisung? Ist mir gerade bei meinem Opera aufgefallen.
Bei Schwarz-Weiß und Zusatztraining fehlt es ebenfalls an der Trennung.

 

[XimeX]

da hast dich bissl verschaut. der 1px breite streifen zwischen den einträgen ist nicht weiß sondern ist durchsichtig und man sieht an den 2 stellen die schrift im hintergrund. Vll mach ich das eh noch anders. weiß nur noch ned ganz wie

 

[nobodo]

Hätte ja sein können. Mein IE8 schafft es aber noch nicht mal über den 2. Punkt hinaus. Das Menu wird bereits dort schon geschlossen.

 

[XimeX]

Ja das liegt an dem neuen webstandards. Dazu siehe 1. Post. Die version fürn IE und andere ältere browser. http://82.218.28.51/tc/ie/
Da sollte es zumindestens bis zum 3 Punkt gehen

 

[nicoc]

... wenn ich mit dem ie 8 schaue verschwindet jedes Menü, also nicht nur bei "Tanzkurs". Erst wenn ich einmal auf das erste Menü klicke bleiben in der Folge die Menüs statisch. Meiner Ansicht nach bleibt dir nichts anderes übrig, als für den ie und Opera eine 2. Variation anzufertigen.

 

[XimeX]

Warst du mit IE8 auf http://82.218.28.51/tc/ie/?

So hab noch bissl rumgetestet und hab wieder was seltsames gefunden. Ich komme immer mehr zum Schluss das hier Opera und IE pfuschen.
Wenn ich <menu class="menu3"> eine background-color gebe funktioniert es auf einmal. zumindestens im Opera 11 und IE9. IE8 kann ich nimmer testen durch die RC von IE9.

Hab diese Version jetzt unter: http://82.218.28.51/tc/test/

Edit (10:24):
Hab noch paar kleine änderungen gmacht. Design ist jetzt 800px breit. Dann sollte sich die seite bei den typischen smartphones im breitbild format ausgehen. Außerdem ein kleiner fehler behoben das nicht der ganze eintrag im menü anklickbar ist

 

[nicoc]

... verwechselt. Habe jetzt http://82.218.28.51/tc/ie/ mit dem ie 8 ausprobiert. Dann trifft zu was du ganz oben schreibst, wenn mann aber auf das Hauptmenü klickt (Menü verschwindet) und man klickt noch mal, dann geht es. Was du vorhast geht mit dem Script nicht beim ie 8 und Opera.

http://82.218.28.51/tc/test/: hier geht auch nichts mit dem ie 8. Zum testen mit dem ie 8 brauchst du unbedingt einen Rechner auf dem er läuft.

 

[XimeX]

hmmm. echt seltsam...
Jedoch hab ich jetzt nen schmä gfunden wie es unter Opera 11 und IE9 funktioniert.
Ich hab jetzt einfach background-color: rgba(0,0,0,0); gesetzt. fertig! ist zwar seltsam aber so funktionierts. kann das wer noch mit IE8 testen?
http://82.218.28.51/tc/test/ie.html

Edit: So... hab mit einem Freund getestet. IE8 kann kein rgba... funktionieren würde es wenn ich einfach die hintergrundfarbe etc nehmen würde. schaut zwar nicht zu gut aus wie transparent aber es funzt! ich glaub so werd ichs jetzt machen. Ich bau jetzt mal alle seiten um. Dann meld ich mich wieder

Edit2: unter http://82.218.28.51/tc/ ist mal die gefixte version für alle modernen Browser wie FF 3.6+ Chrome Opera IE9,...
Für IE8 etc muss ichs noch machen

 

[nicoc]

... aber hier klappt es doch mit dem IE 8 (http://82.218.28.51/tc/test/ie.html). Oder legst du soviel Wert auf die Transparenz? Ist natürlich deine Entscheidung.