Mit border-radius.htc erzeugte runde Ecken

In diesem Anzeigebereich wurden die runden Ecken im Internet Explorer mit border-radius.htc erzeugt. Wenn man in die Textarea klickt, ändert sich deren Höhe und man sieht deutlich den Unterschied zur PIE.htc Version.

Mit PIE.htc erzeugte runde Ecken

In diesem Anzeigebereich wurden die runden Ecken im Internet Explorer mit PIE.htc erzeugt. Wenn man in die Textarea klickt, ändert sich deren Höhe und man sieht deutlich den Unterschied zur border-radius.htc Version.

Quelltext dieser Webseite

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <title>Checkbox zum de/aktivieren von anderen Elementen</title>
  5.        
  6.         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  7.         <meta http-equiv="content-language" content="de" />
  8.         <meta http-equiv="expires" content="0" />
  9.                
  10.         <style type="text/css">
  11.             body{
  12.                 font-family: verdana, georgia, arial, sans-serif;
  13.                 font-size: 13px;
  14.             }
  15.             .sourcecode {
  16.                 border:1px solid #c0c0c0;
  17.                 background-color:#f8f8f8;
  18.                 margin:10px 5px;
  19.                 padding:10px;
  20.             }
  21.  
  22.             .example {
  23.                 float:left;
  24.                 width:45%;
  25.                 margin-right:1em;
  26.             }
  27.             .borderradius{
  28.                 background:#ffffff;
  29.                 border:4px solid #80a0f0;
  30.                 border-radius:15px;
  31.                 -webkit-border-radius:15px;
  32.                 -moz-border-radius:15px;
  33.                 -khtml-border-radius:15px;
  34.                 behavior:url('css/border-radius.htc'); /* Dem Internet Explodierer muss man erst einmal Benehmen beibringen, wenns um runde Ecken geht */
  35.             }
  36.             .pie{
  37.                 border:4px solid #80a0f0;
  38.                 border-radius:15px;
  39.                 -webkit-border-radius:15px;
  40.                 -moz-border-radius:15px;
  41.                 -khtml-border-radius:15px;
  42.                 behavior:url('css/PIE.htc'); /* Dem Internet Explodierer muss man erst einmal Benehmen beibringen, wenns um runde Ecken geht */
  43.             }
  44.                        
  45.             .clearboth {
  46.                 clear:both;
  47.                 margin:0;
  48.                 padding:0;
  49.                 height:1em;
  50.             }
  51.             textarea {
  52.                 height:30px;
  53.                 width:180px;
  54.                 margin:1em;
  55.                 resize:none;
  56.             }
  57.             textarea:focus{
  58.                 height:250px;
  59.             }
  60.         </style>
  61.     </head>
  62.     <body>
  63.         <div class="example borderradius">
  64.             <h3>Mit border-radius.htc erzeugte runde Ecken</h3>
  65.             <p>In diesem Anzeigebereich wurden die runden Ecken im Internet Explorer mit border-radius.htc erzeugt. Wenn man in die Textarea klickt, ändert sich deren Höhe und man sieht deutlich den Unterschied zur PIE.htc Version.</p>
  66.             <textarea>Textarea</textarea>
  67.         </div>
  68.         <div class="example pie">
  69.             <h3>Mit PIE.htc erzeugte runde Ecken</h3>
  70.             <p>In diesem Anzeigebereich wurden die runden Ecken im Internet Explorer mit PIE.htc erzeugt. Wenn man in die Textarea klickt, ändert sich deren Höhe und man sieht deutlich den Unterschied zur border-radius.htc Version.</p>
  71.             <textarea>Textarea</textarea>
  72.         </div>
  73.        
  74.         <div class="clearboth";></div>
  75.        
  76.         <div class="sourcecode">
  77.             <h2>Quelltext dieser Webseite</h2>
  78.  
  79. <?php
  80. require_once('Ixiter_Geshi.php');
  81. echo IxiterGeshi_parseCode(file_get_contents(__FILE__));
  82. ?>
  83.  
  84.         </div>
  85. <?php include('./piwik.php') ?>
  86.     </body>
  87.  </html>
  88.  
(Sourcecode highlighting by Ixiters Hilighter)