css - hover mit firefox

tboggi

Hallo,

bin vor kurzem auf Firefox (von IE8 kommend) umgestiegen.

Da einiges nicht "Firefox" konform ist (meinetwegen auch valide), will ich nun folgendes Problem lösen.

Für die Navigation habe ich im Header ein transparentes Bild um den Hover-Effekt auszulösen.

Via css wil ich nun bei hover einen neuen Hintergrund einblenden lassen. Das neue Bild wird aber nur unterhalb des transparenten Bildes angezeigt und nicht anstelle dessen.

Code

#nav-gallerien{
    background: url(images/bg-gallerien.png) no-repeat;
    height: 90px;
    width: 125px;    
    float: left;
}

= Hintergrundbild wird einwandfrei dargestellt

Code

#nav-gallerien a:hover {
    background: url(images/bg-gallerien_hover.png) no-repeat;
}

=kein Hintergrundbild, bzw. nur unterhalb des transparenten Bildes.

Mache ich was falsch oder kann der firefox damit nichts anfangen??

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

telekommander

Wie sieht den der passende (wieauchimmervalideodernicht) Html-Code aus ?

Im Grunde definierst du zwei Hintergrundbilder, eins für die ID [FONT="Courier New"]#nav-gallerien[/FONT] und ein weiteres für den Link [FONT="Courier New"]a:hover[/FONT] innerhalb dieser ID [FONT="Courier New"]#nav-gallerien[/FONT].

tboggi

Der code in der header.php sieht so aus:

PHP

<div id="nav-impressum"><a href="<?php bloginfo('url'); ?>/impressum/" target="_parent"><img src="<?php bloginfo('template_url'); ?>/images/blank.png" /></a></div>

maxe

Hast du es denn mal so versucht:

Code

#nav-gallerien [B][COLOR=Red]a[/COLOR][/B] {
    background: url(images/bg-gallerien.png) no-repeat;
    height: 90px;
    width: 125px;    
    float: left;
}


#nav-gallerien a:hover {
    background: url(images/bg-gallerien_hover.png) no-repeat;
}

Alles anzeigen

tboggi

Ich habe es mal so versucht:

Code

#pixelio {
    width: 65px;
    height: 65px;
    float: left;
    margin-left: 30px;
    }


#pixelio a{
    background: url(images/pixelio-sw_128.png) no-repeat;
    padding-bottom: 60px;
}
#pixelio a:hover {
    background: url(images/pixelio_128.png) no-repeat;
}

Alles anzeigen

mit

HTML

<div id="pixelio"> <a href="#" target="_blank"> 
        <img src="<?php bloginfo('template_url'); ?>/images/blank.png" width="64" height="64" /> </a></div>

Bei diesem Beispiel (Höhe von blank.jpg) ist es im IE in Ordnung, im FF jedoch ist der Hintergrund unterhalb des blank.jpg.

Als Bilder habe ich mal angefügt die Ansicht im IE und FF. Die ersten beiden sind width und height = 64

Die beiden rechten sidn width=64 und height = 1

Willkommen! Melden Sie sich an oder registrieren Sie sich.

css - hover mit firefox

Jetzt mitmachen!