Chrissi: border-color: transparent und der MSIE

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

  1. 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

    1. 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

      --
      - Wissen ist gut
      - Können ist besser
      - aber das Beste und Interessanteste ist der Weg dahin!
      1. 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
        
      2. 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

      3. 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; }
        
        1. 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