background-image im FF

Kroan

hi allerseits ich habe ein neues Problem^^

Nun muss ich für die FH meine Seite weiter ausbauen und möchte folgendes erreichen:
Die Links sind mit Orb's dargestellt. Hinter den Orb's soll wenn man mit der Maus drüber geht durch ein picture ein kleiner Rand angezeigt werden.
Das klappt auch wunderbar solange ich im IE bleibe. Gehe ich in FF oder Opera dann zeigt er das picture nicht hinter den Orb's an, sondern unter.

Weiß jemand Rat? Ein Bild zur veranschaulichung.
[Blockierte Grafik: http://s8.directupload.net/file/d/1959/9brll8nc_jpg.htm][Blockierte Grafik: http://s8.directupload.net/file/d/1959/9brll8nc_jpg.htm][Blockierte Grafik: http://s8.directupload.net/images/091026/9brll8nc.jpg]

Der CSS-Code

HTML

a {font-size:20px; color:#424242; text-decoration:none; margin-left:15px;}
a:hover { color:#5a5a5a; background-image:url(bilder/schein.png);}
table {color:#FFFFFF;}
img {border:0;}

Der HTML-Code

HTML

<html>
<head>
<title>Portfolio Dirk Denzer</title>


<link rel="stylesheet" type="text/css" href="style.css">




</head>
<body bgcolor="#1a001a">




<!--Tabelle mit komplettem Inhalt -->


<table border="0" width="1024px" height="768px">
    <tr>
        <td >


            <!--Tabelle mit Bild -->    


            <table border="0" width="100%" height="100%">
                <tr>
                    <td rowspan="2" width="410px">BILD</td>
                </tr>
                <tr>
                    <td width="614px" valign="top">


                        
                    <!--Tabelle mit Links und Inhalt -->


                        <table border="1">
                            <tr>
                                <td width="614px" height="100px" valign="top"> 
                                <a href="Index.html" ><img src="bilder/home.png"></img></a> 
                                <a href="vita.html"><img src="bilder/vita.png"></a> 
                                <a href="hobys.html"><img src="bilder/hobys.png"></a> 
                                <a href="picture.html"><img src="bilder/picture.png"></a> 
                                <a href="links.html"><img src="bilder/links.png"></a> 
                                </td>
                            </tr>
                            <tr>
                                <td width="614px" height="728px"  align="center"><br>
                                Hello and Welcome to my Portfolio.<br>
                                On this page you can find a lot of informations about me and my charakter.<br><br>
                                You can read something about my Hobbys, look some pictures of me or read my curriculum vitae. 
                                Everything you have to do is press on the links above. <br><br>
                                In the Categorie "Links" you will see some Hyperlinks to the town I live, a Link to my college 
                                and to the Website of my Design Professor Prof. Dr. Speck.<br><br>
                                Now, have fun with my portfolio.

                                </td>
                            </tr>
                        </table>
                    </td>


                </tr>

            </table>
        </td>
    </tr>
</table>






</body>
</html>

Alles anzeigen

Danke im vorraus =)

MfG Kroan

Grevas

1. geb den links die den hover haben sollen lieber ne eigene klasse
2. mach "display: block;" und floate die links
3. vergib feste größen, da die buttons anscheinend immer gleich breit sind <- zwar nicht zwingend, aber sinnvoll, vorallem bei den <img> tags und btw. du hast da ein </img> mach es weg ;).

/nachtrag zu 2.

fals du keine festen größen angeben kannst, musst du img:hover benutzen, vergib dem ganzen am besten gleich ne eigene klasse (z.B. .navi img:hover { /* bla */ } ), bei img:hover gibt es aber probleme mit dem IE, musst du dann selbst googlen soweit ich das in erinnerung hab braucht man da dummy hover für den <a> tag.

Kroan

YAY
bist de Traum hat direkt geklappt =)

THX

MfG Kroan

Grevas

gern, ahja grad getestet... mitm float kann man sich die trickerserei mit img:hover doch sparen *g*, fals hier noch jemand darüber stolpern sollte.

/p.s. nur nimmt der mir beispielsweise ".navi a{ }" garnicht an, da will der n img haben sonst klappts net, wenn ich mich auf alle <a> tags beziehe funzts - seeehr merkwürdige Sache ~.~

Tags