Link gestaltung als button via CSS

    Ich war etwas am ausprobieren, und binn dann an flgendes problem gestosen:
    Der IE 8 interpetiert folgenden code falsch:
    HTML:

    HTML
    <html>
<head>
<link href="styles.css" media="screen" rel="sylesheet" />
</head>
<body>
<div>
<a href="#">Testlink</a>
</div>
</body>
</html>


    styles.css:

    Code
    a:link {color: #FFFFFF; padding-left: 5px; padding-right: 5px; background url("tab_n.png") repeat-x;}
a:hover {color: #000000; padding-left: 5px; padding-right: 5px; background url("tab_h.png") repeat-x;}


    Der CSS muesste richtig sein, phase 5 macht keine probleme. bitte um hilfe! (tab_n.png nd tan_h sind 1x20px)

    Der, der weiß dass er nichts weiß, weiß mehr als der, der nicht weiß, dass er nichts weiß.

    Wer nach etwas fragt, geht grundsätzlich das Risiko ein, es auch zu bekommen!

    Ich hab nen doctype gesetzt:

    Code
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">


    und die doppelpunkte gesetzt:

    Code
    background: url("") repeat-x;


    Es wird nur der Text dargestellt.

    Der, der weiß dass er nichts weiß, weiß mehr als der, der nicht weiß, dass er nichts weiß.

    Wer nach etwas fragt, geht grundsätzlich das Risiko ein, es auch zu bekommen!

    Korrekter:

    Code
    background-image:url(bildname);

    Du musst auch immer die Breite und höhe angeben sonst wird da nix angezeigt

    Und wie die hoehe und breite angeben? In meim CSS-Buch steht da, dass man hintergruende fuer elemente so deffiniert:
    background: url(); oder background: #000000;
    hier der link:
    http://www.cheats-tn.de/test.html
    EDIT:
    driver:
    das stimmt alles

    Der, der weiß dass er nichts weiß, weiß mehr als der, der nicht weiß, dass er nichts weiß.

    Wer nach etwas fragt, geht grundsätzlich das Risiko ein, es auch zu bekommen!

    a:link{

    color: #FFFFFF;
    width:breite vom bild;
    height:höhe vom bild;
    background-image:url(bildname);
    display:block;


    }

    a:visited{

    color: #FFFFFF;
    width:breite vom bild;
    height:höhe vom bild;
    background-image:url(bildname);
    display:block;


    }


    etc

    Habs probiert. nur text. Ich glaube, der browser liest das stylesheet net. neuer code is online..
    http://www.cheats-tn.de/test.html

    Der, der weiß dass er nichts weiß, weiß mehr als der, der nicht weiß, dass er nichts weiß.

    Wer nach etwas fragt, geht grundsätzlich das Risiko ein, es auch zu bekommen!

    Einmal editiert, zuletzt von Tobse (1. Juni 2009 um 19:06)

    Ich glaub der fehler liegt daran, dass der browser das stylesheet net liest.
    Ich hab das jz halt wie pion sagte gemacht:
    width: 100; height: 20; background-image: url(bild.png) repeat-x;
    nur text...
    code is online.

    Der, der weiß dass er nichts weiß, weiß mehr als der, der nicht weiß, dass er nichts weiß.

    Wer nach etwas fragt, geht grundsätzlich das Risiko ein, es auch zu bekommen!

    Man mach keine Doppelposts, zudem hast du es NICHT so gemacht wie ich gemacht habe

    sry wegen der doppelposts, aber wenn die seite mir anzeigt, nachdem ich auf senden geklick hab, dass mein beitrag nich drin is, auch wenn ich mehrmals auf refresh klick, dann schreib ich halt nochmal was rein. Bei so ner organisation braucht man sich ueber doppelposts net zu wundern.
    EDIT:
    Pion, mit display:block; aendert sich GARNICHTS.

    Der, der weiß dass er nichts weiß, weiß mehr als der, der nicht weiß, dass er nichts weiß.

    Wer nach etwas fragt, geht grundsätzlich das Risiko ein, es auch zu bekommen!

    Einmal editiert, zuletzt von Tobse (1. Juni 2009 um 19:16) aus folgendem Grund: s.o.



    Hintergrundfarbe sollte man dazu noch mit background-color: #000000; auszeichnen auch wenn es oben nur um den IE8 ging:)

    Einmal editiert, zuletzt von reeperbahner11 (1. Juni 2009 um 21:25)

    a) man kann auch background: url repeat ... schreiben

    b) du könntest mal schauen ob er die dinge frisst, wenn dus einzeln machst.
    also erst background-image, dann background-repeat, dann background-color...

    c) gib mal die css-einbindung so an...,

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

    1. Geb höhe und breite immer mit px an ;)

    20 oder 30 geht net , du musst 20px oder 20% oder was weiss ich nehmen ;)

    2. display:block; verwenden da <a> kein block element ist und du es ja zu einem nachen willst ;)

    3. wenn du nur a:link und a:active hast solltest du a auch mal definieren ;) :Ddas sollte helfen ;)

    display:block; war schon drin. ich hab halt das type-Attribut im link-Tag vergessn. ich hab das jetzt also folgendermasen:

    Code
    a {color: #FFFFFF; width:1px; height:20px; background-image: url("tab_n.png") repeat-x; display:block;}
a:hover {color: #000000; width:1px; height:20px; background-image: url("tab_h.png") repeat-x; display:block;}


    Das ergebniss ist, dass der nur weiss dargestellt wird. Abermit mehr abstand.
    Mit der einzel-methode von driver kommt das gleiche raus.
    einfach den link von frueher benutzen, seite is online.

    Der, der weiß dass er nichts weiß, weiß mehr als der, der nicht weiß, dass er nichts weiß.

    Wer nach etwas fragt, geht grundsätzlich das Risiko ein, es auch zu bekommen!

    lern erstmal css dann wird das auch vllt mal was ;)

    ausserdem darfste beim background keine "" machen du musst das so schreiben:

    background-image: url(tab_n.png) repeat-x; und ein button von 1px breite bringt dir auch net viel ;) :D den sieht man ja gar net :D

    Ich bin gerade mit dem CSS buch fertig und versuche das jz auf meine homepage anzuwenden. @Macro: Was glaubst du wozu repeat-x dasteht? Damit der Button so gross wie die schrft ist, jedoch mit wenig ladeaufwand.

    Der, der weiß dass er nichts weiß, weiß mehr als der, der nicht weiß, dass er nichts weiß.

    Wer nach etwas fragt, geht grundsätzlich das Risiko ein, es auch zu bekommen!

    Gewöhn dir mal nen schöneren stiel an nehm background-repeat nicht nur repeat

    Und hör mal auf andere und fang wendlich mal an zu testen und net jeden schmarn nachzufragen

    wIE MACRODESIGN schon sagt bringt eine button von 1nen pixel nicht viel

    width:1px; ändern zu width:wiebreitderbutton sein soll;

    Und da ja eigentlich die totale Höhe und Breite angegeben wird, kannst du das repeat-x getrost weglassen. Vielleicht liegt es auch daran..

    Ich zitiere - mich:
    "Ohne Preis, kein Schweiß... :cool:"