CSS Problem mit background-image und Firefox

walterbt · 18.01.2006, 23:29

Hallo
wollte für eine Seite gerade eine Navigation erstellen mit css und Background-Image.
Unter Internet Explorer wird es korrekt angezeigt. Beim Firefox erscheint das Hintergrundbild zwar irgendwie aber zu weit unten.
Hier der Link zum anschauen http://www.bude-beira.de/test/

Hier der Quellcode der HTML Datei

Code:

<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="css/base.css">
<meta name="author" content="Administrator">
<meta name="generator" content="Ulli Meybohms HTML EDITOR">
</head>
<body bgcolor="#ffffff">
<table>
<tr>
<td height="50" width="89"><a href="html/main.html" id="home"><img height="50" width="89" border="0" src="images/button/home.gif"></a></td>
<td height="50" width="89"><a href="html/lebenslauf.html" id="lebenslauf"><img height="50" width="89" border="0" src="images/button/lebenslauf.gif"></a></td>
</tr>
</table>

</body>
</html>

und hier der Code der CSS Datei

Code:

a#home:hover {
background-image:url(../images/button/home.jpg);
background-attachment:fixed;
}

a#lebenslauf:hover {
background-image:url(../images/button/lebenslauf.jpg);
background-attachment:fixed;
}

wäre nett wenn mir da jemand weiter helfen könnte.
Grüße

rewboss · 18.01.2006, 23:38

Wieso hast du background-attachment:fixed drin? Das ergibt eigentlich keinen Sinn. Was passiert, wenn du das weglässt?

walterbt · 18.01.2006, 23:43

Hallo rewboss,

wenn ich es weglasse habe ich leider das gleiche Problem

gruß

webmichl · 19.01.2006, 00:16

so funktionierts:

Code:

a { width: 89px; height: 50px; display: block; }
a:hover { background-image: url( home.jpg);
}

lipsum · 19.01.2006, 00:16

schreib

HTML-Code:

display:block;

statt

HTML-Code:

background-attachment:fixed;

einen fixierten hintergrund brauchst du ja nicht.

gruß
steffen

ps: überdenk nochmal, ob der link unbedingt als transparentes gif mit nen hovernden hintergrund ausgeführt sein muß, oder ob´s ein normaler text mit hintergrund auch tut - ist auf alle fälle nutzerfreundlicher.

webmichl · 19.01.2006, 00:18

um Sekundenbruchteile schneller...

walterbt · 19.01.2006, 00:23

Perfekt. Vielen Dank funktioniert bestens.

Werde mir da mal noch meine Gedanken machen.
Das Problem das ich dann eben immer hatte war das das Hintergrundbild dann immer nur so groß angezeigt wurde wie der Text war.
Da hab ich eben zu dieser Notlösung mit den Gifs gegriffen.
Nochmals Danke

webmichl · 19.01.2006, 00:25

Zitat:

Zitat von walterbt

...Das Problem das ich dann eben immer hatte war das das Hintergrundbild dann immer nur so groß angezeigt wurde wie der Text war...

Genau dieses Problem löst Du mit dem display: block; und den Größenangaben.

lipsum · 19.01.2006, 00:25

Zitat:

Zitat von webmichl

um Sekundenbruchteile schneller...

das war mein respektsbeweis dir gegenüber.

webmichl · 19.01.2006, 00:28

Ehrfurcht vor dem Alter, hmm?

walterbt · 19.01.2006, 00:32

Habe es jetzt ohne Gifs ausprobiert und funktioniert bestens.
Perfekt, danke nochmals.
Ihr habt mir die Nacht gerettet

lipsum · 19.01.2006, 00:34

Zitat:

Zitat von webmichl

Ehrfurcht vor dem Alter, hmm?

genau. ich hab nur keinen verbeugungssmilie gefungen...

das gibt bestimmt schimpfe von rea wegen OT...