HTML, CSS, PHP, MySQL

html-php.de

HTML & CSS Stylesheets Referenz JavaScript PHP MySQL Sonstiges Gästebuch Inhalt Impressum

[ Browserweiche ] [ CSS-Dateien für InternetExplorer ] [ Fixe Bereiche im InternetExplorer ]

Browserweiche

Seit 1996 wird die Breite von Elementen durch das Addieren von Breite width, Rahmenbreite border, Innenabstand padding und Außenabstand margin, sowie die Höhe aus height, Rahmenbreite border, Innenabstand padding und Außenabstand margin. Leider gibt es beim Windows-InternetExplorer hier ein Bug. Wird z.B. folgende Box definiert

Code:
#box1 { width:300px; border-width:10px; margin:10px; padding:10px;}

ergibt sich eine Gesamtbreite von 360 Pixel.
Im Internet-Explorer bis Version 5.5 wird die Box allerdings nur mit einer Gesamtbreite von 300 Pixel darbestellt, d.h. für den Gesamten Inhalt steht Ihnen nur 240 Pixel zur Verfügung. Der gleiche Bug befindet sich sorgar im InternetExplorer in der Version 6.0, wenn keine URI in der Dokumenttyp-Deklaration angegeben wurde:

Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

Wird dagegen eine URL mit angegeben, wird in der Version 6.0 die Box richtig dargestellt.

Code:
  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">

Aber was kann man dagegen tun? Sie können Elemente großzügig planen, und dafür sorgen, dass genügend Platz vorhanden ist, oder Sie bauen Browserweichen ein:

Code:
  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">
  <html>
  <head>
   <title>Box-Modell: Browserweiche</title>
   <style type="text/css">
    #box1 { 
     width:300px; border:10px solid red; margin:10px; padding:10px;
    }
    * html #box1 {     /* nur für Internet Explorer */
       width:360px;    /* für IE bis Version 5.5 */
       w\idth:300px;   /* für IE Version 6.0 */
    }
   </style>
  </head>
  <body>
    <div id="box1">
     <p>Das ist der Inhalt</p>
    </div>
  </body>
  </html>
Das ganze sieht so aus

Wie gewohnt wird zuerst ein Element definiert. Anschließend wird durch * html das gleiche Element nochmals definiert, der nur für den IE gilt. Damit die Breite für den IE 6 wieder die richtige Breite bekommt, müssen Sie nach den ersten Buchstaben ein Backslash \ notieren. Dieses wird vom IE bis 5.5 ignoriert.

CSS-Dateien für InternetExplorer

Eine weitere Möglichkeit wäre, für den InternetExplorer extra *.css-Dateien anzulegen. Dies könnte dann so aussehen:

Code:
  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">
  <html>
  <head>
   <title>CSS-Dateien für den IE</title>
   <link rel="stylesheet" type="text/css" href="alle.css">
   <!--[if IE 6]>
    <style type="text/css">@import url(ie6.css);</style>
   <![endif]-->
   <!--[if lte IE 5.5999]>
    <style type="text/css">@import url(ie5.css);</style>
   <![endif]-->
  </head>
  <body>
    HTML-Quelltext
  </body>
  </html>
  

Dabei wird zuerst die Datei alle.css geladen. Benutzt der Besucher der Webseite den Windows-IE 6 wird die Datei ie6.css geladen. Benutzt er den IE kleiner oder gleich 5.5 wird letztlich die Datei ie5.css geladen.

Fixe Bereiche im InternetExplorer

Damit im InternetExplorer ebenfalls fixierte Bereiche definiert werden können, muss ein Workaround im head eingebaut werden:

Code:
  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
  <html>
  <head>
   <title>Fixe Bereiche</title>
   <style type="text/css">
    <!--
     body {
      color: #FFFFFF; 
      background-color: #F4A460;
      font-size: 12px; 
      font-family: Helvetica,Arial,sans-serif; 
      margin:0; 
      padding:0; 
     }
     h1 { 
      font-size:24pt; 
      font-style:italic; 
      font-family:Arial, Helvetica; 
      background-color:#0000FF; 
      color:#FFFF00; 
      border:6px double navy;
      height:34px; 
      text-align:center;
     }
     #inhalt { 
      margin:10px 10px 10px 170px; 
      padding:0; 
      overflow:auto;
     }
     #navi { 
      top:70px; left:2px; 
      position:absolute; 
      width: 150px;
      border:4px double navy;
      background-color:#0000FF;
      padding:4px;
     }
     html>body #navi {      /* nur fuer moderne Browser! */
      position: fixed;
     }
     a {
      text-decoration:none;
     }
     a:link {
      color:#FFFFFF;
     }
     a:visited {
      color:#C0C0C0;
     }
     a:active {
      color:#FFFFFF;
     }
     a:hover {
      color:#000000;
      background-color:#FFFFFF;
     }
    -->
   </style>
   <!--[if lt IE 7]><style type="text/css">
    @media screen {
     html, body {
      height: 100%; overflow-y: hidden;
     }
     #scrollbereich {
      height: 100%; width: 100%; overflow: auto;
     }
     #inhalt {
      position: static;
     }
    }
   </style><![endif]-->
  </head>
  <body>
  <div id="scrollbereich">
   <h1>Meine erste Homepage</h1>
   <div id="inhalt">
    <p>
    <img style="border:0; width:100px; height:40px; float:left; margin:5px;"
     src="bild01.gif" alt="[Bildname]">
    <a name="eins">Thema 1</a> - Hier steht irgendwelcher Text.
    .....
    </p>
   </div>
   <div id="navi">
    <a href="#eins">Thema 1</a><br>
    <a href="#zwei">Thema 2</a><br>
    ...
   </div>
  </div>
  </body>
  </html>
  
Das ganze sieht so aus

Mit <!--[if lt IE 7]><style type="text/css"> wird der Bereich angegeben, der nur für den InternetExplorer gedacht ist. overflow-y: hidden; wird verhindert, das eine doppelte Scrollleiste angezeigt wird. Damit überhaupt eine Scrollleiste angezeigt wird, müssen Sie ein div-Bereich (hier scrollbereich genannt) anlegen, in dem Sie overflow:auto angeben.

back top next