✔ Wie lassen sich diese Grafikunterschiede erklären?

[lp-chester]

Guten Abend.
Ich habe schon wieder ein kleines Problem, auf dieser Seite: http://www.reiterhof-witzenhausen.de/rhw/.

Nach der sehr intensieven Hilfe von Gumbo (nochmals Danke), habe ich die Navigation nun meine Wünschen angepasst - Das dachte ich zumindest.
Ich benutze zur Zeit den Firefox 1.0.4. Die Navigation wird fehlerfrei dargestellt, egal welche Anzeigegröße man eingestellt hat.
Wenn man sich jedoch das ganze im IE ansieht ist das eine reine Katasrophe! Die Grafiken in der Navigation haben sich extrem verschoben, und ich weiß leider nicht warum.

Wie würdet ihr dieses Problem lösen, oder wo liegt der Fehler?

Habe schonmal den Validator angeschmissen, welcher mir CSS und HTML als validiert ausgegeben hat.

Vielen Dank, Vianney

P.S.: Der einzige Menüpunkt der z.Z. funktioniert ist "Bilder" (in dem dann erscheinenden Submenü sind auch Fehler, welche ich mir nicht erklären kann.



EDIT:
Ich habe mir jetzt folgendes überlegt:
Wenn man auf die Seite kommt, muss man zunächst auswählen welchen Browser man verwendet.

Habe jetzt Firefox, Opera und IE ausprobiert. Nur der IE braucht wie oft auch ne Extrawurst ^^



Ich hab würde noch gerne eure Meinung wissen: Welche Browser sollte ich noch zur asuwahl anbieten?

 

[Loomis]

Hier 2 Lösungsvorschläge.

Verzeih mir aber um die Uhrzeit ist das lesen eines 351 Zeilen langen CSS-Files zu mühselig, sollte keine Lösung helfen sag bescheid dann schau ich mir das nochmal an

1: Anstatt Bilder einfach Textlinks, was bei dieser Schriftart nicht schwer sein sollte, denn das sieht nach ner Standart Schrift aus

2: CSS ändern.

#nav-main-item-1 a {
	width:			28px;
	background-image:	url(grafiken/nav/home_off.gif);
	position: 		absolute;
	left: 			-1px;
	top: 			0px;
}
#nav-main-item-1 a.active,
#nav-main-item-1 a:hover {
	background-image:	url(grafiken/nav/home_on.gif);
	position: 		absolute;
	left: 			-1px;
	top: 			0px;
}

hier würde ich spontan und uhrzeitbezogen sagen das der code so aussehen sollte, bzw so in die richtung

#nav-main-item-1 a {
	width:			28px;
	background-image:	url(grafiken/nav/home_off.gif);
	position: 		absolute;
	left: 			-1px;
	top: 			0px;
    background-repeat: no-repeat;
}
#nav-main-item-1 a.active,
#nav-main-item-1 a:hover {
	background-image:	url(grafiken/nav/home_on.gif);
	position: 		absolute;
	left: 			-1px;
	top: 			0px;
    background-repeat: no-repeat;
}

 

[lp-chester]

Danke für deine Antwort Loomes.
Zu 1. Wird schwierig, weil die Schrift ein wenig verengt geschrieben wurde. Ist soetwas auch mit CSS möglich? (z.B. Anstatt "W o r t" "Wort" <- Beispiel)

Zu 2. Dieser Codeschnipsel beseitigt leider nicht mein Problem. Du dachtest wahrscheinlich das sich die rafiken wiederholen, es ist aber nur der HIntergrund, den ihc zur Ausrichtung verwendet habe. (Bleibt wahrscheinlich)

Trotzdem Danke. Vianney

 

[Loomis]

Du kannst den Buchstabenabstand beliebig verändern.

letter-spacing:2px

Das funktioniert mit allen Browsern und sollte somit keine Abweichung beim betrachten mehr verursachen.

Positiver nebeneffekt: Du spart gute 250 Zeilen reinen CSS-Code in deinem css-file!

 

[lp-chester]

Gibt es dann auch noch die Möglichkeit, das der Link aktiv bleibt, weil Gumbo hat mir ein sehr schönes Serverseitiges Skript erstellt, welches ich nicht einfach so wegwerfen möchte. Ich weiß das es Active-Effekte bei einbem Link gibt, aber da die Seite neu geladen wird, verfällt dieser.

Vianney

 

[Loomis]

Das lässt sich mit einem PHP-Skript recht einfach lösen.

Um das zu erklären müsste ich deinen Wissensstand zum Thema PHP wissen.

 

[Dennis Wronka]

EDIT:
Ich habe mir jetzt folgendes überlegt:
Wenn man auf die Seite kommt, muss man zunächst auswählen welchen Browser man verwendet.

Habe jetzt Firefox, Opera und IE ausprobiert. Nur der IE braucht wie oft auch ne Extrawurst ^^



Ich hab würde noch gerne eure Meinung wissen: Welche Browser sollte ich noch zur asuwahl anbieten?

Ich hab meine Site mit Konqueror, Mozilla (Linux und Windows), Firefox, Netscape (7 und 8), Opera und Lynx getestet.
Okay, der Lynx nimmt sich von CSS als reiner Textbrowser nichts an, aber bei meinen Tests bin ich auch zum Schluss gekommen, dass nur dieser unsaegliche IE eine Extrawurst braucht.

Das hat zu folgendem Code gefuehrt:

<?php
if ((strpos($_SERVER['HTTP_USER_AGENT'],"MSIE")) && (!strpos($_SERVER['HTTP_USER_AGENT'],"Opera")))
 {
  $css='layout-ie'; 
 }
else
 {
  $css='layout';
 }
?>

Du brauchst also keine Browserauswahl anbieten, sondern pruefst selbst welcher Browser eingesetzt wird und entscheidest anhand dessen.
In meinem Code gibt es halt CSS fuer IE, und CSS fuer alle anderen. Dass Opera im IF erwaehnt wird liegt daran, dass man in Opera einstellen soll er soll sich als IE ausgeben. Jedoch steht auch dann noch das Woertchen Opera im UserAgent. Daher: if IE && !Opera, um's mal in Pseudo-Code auszudruecken.

 

[lp-chester]

Vielen Dank reptiler, das war genau das wonach ich gesucht habe. Fallen Firefox und die anderen von dir genannten Browser benfalls unter die "Rubrik" Opera, oder muss ich diese auch noch mit einbinden?

Vanney

EDIT:
Habe jetzt mal das Skript ausprobiert, doch das läuft nicht. (Hab ihc mir schon fast gedacht ) Liegt des vllt dadran, dass ich die stylesheet-location nicht angegeben habe? Wenn ich das machen muss, wäre ich ihr sehr Dankbar über eine kleine Einweisung

Vianney

 

[Dr Dau]

Hallo!

Die anderen Browser fallen nicht unter Opera.
In $css='layout-ie'; kommen die CSS-Anweisungen für den IE und Opera.
In $css='layout'; kommen die CSS-Anweisungen für alle übrigen Browser.

Der einfachhalt halber würde ich mit externen CSS-Dateien arbeiten und diese mit echo() einbinden.

Gruss Dr Dau

[edit] wenn Du dir das Script anschaust, wirst Du sicherlich sehen dass noch etwas fehlt, irgendwas muss ja mit $css passieren. [/edit]

 

[lp-chester]

Danke für deinen Tipp Dr Dau.

Habe es nun geschafft. Wer sich das ganze anschauen möchte kann hier klicken.
Jetzt muss ich nur noch die Positionsangaben für den IE vornhemen.

Danke, Vianney