Ankündigung

Einklappen
Keine Ankündigung bisher.

[Erledigt] IE7 stellt Seite nicht richtig dar

Einklappen

Neue Werbung 2019

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • [Erledigt] IE7 stellt Seite nicht richtig dar

    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:
    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>
    CSS-Teil:
    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;
    }
    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.

  • #2
    Hachja, das Problem mit dem IE ...

    Mach doch am besten eine Abfrage, dass wenn der IE ist, ein gleicher div-Block kommt, nur halt mit ner anderen id

    HTML-Code:
    <!--[if IE]><div id="ie"><![endif]-->
    MfG
    ~Capfly

    Kommentar


    • #3
      Die Fehler im HTML beseitigen, danach kann man weiter sehen.
      [SIZE="1"]RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?[/SIZE]

      Kommentar


      • #4
        Zitat von ChrisB Beitrag anzeigen
        Die Fehler im HTML beseitigen, danach kann man weiter sehen.
        Die Fehler sind keine. Ich habe die Seiten auch schon validieren lassen und erst nen Schreck bekommen. Schaue ich in den Quellcode der Seite ist aber alles in Ordnung. Was als fehlend angemeckert wird ist tatsächlich vorhanden.

        Kommentar


        • #5
          Hallo Capfly,
          sieht zwar einfach aus Deine Lösung, aber wo soll ich das reinsetzen? Überall wo ein div ist? Mir ist der Sinn nicht ganz klar. Ich muss doch die id dann auch im CSS ansprechen und irgendwas damit machen.
          *grübel*

          Kommentar


          • #6
            Zitat von needful Beitrag anzeigen
            Die Fehler sind keine.
            Wie kommst du denn darauf?

            Ich habe die Seiten auch schon validieren lassen und erst nen Schreck bekommen. Schaue ich in den Quellcode der Seite ist aber alles in Ordnung.
            Der Validator macht genau das - er schaut sich den Quellcode an, den dein Server auf einen GET-Request hin ausliefert.

            Was als fehlend angemeckert wird ist tatsächlich vorhanden.
            Was dort als fehlerhaft angemeckert wird, ist fehlerhaft.

            Wenn du Verständnisprobleme mit den Meldungen des Validators hast, dann kannst du nachfragen.
            [SIZE="1"]RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?[/SIZE]

            Kommentar


            • #7
              OK, da war ich wohl etwas voreilig, sorry.
              In der Tat verstehe ich die Meldung nicht:
              Line 29, Column 33: document type does not allow element "ul" here;
              assuming missing "li" start-tag
              <ul class="subnavi">

              Was ist hier falsch?

              Der Codeabschnitt in meinem html-dokument dazu ist folgender:
              Code:
                <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>

              Kommentar


              • #8
                Hmm, du darfst raten

                Tipp: <b><b></b></b>
                MfG
                ~Capfly

                Kommentar


                • #9
                  Achso ich muß das erste <ul> erst wieder schließen, bevor ich das zweite öffne. Und nach dem ich das zweite geschlossen habe wieder das erste öffnen.
                  Hier kann man ja ne Menge lernen

                  Kommentar


                  • #10
                    Zitat von needful Beitrag anzeigen
                    Achso ich muß das erste <ul> erst wieder schließen, bevor ich das zweite öffne. Und nach dem ich das zweite geschlossen habe wieder das erste öffnen.
                    Nein, dann hättest du ja keine Verschachtelung mehr, die die tatsächlich abzubildende Struktur ausdrückt - sondern nur mehrere Listen hintereinander.


                    Wie du sehr leicht bspw. bei SELFHTML nachlesen kannst, darf UL als Kindelemente nur LI enthalten.

                    Also packst du deine Liste, die eine Unterebene präsentieren soll, natürlich ganz einfach mit in das LI, das den Oberpunkt repräsentiert.
                    [SIZE="1"]RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?[/SIZE]

                    Kommentar


                    • #11
                      Zitat von needful Beitrag anzeigen
                      Der Codeabschnitt in meinem html-dokument dazu ist folgender:
                      Wenn ich den von dir geposteten Quelltext mit dem aktuell (Stand 09.04. - 01:20 Uhr) auf der Webseite sichtbaren vergleiche, komme ich zu dem Schluss, dass du das Posting von ChrisB ignoriert hast.

                      Zu dem Posting von Capfly: suche doch mal nach "Conditional Comments". Der IE7 hat tatsächlich einige Macken. Wenn du irgendwann semantisch korrekten Quellcode hast und die Unterschiede immer noch bestehen, kannst du Conditional Comments nutzen um separate CSS-Angaben für die betreffende IE-Version einzubinden...

                      Gute Nacht,

                      Feeela
                      Je grösser der Dachschaden, desto schöner der Ausblick zum Himmel. - [WIKI]Karlheinz Deschner[/WIKI]

                      Kommentar


                      • #12
                        Zitat von feeela Beitrag anzeigen
                        Wenn ich den von dir geposteten Quelltext mit dem aktuell (Stand 09.04. - 01:20 Uhr) auf der Webseite sichtbaren vergleiche, komme ich zu dem Schluss, dass du das Posting von ChrisB ignoriert hast.
                        Nein, ich habe es nur zu spät gesehen und hatte die Änderungen schon gemacht. Mit dieser Version habe ich aber keinen Fehler mehr bei der Validierung und die Darstellung ist so wie ich sie haben will - fast.

                        Jetzt habe ich nur noch das Problem, daß im IE7 die Darstellung der Hauptnavigation links um ca. 40px zu weit nach links und 20px zu weit nach oben steht. Wie kann ich das korrigieren für den IE7? Hat jemand einen Tipp?

                        Code:
                          <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>
                                    <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">
                        Code:
                        #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;
                        }
                        Bis hierher auf jeden Fall schonmal vielen Dank.

                        Kommentar


                        • #13
                          Zitat von needful Beitrag anzeigen
                          Jetzt habe ich nur noch das Problem [...]
                          Lass mich mal googeln...

                          Und dann entprechend das CSS dort für den IE7 anpassen...
                          Je grösser der Dachschaden, desto schöner der Ausblick zum Himmel. - [WIKI]Karlheinz Deschner[/WIKI]

                          Kommentar


                          • #14
                            Zitat von feeela Beitrag anzeigen
                            Lass mich mal googeln...

                            Und dann entprechend das CSS dort für den IE7 anpassen...
                            Ok, war wohl ein Missverständnis. Wie ich einen CC einfüge war mir schon klar. Ich dachte nur, ich müsste für den IE7 irgendwelche besonderen CSS-Befehle anwenden. Hab jetzt einfach margins angepasst, dann geht's.

                            Kommentar

                            Lädt...
                            X