overflow versus clip - Quelltext - Cascading Style Sheets

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
 <title>overflow versus clip - Cascading Style Sheets - Workshop Internet-Pr&auml;senz</title>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <meta http-equiv="Content-Language" content="DE" />
 <meta http-equiv="Content-Style-Type" content="text/css" />

 <meta name="description"
  content="&Uuml;bung Cascading Style Sheets. overflow versus clip" />
 <meta name="keywords" content="HTML, Cascading Style Sheets" />
 <meta name="author" content="Roland Unger" />

 <style type="text/css">
 <!--

  p.bild {
     border: 1px solid #000;
     padding: 0.1em;
     width: 150px;
     height: 80px;
  }

  .overflowHidden {
     overflow: hidden;
  }

  .overflowScroll {
     overflow: scroll;
  }

  .overflowVisible {
     overflow: visible;
  }

  .clip {
     border: 1px solid #000;
     background: #ffffee;
     position: relative;
     width: 250px;
     height: 165px;
  }

  .clip img {
     position: absolute;
     top: 0;
     left: 0;
     clip: rect(40px 200px 120px 50px);
     /* oben rechts unten links
        Die Kommata fehlen hier absichtlich, um einen
        Fehler im Internet Explorer zu beheben        */
  }

  .clip2 {
     border: 1px solid #000;
     position: relative;
     overflow: hidden;
     width: 130px;
     height: 85px;
  }

  .clip2 img {
     position: absolute;
     top: -40px;
     left: -50px;
     clip: rect(40px 200px 120px 50px);
     /* oben rechts unten links */
  }

  td {
     vertical-align: top;
     padding: 0 1em 0 0;
  }

 -->
 </style>
</head>

<body>

<h1>Workshop Internet-Präsenz</h1>

<h2>overflow versus clip - Cascading Style Sheets –<br />
Fehler im Internet Explorer</h2>

<p>Wenn Inhalt aus dem ihm umschließenden Tag-Bereich
herausragen sollte, können Sie mit der Eigenschaft
<em>overflow</em> festlegen, was passieren soll.</p>

<ul>
 <li>overflow: auto. Der Browser entscheidet selbst, was
  im Konfliktfall geschehen soll.</li>

 <li>overflow: hidden. Herausragende Teile werden
  abgeschnitten (linkes oberes Bild).</li>

 <li>overflow: scroll. Es werden Rollbalken angeboten, um
  alle Bereiche zugänglich zu machen (linkes unteres Bild).</li>

 <li>overflow: visible. Die herausragenden Teile werden
  angezeigt (rechtes Bild).</li>
</ul>

<table summary="Layout">
<tbody>
 <tr>
  <td>
   <p class="bild overflowHidden"><img src="html_css_705.jpg" alt="Ramesseum" width="250" height="165" /></p>
   <p class="bild overflowScroll"><img src="html_css_705.jpg" alt="Ramesseum" width="250" height="165" /></p>
  </td>
  <td> 
   <p class="bild overflowVisible"><img src="html_css_705.jpg" alt="Ramesseum" width="250" height="165" /></p>
  </td>
 </tr>
</tbody>
</table>

<p>Mit <em>clip</em> können Sie einen gewünschten
Anzeigebereich festlegen. Die außerhalb liegenden
Bereiche werden transparent belassen. Der beschnittene
Breich muss absolut positioniert sein.</p>

<p class="clip"><img src="html_css_705.jpg" alt="Ramesseum" width="250" height="165" /></p>

<p>Beide Eigenschaften lassen sich kombinieren:</p>

<p class="clip2"><img src="html_css_705.jpg" alt="Ramesseum" width="250" height="165" /></p>

<p>Aufgrund eines bösen Fehlers funktioniert das Clipping im
Internet Explorer <strong>nicht</strong>, wenn dem Dokument 
eine Dokumenttypdeklaration, egal welche, vorangestellt ist.
Die mir bekannten Workarounds sind: <em>entweder</em> die
Dokumenttypdeklaration weglassen <em>oder</em> die Kommata
in der clip-Anweisung weglassen. Letzteres ist normenkonform.
In der <span lang="en">CSS 2.1 Specification</span> heißt es
hierzu: <span lang="en">“Authors should separate offset values
with commas. User agents must support separation with commas,
but may also support separation without commas, because a
previous version of this specification was ambiguous in this
respect.”</span> Siehe auch:
<a href="http://www.webmasterworld.com/forum83/6478.htm" target="_top">Doctype
kills CSS clip</a>.</p>

</body>
</html>