Border bei Textlinks, nicht bei Bildern

I

Identität

Erfahrenes Mitglied
Hey!

Dieses Problem habe ich nun schon das zweite Mal und komme einfach nicht auf die Lösung. Mich nervt es ziemlich.

Einfach Mal der Code vorab:

Code: 
a {
    color: #454545;
    text-decoration: none;
    border-bottom: 1px solid #f80605;
}
a:hover{
    color: #000;
}
img{
    border: 0;
}

Wenn ich jetzt ein Bild verlinke, hat es trotzdem einen hässlichen Border unten. Bei den Textlinks soll Border sein, bei Bildern aber nicht. Hat dafür vielleicht jemand eine Lösung. Ich danke euch!
 
Du bist echt fleißig Maik.

Leider geht das auch nicht, ich hatte das vorhin selbst schon so stehen, nur anstatt dem none eine 0.

Oder kann es auch einen anderen Ursprung haben? Bin da ein bisschen hilflos, verstehe nicht ganz warum das so ist.
 
Dann zeig mal deinen Quellcode, um dem Ursprung auf den Grund gehen zu können.

mfg Maik
 
Hier ist die CSS-Datei. Im HTML ist ein ganz einfaches Bild mit einen <a href=""> drum. Ich bin gespannt, ob der Fehler gefunden wird, wie gesagt, ich finde ihn nicht.
* {
margin: 0;
padding: 0;
}
body{
background: #fff url(http://localhost/images/layout/bg_rot2.gif) repeat-x;
margin: 0;
padding: 0;
background-color: #f6f6f6;
text-align: center;
font: normal 13px arial,verdana,sans-serief;
color: #454545;
}
h1{
font: normal 20px Segoe UI,Arial,Verdana,sans-serief;
color: #f80605;
margin-bottom: 15px;
}
h2{
color: #f58220;
font: normal 18px Segoe UI,Arial,Verdana,sans-serief;
font-variant:small-caps;
margin-bottom: 10px;
}
p{
margin-bottom: 10px;
}
a {
color: #454545;
text-decoration: none;
border-bottom: 1px solid #f80605;
}
a:hover{
color: #000;
}
a img {
border: none;
}
#background{
background: #fff url(http://localhost/images/layout/bg_rot.jpg) no-repeat top;
width: 1000px;
height: 170px;
margin: 0 auto;
}
#container{
background: #f1f6fb url(http://localhost/images/layout/bg_container.gif) repeat-x top;
width: 810px;
min-height: 600px;
margin: -60px auto;
text-align:left;
border-top: 20px solid #fff;
border-left: 20px solid #fff;
border-right: 20px solid #fff;
}
#header{
background-color: #fff;
}
#logo{
margin: -90px 0 0 40px;
border: 0;
}
#fontsize{
margin:0;
float: right;
margin-top:-80px;
}
.fontchoice{
border: 0;
}
.fontchoice_active{
border: 0;
color: #777790;
}
#navi{
width: 195px;
float:left;
margin-top: -19px;
background-color: #f1f6fb;
padding: 60px 5px 10px 5px;
border-top: 1px solid #ccd8e4;
}
#content{
background-color: #fff;
width: 590px;
float: right;
min-height:600px;
padding-left:15px;
margin-top: -19px;
}
#meta_navi{
background-color: #f1f6fb;
border-top: 1px solid #ccd8e4;
border-bottom: 1px solid #ccd8e4;
padding: 5px;
text-align: right;
display: block;
font-size: 12px;
margin-bottom: 35px;
}
.headerimg{
margin-bottom: 15px;
}
#navi_container{
padding:3px;
background-color: #fff;
display:block;
}
#navi ul{
list-style-type: none;
}
#navi li a{
line-height: 28px;
margin-bottom: 1px;
padding-left: 25px;
background-color: #e6eced;
border: 0;
display:block;
}
#navi li a:hover{
background-color: #e3e8e9;
}
#navi li .navi_active{
color: #fff;
background-color: #f80605;
background: #f80605 url(http://localhost/images/layout/pfeil_navi.gif) no-repeat left;
}
#navi li .navi_active:hover{
color: #fff;
background-color: #f80605;
}
.navigator{
height: 25px;
background-color: #f80605;
color: #fff;
margin-bottom: 1px;
padding: 12px 0 18px 25px;
}
#footer{
clear:right;
min-height: 20px;
background: #f80605 url(http://localhost/images/layout/footer.gif) no-repeat top;
color: #fff;
margin: 0 -20px;
padding: 30px 20px 15px 20px;
}
Zum Vergrößern anklicken....
 
Zuletzt bearbeitet:
Okay, erweiter mal den Quellcode folgendermaßen:

Code: 
<a href="#" class="img"><img ...></a>
CSS: 
a.img, a.img img {
border: none;
}


mfg Maik
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück