Bob May: Link ohne CSS als Text, ohne Bild, mit CSS als Bild ohne Text

Beitrag lesen

Moin also zuerstmal das Problem und dann der Code.

Also wie man sehen kann will ich ein strictes HTML dokument haben, welches auch validiert werden kann. Und es soll mit CSS umgesetzt werden, um somit eine Textversion ohne Bilder und eine Style version zu bekommen.

Mein Problem ist nun das es ja nicht geht ein Bild direkt per CSS einzufügen so wie das mit dem <img> Tag geht, also nur als Hintergrund möglich (Bachground-image). Wenn ich mich da vertuhe bitte sagen, weil dann könnte das problem kein problem mehr sein ;D

So nun aber zur eigentlichen sache.
Wie man sieht will ich in der Version ohne CSS einen Downloadlink einfügen als text (Download PDF). In der CSS Version soll dieser Text aber nicht mehr angezeigt werden und an stelle davon ein Bild. Das währe ja mit Hintergrund kein PRoblem, nur das ich es eben nicht hinbekomme das das Bild dann als Link eingebaut wird.
So wie ich es unten habe mit dem <p> innerhalt des <a> Tags funktioniert es zwar, ist aber eben nicht valid.
Währe echt super wenn mit da jemand helfen könnte. Ist dringend.

MfG

Bob

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Unbenanntes Dokument</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
        <style type="text/css" media="screen">
 <!--
            #link_pdf .p1{
            width: 57px;
            height: 58px;
            BACKGROUND-IMAGE: url(file_pdf.gif);
            }
            #link_pdf span {
            display:none;
            }
 -->
        </style>
</head>

<body>
    <div id="download">
        <a id="link_pdf" href="the.pdf">
     <p class="p1">
         <span>
                   Download PDF
                </span>
             </p>
   </a>
    </div>
</body>
</html>