nicht angemeldet
boder, em und der IE
Hallo!
Ich bin gerade dabei, eine Webseite neu zu machen, damit sie den WAI-Richtlinien entspricht etc. Das Design muss dabei erhalten bleiben, was bedeutet, dass die Seite aus 3 Spalten (links und rechts fixe Breite, Mitte dynamisch nach Fenstergröße) mit Header und Footer (fixe Höhe) bestehen muss. Damit der User die Größe der Schrift ändern kann, und die Webseite trotzdem noch (bis zu einem gewissen Grad) anständig aussieht, sind Größenangaben in em.
Um auch im IE ein Spaltendesign mit gleich hohen Spalten zu realisieren, hat die mittlere Spalte einen Rahmen rechts und links, der genauso breit ist, wie die beiden Divs, die die Spalten darstellen sollen. (Siehe auch diverse Webseiten, auf denen Beispiele für Spaltendesigns aufgeführt sind).
Soweit zur Erklärung, warum ich das so brauche, nun habe ich folgendes Problem bzw. folgende Frage:
Wenn ich die Schriftgröße ändere (Ansicht-Schriftgröße, je nach Browser), ändert sich die Breite/Höhe jedes Elements, welches eine Breite/Höhe von x em hat. Im Firefox/Opera/Netscape/... ändert sich auch brav die Rahmenbreite jedes Elements, nur der IE ignoriert die Größenänderung völlig. Ich habe es auch in einem kruzen Beispiel (siehe unten) nachgestellt, es ist ein nachvollziehbares Problem. Ich habe jetzt schon viel gesucht, nur leider nirgendwo einen Hinweis darauf gefunden, dass dieses Problem schon mal wo behandelt wurde; kann mir jemand helfen, das Problem zu lösen, oder mir sagen, wo ich eine Lösung finden kann?
Hier mein nachgestelltes Beispiel (das hellblaue div hat die richtige Breite, das Dunkelblaue ist der Rahmen des gelben divs, das, genauso wie das Hellblaue, breiter werden sollte):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-15">
<meta http-equiv="Content-Language" content="de-at">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta name="description" content="">
<meta name="keywords" content="">
<title>Einfache Suche - Eine Anwendung der Ediktsdatei</title>
<style type="text/css">
html, body
{ height: 100%;
width: 100%;
font-size: small;
font-family: Arial, Sans-Serif;
font-weight: normal;
font-style: normal;
}
div#spalte1
{ background-color: lightblue;
position: absolute;
top: 0em; left: 0em;
height: 100%;
width: 9em;
}
div#spalte2
{ background-color: yellow;
position: absolute;
top: 0em; left: 0em;
border-left: 9em solid midnightblue;
}
</style>
</head>
<body>
<div id="spalte1">
Das hier ist die erste Spalte,
die so etwas wie eine Navigation sein soll.
</div>
<div id="spalte2">
Das hier ist der Hauptbereich der Seite,
der einen Rahmen auf der linken Seite haben muss,
da der IE es sonst nicht wie gewünscht darstellen kann.
</div>
</body>
</html>