Schlichte Navigation macht was sie will

[XeonNightfall]

Hallo html.de-Community,

ich sitzte schon seit heute Morgen an einer eher einfach Navigation und bekomm es einfach nicht hin.

Will auf meinem Blog eine Navigation bestehend aus einer Hintergrundgrafik und 5 Buttons mit Rollover-Effekt einbinden.
Auf meinem Windows mit Firefox funktioniert auch alles wie es soll.

Doch bereits auf dem Mac mit Firefox werden die ersten 3 Buttons beim drüberfahren manchmal komplett ausgeblendet. Wahllos und auch nur die ersten drei obwohl der Code identisch ist -_-

Mit anderen Browsern ist es noch schlimmer. Da werden die Buttons einfach 1-2 Pixel nach unten verschoben (nicht alle).

Es geht um diese Seite: Scythe Society | Geschichten, Hörspiele und Philosophie (der Baum auf der rechten Seite).

Dies ist der Code den ich dafür geschrieben habe:

<table style="background-image: url('http://www.scythesociety.de/wp-content/themes/diary/images/navi_scythe_society_hg_2.png');" width="218" height="709" border="0"><tbody><tr><td>

<div style="position:relative; top:156px; left:67px;">
<a onmouseover="geschichten.src='http://www.scythesociety.de/wp-content/themes/diary/images/navi_geschichten_rot.png';" onmouseout="geschichten.src='http://www.scythesociety.de/wp-content/themes/diary/images/navi_geschichten.png';" href="http://www.scythesociety.de/geschichten">
<img src="http://www.scythesociety.de/wp-content/themes/diary/images/navi_geschichten.png" alt="Geschichten" name="geschichten" width="83" height="36"></a></div>

<div style="position:relative; top:196px; left:72px;">
<a onmouseover="hoerspiele.src='http://www.scythesociety.de/wp-content/themes/diary/images/navi_hoerspiele_rot.png';" onmouseout="hoerspiele.src='http://www.scythesociety.de/wp-content/themes/diary/images/navi_hoerspiele.png';" href="http://www.scythesociety.de/hoerspiele">
<img src="http://www.scythesociety.de/wp-content/themes/diary/images/navi_hoerspiele.png" alt="Hörspiele" name="hoerspiele" width="69" height="25"></a></div>

<div style="position:relative; top:235px; left:69px;"><a onmouseover="philosophie.src='http://www.scythesociety.de/wp-content/themes/diary/images/navi_philosophie_rot.png';" onmouseout="philosophie.src='http://www.scythesociety.de/wp-content/themes/diary/images/navi_philosophie.png';" href="http://www.scythesociety.de/philosophie"><img src="http://www.scythesociety.de/wp-content/themes/diary/images/navi_philosophie.png" alt="Philosophie" name="philosophie" width="82" height="28"></a></div>

<div style="position:relative; top:274px; left:88px;">
<a onmouseover="uebermich.src='http://www.scythesociety.de/wp-content/themes/diary/images/navi_uebermich_rot.png';" onmouseout="uebermich.src='http://www.scythesociety.de/wp-content/themes/diary/images/navi_uebermich.png';" href="http://www.scythesociety.de/ueber-mich">
<img src="http://www.scythesociety.de/wp-content/themes/diary/images/navi_uebermich.png" alt="Über Mich" name="uebermich" width="39" height="84"></a></div>

<div style="position:relative; top:312px; left:63px;">
<a onmouseover="unterstuetzen.src='http://www.scythesociety.de/wp-content/themes/diary/images/navi_unterstuetzen_rot.png';" onmouseout="unterstuetzen.src='http://www.scythesociety.de/wp-content/themes/diary/images/navi_unterstuetzen.png';" href="http://www.scythesociety.de/unterstutzen">
<img src="http://www.scythesociety.de/wp-content/themes/diary/images/navi_unterstuetzen.png" alt="Unterstützen" name="unterstuetzen" width="90" height="22"></a></div></td></tr></tbody></table>

Fragt mich bitte nicht warum ich was gemacht habe. Ich hab selber keine Ahnung. Eigentlich bin ich Schriftsteller und habe mit HTML und co. so gar nichts am Hut. Ich denke das sieht man am Code =/ Ich wäre für jede Hilfe wirklich ewig dankbar. Bin total frustiert und will gerade einfach nur noch alles hinschmeißen...

Falls mir jemand den Code schreiben könnte, würde ich als Gegenleistung ihn auch auf meinem Blog in einem Artikel mit einem do-follow-Link zu seiner Seite erwähnen. Aber auch über Tipps würde ich mich sehr freuen.

Danke schonmal im vorraus und verzeiht mir die etwas stürmische Art, im ersten Post gleich um Hilfe zu bitten.

 

[threadi]

Dein HTML-Code ist nicht fehlerfrei:
[Invalid] Markup Validation of http://www.scythesociety.de/ - W3C Markup Validator

Zudem hast Du Tabellengerüste für Inhalte verwendet die keine Tabellen sind - z.B. für das Menü.

Bei mir (Linux -> Firefox) wird es aus meiner Sicht korrekt dargestellt. Es wäre ungewöhnlich wenn es unter Windows und Mac anders dargestellt werden würde. Meist hängt dies wenn überhaupt mit unterschiedlichen Schriftarten zusammen, die auf dem einen System vorhanden sind, auf dem anderen nicht. Das sehe ich hier aber nicht, da Du für das Menü Bilder verwendet hast (was btw. auch Nachteile bzgl. Suchmaschinen mit sich bringt).

Wenn Du deine Webseite von jemandem optimieren lassen möchtest, wende dich bitte an die Jobbörse.

 

[mermshaus]

Mein Verdacht war, dass dieser Effekt…

Doch bereits auf dem Mac mit Firefox werden die ersten 3 Buttons beim drüberfahren manchmal komplett ausgeblendet. Wahllos und auch nur die ersten drei obwohl der Code identisch ist -_-

…dadurch zustande kommt, dass die neuen Grafiken noch nicht im Cache sind, also nachgeladen werden müssen.

Aber das ist auch irgendwie Spekulation.

Generell interessant vielleicht: http://www.alistapart.com/articles/sprites (oder Suche nach „css sprites“)

 

[XeonNightfall]

Danke euch zwei für eure Antworten.

Das meine Seite noch Fehler aufweist habe ich bereits entdeckt. Leider habe ich große Probleme die Zeilen im Code zu finden, da Wordpress (bzw. das Theme, oder besser gesagt jedes Theme) in mehrere html-Dateinen aufgeteilt ist. Selbst wenn ich beginne akribisch zu suchen, finde ich die aufgelisteten Fehler nur selten und bei manchen weiß ich nicht genau, wie ich sie lösen soll.

In die Jobbörse würde ich sehr gern ein Jobangebot posten, dass mal jemand meine Seite 'general' überholt und mir alles vom Code her schick macht. Ich habe auch ein Problem mit Google (er zeigt mir die Falsche Description an). Allerdings glaube ich nicht, dass ich genügend Geld bieten könnte =/

An eine Lösung mit CSS habe ich auch schon gedacht. Aber mein Hirn will CSS einfach nicht verstehen. Ich hab auch schon gehört, dass es nicht so schwer sein soll, aber ich werd einfach nicht damit warm.

EDIT:
Ich habs doch tatsächlich geschaft! Falls jemand irgendwann mal das selbe Problem haben sollte: Dieses Tutorial hat mir geholfen -> http://webdesignerwall.com/tutorials/advanced-css-menu

Der Lösungsweg ist eigentlich genau der Selbe nur eben über CSS. Extram gut erklärt (ich habs immerhin verstanden ^^) und getestet hab ichs auf im Firefox (aktuelle Version), Safari (keine Ahnung welche Version), Opera (aktuelle Version) und im Internet Explorer 7, 8 und 9.

Auch das Mac-Windows-Problem hat sich damit gelöst!