Hallo,
ich habe das Problem, daß meine Seite mit FF und Safari sowie IE8 korrekt dargestellt wird, nicht jedoch mit IE7. Folgende Probleme:
Die Navigation links ist zu weit oben und überdeckt die Headline
Die Subnavigation ist gar nicht sichtbar bzw. wird von der Hauptnavigation verdeckt
Beispiel: Gewaltfreie Erziehung in Köln
HTML Code:
CSS-Teil:
Gibt's da Hilfe für mich? Ich wühle mich seit drei Stunden durch diverse Seiten zu dem Thema, komme aber nicht wirklich weiter.
Danke für jeden Kommentar.
ich habe das Problem, daß meine Seite mit FF und Safari sowie IE8 korrekt dargestellt wird, nicht jedoch mit IE7. Folgende Probleme:
Die Navigation links ist zu weit oben und überdeckt die Headline
Die Subnavigation ist gar nicht sichtbar bzw. wird von der Hauptnavigation verdeckt
Beispiel: Gewaltfreie Erziehung in Köln
HTML Code:
Code:
<div id="container"> <div id="header"> <div id="navi_top"> <ul> <li><a href="kontakt.html">Kontakt</a></li> <li class="trennstrich">|</li> <li><a href="sitemap.html">Sitemap</a></li> <li class="trennstrich">|</li> <li><a href="impressum.html">Impressum</a></li> </ul> </div> <p><img src="images/head.jpg" alt="Head Gewaltfreie Erziehung in Köln" /> <!-- end #header --></div> <div id="sidebar1"> <ul class="navi"> <li><a href="index.html">Startseite</a></li> <li class="active"><a href="kampagne.html">Die Kampagne</a></li> <ul class="subnavi"> <li class="active2"><a href="kampagne.html">Gemeinsam für eine gewaltfreie Erziehung</a></li> <li><a href="kampagne_recht.html">Das Recht des Kindes auf eine gewaltfreie Erziehung</a></li> <li><a href="kampagne_hintergrund.html">Hintergrundinformation</a></li> <li><a href="kampagne_bund.html">Bundeskampagne</a></li> </ul> <li><a href="aboutus.html">Wir über uns</a></li> <li><a href="aktuelles.html">Aktuelles</a></li> <li><a href="veranstaltung.html">Veranstaltungen</a></li> <li><a href="material.html">Kampagnenmaterial</a></li> <li><a href="presse.html">Presse</a></li> <li><a href="beratung.html">Beratung in Köln</a></li> <li><a href="foerderer.html">Förderer</a></li> </ul> <!-- end #sidebar1 --></div> <div id="sidebar2"> <img src="images/text_schirmfrau.png" alt="Schirmfrau" /><br /> der Kampagne<br /> <a href="schirmfrau.html"><img src="images/sh_neven.jpg" border=0 alt="Frau Neven" /></a> <p><img src="images/text_schirmherr.png" alt="Schirmherr" /><br /> der Kampagne<br /> <a href="schirmherr.html"><img src="images/sh_roters.jpg" border=0 alt="Herr Roters" /></a></p> <p>Die <img class="paten" src="images/text_paten.png" alt="Paten" /><br /> der Kampagne<br /> <img src="images/paten.jpg" alt="Die Paten" /></p> <!-- end #sidebar2 --></div>
Code:
@charset "UTF-8"; /* Allgemeine Style-Angaben */ body { font: 100.01% Verdana, Helvetica, Arial, sans-serif; background: #FFFFFF; margin: 0; padding: 0; text-align: center; /* Hierdurch wird der Container in IE 5*-Browsern zentriert. Dem Text wird dann im #container-Selektor die Standardausrichtung left (links) zugewiesen. */ color: #000000; } #container { width: 900px; background: #FFFFFF; margin: 0 auto; text-align: left; } .fltrt { float: right; margin-left: 8px; } .fltlft { float: left; margin-right: 8px; } .clearfloat { clear:both; height:0; font-size: 1px; line-height: 0px; } .weiterlesen { text-align:right; } /* Kopfbereich */ #header { background: #fff; padding: 0 10px 0 20px; position:relative; } #header li { list-style-type: none; float: left; margin: 0px 6px 10px 6px; position:relative; } #header ul { margin-left:3px; position:relative; } #header h1 { margin: 0; padding: 10px 0; } #header li.trennstrich { font-size:70%; margin-top:4px; position:relative; } /* Navigation links und Link auf Kooridinatoren */ #sidebar1 { float: left; width: 210px; background: #fff; margin-top:-20px; position:relative; } #sidebar1 p { margin-left:18px; position:relative; } ul.navi { list-style-type: none; margin-left: -30px; width: 200px; position:relative; } ul.navi li { background-color:#F9D861; padding: 15px 0px 0px 28px; height: 27px; margin-top: 5px; position:relative; } ul.navi li.active { background-image:url(../images/link_active.png); background-repeat:no-repeat; } a:link, a:visited { text-decoration: none; color:black; } li a:hover, li a:focus, li a:active { color:red; } ul.subnavi { list-style-type: none; margin-bottom:5px; position:relative; } ul.subnavi li { background-color:#fff; padding: 5px 0px 0px 0px; margin-left:-12px; font-size:80%; height: auto; position:relative; } ul.subnavi li.active2 a { color: red; } #navi_top ul a:link, #navi_top ul a:visited { text-decoration: none; color:black; } #navi_top { background: #ddd; margin-left: 528px; } #navi_top li.active3 a { color:red; } /* Fixer Rand rechts mit Schirmherren und Paten */ #sidebar2 { float: right; width: 125px; padding-left: 10px; background: #FFFFFF; text-align:center; line-height:20px; padding-right: 30px; } #sidebar2 img { margin-top:3px; } #sidebar2 img.paten { margin-bottom:-4px; } /* Variabler Mittelteil */ #mainContent { width:490px; margin-left:240px; margin-top: -5px; background-color:#fff; } #mainContent h1 { font-size:150%; line-height:33px; font-weight:lighter; } #mainContent p, #mainContent li { font: 100.01% Helvetica, Arial, sans-serif; line-height:22px; } #mainContent a { color: red; font-weight:bold; } #mainContent h3 { font: 100.01% Helvetica, Arial, sans-serif; font-weight:bold; } #mainContent h4 { font: 100.01% Helvetica, Arial, sans-serif; font-weight:bold; font-style:italic; } #mainContent img { margin-bottom:15px; } #mainContent img.mitglieder{ margin-left:70px; } #mainContent img.logo { margin-bottom:0px; } #mainContent img.schirmherr { float:right; margin-left: 10px; } #mainContent img.aboutus { margin-left: -10px; } /* DIV-unabhängige Regeln */ #start2 { width: 493px; height: 198px; line-height:20px; color:#fff; background-color:red; } #start2 img { float:left; margin-right:10px; padding-right:10px; } #start2 p { font-size:80%; padding: 15px 5px 0px 5px; line-height:18px; } #footer { clear:both; padding: 0 10px 0 10px; } #footer p { font-size:80%; margin-left: 10px; padding-top: 10px; }
Danke für jeden Kommentar.
Kommentar