Browserweiche
Da es inzwischen den InternetExplorer nicht mehr gibt, sind Browserweichen heute nicht mehr notwendig.
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.