border-color: transparent und der MSIE
Chrissi
- css
0 Axel Richter0 Detlef G.0 Axel Richter0 Chrissi0 wahsaga
Hi!
Habe folgendes Test-Konstrukt:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="de">
<head>
<title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="content-style-type" content="text/css" />
<style type="text/css"><!--
body {margin:0; padding:0;}
a {display:block; width:50px; height:50px; background-color:#f00; border:15px solid transparent;}
a:hover {border-color:#00f;}
//--></style>
</head>
<body>
<a href="#">Testlink</a>
</body>
</html>
Bei allen Browsern wird der Rahmen "unsichtbar" dargestellt, nur der MSIE macht seine komische lila Farbe rein...
Kann der Microsoft Internet Explorer die "Farbe" transparent nicht darstellen?
Danke für Eure Hilfe, Chrissi
Hallo,
Bei allen Browsern wird der Rahmen "unsichtbar" dargestellt, nur der MSIE macht seine komische lila Farbe rein...
Kann der Microsoft Internet Explorer die "Farbe" transparent nicht darstellen?
Doch, aber nicht bei Rahmenlinien. Wäre JavaScript für Dich eine Alternative? Ansonsten müsstest Du Dir ein anderes HTML-Konstrukt für diesen Effekt einfallen lassen oder den IE ignorieren.
viele Grüße
Axel
Hallo Axel
... Wäre JavaScript für Dich eine Alternative? Ansonsten müsstest Du Dir ein anderes HTML-Konstrukt für diesen Effekt einfallen lassen oder den IE ignorieren.
Warum dies?
Mit einem geänderten CSS solte es auch im IE funktionieren.
a {display:block; width:50px; height:50px; background-color:#f00; padding:15px;}
a:hover {border:15px solid #00f; padding:0;}
Auf Wiederlesen
Detlef
Hallo,
... Wäre JavaScript für Dich eine Alternative? Ansonsten müsstest Du Dir ein anderes HTML-Konstrukt für diesen Effekt einfallen lassen oder den IE ignorieren.
Warum dies?
Weil ich es nicht besser wusste.
Mit einem geänderten CSS solte es auch im IE funktionieren.
a {display:block; width:50px; height:50px; background-color:#f00; padding:15px;}
a:hover {border:15px solid #00f; padding:0;}
Jetzt schon, danke!
viele Grüße
Axel
a {display:block; width:50px; height:50px; background-color:#f00; padding:15px;}
a:hover {border:15px solid #00f; padding:0;}
Wow, super Idee - so mach ichs, Danke
hi,
Mit einem geänderten CSS solte es auch im IE funktionieren.
a {display:block; width:50px; height:50px; background-color:#f00; padding:15px;}
a:hover {border:15px solid #00f; padding:0;}
Und wo ist jetzt die Transparenz?
Da background-color auch im padding-Bereich zu sehen ist, ist keine Transparenz existent.
Wenn der Hintergrund hinter dem a aber sowieso weiß ist, es also nichts ausmacht, hätte man auch nur border-color im Normalzustand weiß, und bei hover abweichend wählen können.
gruß,
wahsaga
--
/voodoo.css:
#GeorgeWBush { position:absolute; bottom:-6ft; }
Hallo,
Mit einem geänderten CSS solte es auch im IE funktionieren.
a {display:block; width:50px; height:50px; background-color:#f00; padding:15px;}
a:hover {border:15px solid #00f; padding:0;}
>
> Und wo ist jetzt die Transparenz?
>
> Da background-color auch im padding-Bereich zu sehen ist, ist keine Transparenz existent.
Die background-color vom A-Element wäre/war(in Browsern) auch hinter dem transparenten Border zu sehen <http://www.w3.org/TR/CSS21/colors.html#q2>. Der Effekt ist also der gleiche.
> Wenn der Hintergrund hinter dem a aber sowieso weiß ist, es also nichts ausmacht, hätte man auch nur border-color im Normalzustand weiß, und bei hover abweichend wählen können.
Nein, bitte probier es doch einfach aus!
viele Grüße
Axel