nicht angemeldet
Moin,
die Seite wird von FF und Mozilla korrekt dargestellt aber der IE6.0 schiebt den Mittelteil also meine Navigationsleiste und den Inhalt unter den linken bzw. rechten Teil der Seite. Denkbar schlechter Ort.
Muss ich mit festen Positionsangaben (px nicht em) arbeiten? Geht es auch so und wenn, wie?
Danke für eure Mühen.
Hier mal mein Quelltext:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Start</title>
<style type="text/css">
body, p a { color: black;
background-color: white;
font-size: 100.01%;
font-family: Helvetica,Arial,sans-serif;
margin: 0; padding: 1em;
min-width: 78em; /* Mindestbreite */ }
h1 { font-size: 1.5em;
margin: 0 0 0.7em; padding: 0.3em;
text-align: center;
background-color: #fed;
border: 2px ridge silver; }
html>body h1 { border-color: gray; /* Farbangleichung an IE */ }
/*--------------- Hier beginnt die linke Seite ---------------*/
ul#Navigation { font-size: 0.83em;
float: left;
width: 7em;
margin: 10em 0 1.2em;
padding: 0;
border: 1px dashed silver; }
ul#Navigation li { list-style: none;
margin: 0;
padding: 0.5em; }
ul#Navigation a { display: block;
padding: 0.2em;
font-weight: bold; }
ul#Navigation a:link { color: blue;
background-color: #eee; }
ul#Navigation a:visited { color: #666;
background-color: #eee; }
ul#Navigation a:hover { color: black;
background-color: white; }
ul#Navigation a:active { color: white;
background-color: gray; }
/*--------------- Hier beginnt Info-rechts ---------------*/
div#Info-rechts { font-size: 0.9em;
float: right;
width: 18em;
height: 50em;
margin: 0em 9em 0em 0em;
padding: 0;
background-color: #eee;
border: 1px dashed silver; }
div#Info-rechts h2 { font-size: 1.33em;
margin: 0.2em 0.5em; }
div#Info-rechts p { font-size: 1em;
margin: 0.5em; }
/*--------------- Hier beginnt die Hauptnavigation ---------------*/
div#Hauptnavigation { margin: 0em 26em 1em 7em;
padding: 0em 1em;
border: 1px dashed silver;
min-width:24em; }
* html div#Hauptnavigation { height: 1em;
/* Workaround 3-Pixel-Bug IE */ }
div#Hauptnavigation h2 { font-size: 1.2em;
margin: 0.2em 0; }
div#Hauptnavigation p { font-size: 1em;
margin: 1em 0; }
.homebutton { width:80px;
height:80px;
margin: 0.2em 0em 0em 0em;}
a.home:link {display:block; background-image:url(../navi-gifs/button1.gif); width:80px; height:80px;}
a.home:hover {background-image:url(../navi-gifs/button1h.gif);}
a.home:visited {display:block; background-image:url(../navi-gifs/button1.gif); width:80px; height:80px;}
a.home:hover {background-image:url(../navi-gifs/button1h.gif);}
a.gaestebuch:link {display:block; background-image:url(navi-gifs/button2.gif); width:80px; height:80px;}
a.gaestebuch:hover {background-image:url(navi-gifs/button2h.gif);}
a.gaestebuch:visited {display:block; background-image:url(navi-gifs/button2.gif); width:80px; height:80px;}
a.gaestebuch:hover {background-image:url(navi-gifs/button2h.gif);}
a.fotos:link {display:block; background-image:url(navi-gifs/button3.gif); width:80px; height:80px;}
a.fotos:hover {background-image:url(navi-gifs/button3h.gif);}
a.fotos:visited {display:block; background-image:url(navi-gifs/button3.gif); width:80px; height:80px;}
a.fotos:hover {background-image:url(navi-gifs/button3h.gif);}
a.real-life:link {display:block; background-image:url(navi-gifs/button4.gif); width:80px; height:80px;}
a.real-life:hover {background-image:url(navi-gifs/button4h.gif);}
a.real-life:visited {display:block; background-image:url(navi-gifs/button4.gif); width:80px; height:80px;}
a.real-life:hover {background-image:url(navi-gifs/button4h.gif);}
a.studium:link {display:block; background-image:url(navi-gifs/button5.gif); width:80px; height:80px;}
a.studium:hover {background-image:url(navi-gifs/button5h.gif);}
a.studium:visited {display:block; background-image:url(navi-gifs/button5.gif); width:80px; height:80px;}
a.studium:hover {background-image:url(navi-gifs/button5h.gif);}
a.wg:link {display:block; background-image:url(navi-gifs/button6.gif); width:80px; height:80px;}
a.wg:hover {background-image:url(navi-gifs/button6h.gif);}
a.wg:visited {display:block; background-image:url(navi-gifs/button6.gif); width:80px; height:80px;}
a.wg:hover {background-image:url(navi-gifs/button6h.gif);}
a.links:link {display:block; background-image:url(navi-gifs/button7.gif); width:80px; height:80px;}
a.links:hover {background-image:url(navi-gifs/button7h.gif);}
a.links:visited {display:block; background-image:url(navi-gifs/button7.gif); width:80px; height:80px;}
a.links:hover {background-image:url(navi-gifs/button7h.gif);}
a.kontakt:link {display:block; background-image:url(navi-gifs/button8.gif); width:80px; height:80px;}
a.kontakt:hover {background-image:url(navi-gifs/button8h.gif);}
a.kontakt:visited {display:block; background-image:url(navi-gifs/button8.gif); width:80px; height:80px;}
a.kontakt:hover {background-image:url(navi-gifs/button8h.gif);}
/*--------------- Hier beginnt der Inhaltsteil ---------------*/
div#Inhalt { margin: 0 26em 1em 7em;
padding: 0 1em;
border: 1px dashed silver; }
* html div#Inhalt { height: 1em; /* Workaround 3-Pixel-Bug IE */ }
div#Inhalt h2 { font-size: 1.2em;
margin: 0.2em 0; }
div#Inhalt p { font-size: 1em;
margin: 1em 0; }
/*--------------- Hier beginnt der zweite Inhaltsteil -------------*/
div#Inhalt2 {
margin: 0 26em 1em 7em;
padding: 0 1em;
border: 1px dashed silver; }
* html div#Inhalt2 { height: 1em; /* Workaround 3-Pixel-Bug des IE */ }
div#Inhalt2 h2 { font-size: 1.2em;
margin: 0.2em 0; }
div#Inhalt2 p { font-size: 1em;
margin: 1em 0; }
/*--------------- Hier beginnt die Fusszeile ---------------*/
p#Fusszeile { clear: both;
font-size: 0.9em;
margin: 0em 9em 0em 0em; padding: 0.1em;
text-align: center;
background-color: #eee;
border: 1px dashed silver; }
</style>
</head>
<body>
<div id="Info-rechts">Der Info-Teil</div>
<ul id="Navigation">
<li><a href="../einfuehrung.htm">Link1</a></li>
<li><a href="../mehrspaltige.htm">Link2</a></li>
<li><a href="../fixbereiche.htm">Link3</a></li>
<li><a href="../navigationsleisten.htm">Link4</a></li>
<li><a href="../browserweichen.htm">Link5</a></li>
</ul>
<div id="Hauptnavigation">
<table class="Navigation">
<tr >
<td>
<img src="navi-gifs/button1h.gif" alt="Home" class="homebutton">
</td>
<td>
<a href="gaestebuch/guestbook.php" class="gaestebuch" alt="Gaestebuch" title="Gästebuch"></a>
</td>
<td>
<a href="fotos/fotogal.html" class="fotos" alt="Fotos" title="Fotos"></a>
</td>
<td>
<a href="real-life/real-life.html" class="real-life" alt="real life" title="real life"></a>
</td>
<td>
<a href="studium/studium.html" class="studium" alt="Studium" title="Studium "></a>
</td>
<td>
<a href="wg/wg.html" class="wg" alt="WG" title="WG"></a>
</td>
<td>
<a href="links/links.html" class="links" alt="Links" title="Links"></a>
</td>
<td>
<a href="kontakt/kontakt.html" class="kontakt" alt="Kontakt" title="Kontakt"></a>
</td>
</tr>
</table>
</div>
<div id="Inhalt"><p>Dies ist der Inhalt</p></div>
<div id="Inhalt2"><p>Dies ist der zweite Inhalt</p></div>
<p id="Fusszeile">Die Fußzeile.</p>
</body>
</html>