Jetzt sehe ich gerade, daß im IE und im Firefox alles richtig angezeigt wird, nur im Safari-Browser nicht, da steht die Navi-Leisteam linken Bildschirmrand un nicht im mittig platzierten Container.
Hier der gesamte Code:
<!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>emscherwetter</title>
<link rel="SHORTCUT ICON" href="bilder/icon.ico" type="image/x-icon">
<style type="text/css">
body {
font: 10px Helvetica, Arial, sans-serif;
color: black; background-color: #ffffff;
margin: 0px;
text-align: center;
}
#content {
width: 1000px;
margin-left: auto;
margin-right: auto;
text-align: left;
}
div#Rahmen {
width: 55.1em;
padding: 0.8em;
background-color: clear;
}
* html div#Rahmen { /* Korrektur fuer IE 5.x */
width: 56.7em;
w\idth: 55.1em;
}
div#Rahmen div {
clear: left;
}
ul#Navigation {
margin: 0; padding: 0;
text-align: center;
}
ul#Navigation li {
list-style: none;
float: left; /* ohne width - nach CSS 2.1 erlaubt */
position: relative;
margin: 0.4em; padding: 0;
}
* html ul#Navigation li { /* Korrektur fuer den IE 5 und 6 */
margin-bottom: -0.4em;
}
*:first-child+html ul#Navigation li { /* Korrektur fuer den IE 7 */
margin-bottom: -0.1em;
}
ul#Navigation li ul {
margin: 0; padding: 0;
position: absolute;
top: 1.6em; left: -0.4em;
display: none; /* Unternavigation ausblenden */
}
* html ul#Navigation li ul { /* Korrektur fuer IE 5.x */
left: -1.5em;
lef\t: -0.4em;
}
*:first-child+html ul#Navigation ul { /* Workaround fuer den IE 7 */
background-color:silver; padding-bottom:0.4em;
}
ul#Navigation li:hover ul {
display: block; /* Unternavigation in modernen Browsern einblenden */
}
ul#Navigation li ul li {
float: none;
display: block;
margin-bottom: 0.2em;
}
ul#Navigation a, ul#Navigation span {
display: block;
width: 6.4em; /* Breite den in li enthaltenen Elementen zuweisen */
padding: 0.2em 1em;
text-decoration: none; font-weight: bold;
border: 1px solid black;
border-left-color: white; border-top-color: white;
color: maroon; background-color: #ccc;
}
* html ul#Navigation a, * html ul#Navigation span {
width: 8.6em; /* Breite nach altem MS-Boxmodell fuer IE 5.x */
w\idth: 6.4em; /* korrekte Breite fuer den IE 6 im standardkompatiblen Modus */
}
ul#Navigation a:hover, ul#Navigation span, li a#aktuell {
border-color: white;
border-left-color: black; border-top-color: black;
color: white; background-color: gray;
}
li a#aktuell { /* aktuelle Rubrik kennzeichnen */
color: maroon; background-color: silver;
}
ul#Navigation li ul span { /* aktuelle Unterseite kennzeichnen */
background-color: maroon;
}
</style>
<script language="JavaScript" type="text/javascript">
function popup(URL) {
w = window.open(URL, "", "toolbar=0,scrollbars=0,location=0,statusbar=0,menubar=0,resizable=0,width=665,height=560,left = 300.5,top = 300.5");
}
</script>
<script type="text/javascript">
function click (e) {
if (!e)
e = window.event;
if ((e.type && e.type == "contextmenu") || (e.button && e.button == 2) || (e.which && e.which == 3)) {
if (window.opera)
window.alert("Sorry: Diese Funktion ist deaktiviert.");
return false;
}
}
if (document.layers)
document.captureEvents(Event.MOUSEDOWN);
document.onmousedown = click;
document.oncontextmenu = click;
</script>
</head>
<body>
<div id="content">
<div id="Rahmen">
<div class="style1">
<ul id="Navigation" style="position:absolute; top: 100px; left: 1px;">
<li><a href="#Beispiel">Startseite</a></li>
<li><a>Wetter</a>
<ul>
<li><a href="#Beispiel">Aktuell</a></li>
<li><a href="#Beispiel">Wetterlage</a></li>
<li><a href="#Beispiel">Vorhersage</a></li>
<li><a href="#Beispiel">Niederschlag</a></li>
<li><a href="#Beispiel">Gewitter</a></li>
<li><a href="#Beispiel">Satellit</a></li>
<li><a href="#Beispiel">15-Tages-Prognose</a></li>
<li><a href="#Beispiel">Warnungen</a></li>
<li><a href="#Beispiel">Thema des Tages</a></li>
</ul>
</li>
<li><a href="#Beispiel">Gesundheit</a>
<ul>
<li><a href="#Beispiel">Pollenflug</a></li>
<li><a href="#Beispiel">UV-Strahlung</a></li>
</ul>
</li>
<li><a href="#Beispiel">Webcam</a>
<ul>
<li><a href="#Beispiel">Blick nach Osten</a></li>
<li><a href="#Beispiel">Blick nach Westen</a></li>
</ul>
</li>
<li><a href="#Beispiel">Gästebuch</a>
<li><a href="#Beispiel">Links</a>
<li><a>Sonstiges</a>
<ul>
<li><a href="#Beispiel">Technik</a></li>
<li><a href="#Beispiel">Presse</a></li>
<li><a href="#Beispiel">Fotoalbum</a></li>
<li><a href="#Beispiel">Kontakt</a></li>
</ul>
</ul>
Test
Test
</div>
<div></div></div></div>
</body>
</html>
