background-images werden wegen im Firefox nicht angezeigt! wegen ALT-TAG?

[the_Stibä]

So wie auf dem Bild vom Chrome sollten meine Buttons aussehen! Leider ist im Firefox NICHTS zu sehen.
Ich habe rausgefunden, dass wenn ich ins alt tag "fhfd" reinschreibe, das bild dann soviel platz wie "fhfd" braucht einnimmt - aber wie kann ich das ganze Bild zurück holen????
Die Bilder lade ich als background-image rein weil ich dann noch ein :hover image machen will.

            <div id="work"><h1>Work</h1>
                    <div id="workicons">
                        <a href="seiten/work.html"><img class="firsticon" alt="" id="illustrator"></a>
                        <a href="seiten/work.html#flash"><img class="icon" alt="" id="flash"></a>
                        <a href="seiten/work.html#indesign"><img class="icon" alt="" id="indesign"></a>
                        <a href="seiten/work.html#premiere"><img class="firsticon" alt="" id="premiere"></a>
                        <a href="seiten/work.html#photoshop"><img class="icon" alt="" id="photoshop"></a>
                        <a href="seiten/work.html#htmlcss"><img class="icon" alt="" id="dreamweaver"></a>
                        <a href="seiten/work.html#uek"><img class="firsticon" alt="" id="uek"></a>
                        <a href="seiten/work.html#projekte"><img class="icon" alt="" id="projekte"></a>
                        <a href="seiten/work.html#fotografie"><img class="icon" alt="" id="foto"></a>

                       
                    </div>
                </div>

Hier mein CSS:
#work{
width:100%;
height:100%;
padding-top: 10%;
}
#workicons{
width: 709px;
height: 685px;
margin: 0 auto;
}
.firsticon{
margin-bottom: 50px;
width: 200px;
height:195px;
box-shadow: 0px 1px 10px black;
-webkit-box-shadow: 0px 1px 10px black;
-moz-box-shadow:0px 1px 10px black;
}
.icon{
margin: 0 0 50px 50px;
width: 200px;
height:195px;
box-shadow: 0px 1px 10px black;
-webkit-box-shadow: 0px 1px 10px black;
-moz-box-shadow:0px 1px 10px black;
}
#illustrator{
background-image:url(../logos/illustrator_1.jpg);
}
#flash{
background-image:url(../logos/flash_1.jpg);
}
#indesign{
background-image:url(../logos/indesign_1.jpg);
}
#premiere{
background-image:url(../logos/premiere_1.jpg);
}
#photoshop{
background-image:url(../logos/photoshop_1.jpg);
}
#dreamweaver{
background-image:url(../logos/dreamweaver_1.jpg);
}
#uek{
background-image:url(../logos/uek.jpg);
}
#projekte{
background-image:url(../logos/projekte.jpg);
}
#foto{
background-image:url(../logos/foto.jpg);
}

 

[Tronjer]

Ein Image-Tag mit Background-Images zu belegen. Darauf muss man erstmal kommen ... :(

Der Inhalt des Alt-Attributes wird angezeigt, weil den Image-Tags das Source-Attribut fehlt. Was denkst du wohl, wozu <alt> da ist? Da das Image-Tag ein Inline-Element ist, besitzt es keine Breite und Höhe, und aus dem Grunde wird vom Bild soviel anzeigt, wie der Inhalt des Alt-Attributs an Platz einnimmt.

Mit dem Wissensstand wird das nichts mit deiner Webseite.

 

[threadi]

Weise die Hintergrundbilder dem Link zu und lass die img-Elemente weg.

 

[the_Stibä]

Weise die Hintergrundbilder dem Link zu und lass die img-Elemente weg.

Dann muss ich was genau schreiben? wenn ich aus:
<a href="seiten/work.html"><img class="firsticon" alt="" id="illustrator"></a>
<a href="seiten/work.html" class="firsticon" alt="" id="illustrator"></a>
mache geht es nicht

 

[threadi]

Ja, so wie Du es im HTML-Code schreibst passt es schon. Jetzt sieht man die Hintergrundbilder vermutlich nur deswegen nicht, weil die Links keine Blockelemente sind und somit keinen Raum einnehmen. Also musst Du ihnen noch die CSS-Eigenschaft "display: block;" geben.

 

[Tronjer]

<a href="seiten/work.html" class="firsticon" alt="" id="illustrator"></a>

Außerdem ist das Alt-Attribut hier falsch.