Hintergrundbild bei verlinktem Bild

Ron69

Ron69

gesperrt
Hallo, kennt jemand das?

so soll es aussehen und tut es auch mit dem IE: richtig.gif
richtig.gif


so machen es Mozilla und Opera: falsch.gif
falsch.gif


das ist die CSS-Sequenz:

a:link {color:black;font-size:12pt;
font-family:Helvetica,Verdana,Arial,Sans-Serif;
background-image: url(bilder/grau.gif)}
a:active {color:#006699;font-size:12pt;
font-family:Helvetica,Verdana,Arial,Sans-Serif;
background-image: url(bilder/rot.gif)}
a:visited {color:black;font-size:12pt;
font-family:Helvetica,Verdana,Arial,Sans-Serif;
background-image: url(bilder/grau.gif)}
a:hover {color:#0099CC;font-size:12pt;
font-family:Helvetica,Verdana,Arial,Sans-Serif;
background-image: url(bilder/rot.gif)}
a img {border:0px}
.menu {width:135px;
padding:5px}


und das ist der HTML-Code:

<table border="1"><!-- navigation -->
<td class="menu"><a href="innen-start.html"><img src="bilder/start.gif" width="125" height="51" border="0" alt=""></a></td>
<td class="menu"><a href="innen-aboutme.html"><img src="bilder/aboutme.gif" width="125" height="51" border="0" alt=""></a></td>
<td class="menu"><a href="innen-workouts.html"><img src="bilder/workouts.gif" width="125" height="51" border="0" alt=""></a></td>
<td class="menu"><a href="innen-contact.html"><img src="bilder/contact.gif" width="125" height="51" border="0" alt=""></a></td>
<td class="menu"><a href="innen-links.html"><img src="bilder/links.gif" width="125" height="51" border="0" alt=""></a></td>
</table>

also irgendwie beißen sich die Bilder, das Problem kennt doch sicher jemand.
 
Ich bin nicht sicher, ob die ersten paar Punkte das Problem beheben:

1. Gönne Deiner Tabelle doch auch noch eine Zeile, in der die Tabellenzellen dann aufgereiht sind. Also nach <table> erst ein <tr>, dann die <td>s und dann das </tr> und </table.
2. Was für ein Rahmen soll das denn um die Tabelle sein? <table border="1"> Im Bild hast Du keinen Rahmen. Wenn Du keinen willst, setze border="0".
3. Für den Fall, dass jemand die Anzeige von Bildern abgeschaltet hat, ist Deine Navigation funktionslos - solange alt="". Wenn Du dort den Text einsetzt, den das jeweilige Bild zeigt, kommt auch jemand ohne Bilder weiter.
4. Vielleicht interpretieren die standardkonformen Browser Firefox und Opera Deine fehlende Angabe zur Position des Hintergrundbildes anders, als der "ich-fresse-jeden-Müll"-InternetExplorer. Probier mal mit SELFHTML: Stylesheets / CSS-Eigenschaften / Hintergrundfarben und -bilder ein wenig herum, möglicherweise erzielst Du mit 'background-position: top;' oder 'background-position: center;' eine in den drei Browsern übereinstimmende Darstellung.
 
moin,

probier es mal so:

a:link { display: block;
color:black;
font-size:12pt;
font-family:Helvetica,Verdana,Arial,Sans-Serif;
background-image: url(bilder/grau.gif)
}

a:active {display: block;
color:#006699;font-size:12pt;
font-family:Helvetica,Verdana,Arial,Sans-Serif;
background-image: url(bilder/rot.gif)
}

a:visited {display: block;
color:black;
font-size:12pt;
font-family:Helvetica,Verdana,Arial,Sans-Serif;
background-image: url(bilder/grau.gif)
}

a:hover {display: block;
color:#0099CC;
font-size:12pt;
font-family:Helvetica,Verdana,Arial,Sans-Serif;
background-image: url(bilder/rot.gif)
}

a img {border:0px
}

.menu {width:135px;
padding:5px
}
Zum Vergrößern anklicken....

guckst Du auch hier

:)
 
Zuletzt bearbeitet:
danke, ich werde mal rumprobieren, ein paar gute Ideen sind dabei.
( das border="1" war nur ein Test, hab ich schon wieder auf null gesetzt)
 
@Madame Sie haben 100 Punkte - das wars.
Diese CSS-Eigenschaft kannte ich noch gar nicht.

@T-Matze
Danke für die Hinweise, hab es berichtigt.

Und das [width:135px;] in der class menu waren auch von Übel.

Aber jetzt paßt es. Zu bewundern bei clirim.de

Gruß
Ron
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Oben