XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   IE 7 zeigt footer und navi falsch an (http://xhtmlforum.de/showthread.php?t=54852)

weblearner 05.12.2008 15:00

IE 7 zeigt footer und navi falsch an
 
hey!
wie man meinem threat-titel entnehmen kann zeigt mein IE 7 meine navigationsleiste und meinen footer falsch an... der IE 5.6 (auf meinem mac) zeigt es wiederum ohne fehler genuso wie opera, safari und FF...
woran kann das liegen?
ich habe meine seite etwas umgebaut, davor hat alles wunderbar funktioniert, jetzt ist es der blanke horror im IE.... überzeugt euch selbst....

neue style

hat da jem. einen plan woran das liegen könnte?
meinen code gibts hier..:
index.html
HTML-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">

<link rel="stylesheet" type="text/css" href="style.css">
<title>neue style</title>

<script type="text/javascript">
        if(window.navigator.systemLanguage && !window.navigator.language) {
                function hoverIE() {
        var LI = document.getElementById("Navigation").firstChild;
        do {
        if (sucheUL(LI.firstChild)) {
        LI.onmouseover=einblenden; LI.onmouseout=ausblenden;
        }
        LI = LI.nextSibling;
        }
        while(LI);
        }
        function sucheUL(UL) {
        do {
        if(UL) UL = UL.nextSibling;
        if(UL && UL.nodeName == "UL") return UL;
        }
        while(UL);
        return false;
        }
        function einblenden() {
        var UL = sucheUL(this.firstChild);
        UL.style.display = "block"; UL.style.backgroundColor = "silver";
        }
        function ausblenden() {
        sucheUL(this.firstChild).style.display = "none";
        }
        window.onload=hoverIE;
        }
</script>
 
</head>

<body>

<div id="wrapper">
        <div id="header"></div>
    <div id="content">           
<div id="Rahmen">
<ul id="Navigation">
  <li><a href="#">linkgruppe1</a>
    <ul>
      <li><a href="#">linkgruppe1a</a></li>
      <li><a href="#">linkgruppe1b</a></li>
      <li><a href="#">linkgruppe1c</a></li>
    </ul>
  </li>
  <li><a href="#">linkgruppe2</a></li>
  <li><a href="#">linkgruppe3</a>
    <ul>
      <li><a href="#">linkgruppe3a</a></li>
      <li><a href="#">linkgruppe3b</a></li>
    </ul>
  </li>
</ul>
<div></div>
</div>
<br><br>   
  <p>inhalt inhalt inhalt...
  </p>
    </div>
   
    <div id="footer"> <b>
        <a href="#">fl1</a>
        | <a href="#">fl2</a>
        | <a href="#">fl3</a>
        | <a href="#">fl4</a>
        | <a href="#">fl5</a>
        | <a href="#">fl6</a></b>
</div>
   
</div>

</body>
</html>

und die style.css:
Code:

* {
        margin: 0;
        padding: 0;
}

html {
        overflow-y: scroll;
        height: 100%;
}

body {
        background-color: #0D0D0D;
        color: #0D0D0D;
        font-size: 11px;
        font-family: Georgia, "Times New Roman", Times, serif;
        height: 100%;
        text-align: center;
}

#wrapper {
        background: #0D0D0D url(images/img1.gif) repeat-y center top;
        margin: 0 auto;
        width: 704px;
        min-height: 100%;
}

#header {
        margin: 0 auto;
        width: 700px;
        background: url(images/img2.jpg);
        height: 280px;
}

* html #wrapper {
        height: 100%;
}

#content {
        background: url(images/img1.gif) repeat-y center top;
        margin: 0 auto;
        padding: 18px;
        text-align: left;
}
       
/* navigation */

div#Rahmen {
    width: 63em;
    padding: 0.4em;
    margin: -1.6em;
    border: 0px solid black;
    background-color: #0D0D0D;
}

* html div#Rahmen {  /* Korrektur fuer IE 5.x */
    width: 54em;
    w\idth: 63.1em;
}

div#Rahmen div {
        clear: left;
        text-align: center;
}

ul#Navigation {
    margin: 0; padding: 0;
    text-align: center;                /*oberste reihe*/
}


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.1em;
}

*: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: #0D0D0D; padding-bottom:1em;
}

ul#Navigation li:hover ul {
    display: block;  /* Unternavigation in modernen Browsern einblenden */
}

ul#Navigation li ul li {
    float: left;
    display: block;
    margin-bottom: 0.2em;
}

ul#Navigation a, ul#Navigation span {
    display: block;
    width: 18.2em;  /* Breite den in li enthaltenen Elementen zuweisen */
    padding: 0.2em 1em;
    text-decoration: none; font-weight: bold;
    border: 0px solid black;
    border-left-color: #0D0D0D; border-top-color: #0D0D0D;
    color: #CCC000; background-color:#0D0D0D;
}

* html ul#Navigation a, * html ul#Navigation span {
    width: 9em;  /* Breite nach altem MS-Boxmodell fuer IE 5.x */
    w\idth: 18.3em;  /* korrekte Breite fuer den IE 6 im standardkompatiblen Modus */
}

ul#Navigation a:hover, ul#Navigation span, li a#aktuell {
    border-color: url(images/img1.jpg);
    border-left-color: #0D0D0D; border-top-color: #0D0D0D;
    color: orange; background-color: #0D0D0D;
}

li a#aktuell {  /* aktuelle Rubrik kennzeichnen */
    color: #FF941D; background-color: #0D0D0D;
}

ul#Navigation li ul span {  /* aktuelle Unterseite kennzeichnen */
    background-color: #0D0D0D;
}

/* footer */

#footer {
          position:fixed;
          bottom:0px;
    background:#0D0D0D;
    text-align:center;
        margin: auto;
          padding:1px;
          width: 700px;
}
#footer_container {
          position:fixed;
          bottom:0; left:0; right:0;
          text-align:center;
          margin:0;
          height:2em;
}       

* html #footer {                /*fuer IE */
        background:#0D0D0D;
        height:13px;
        text-align:center;
        padding-top:1%;
}

danke schon mal,
weblearner!

weblearner 05.12.2008 23:51

Hier schauen so viele profies rein..... hat den kener einen lösungsvorschlag...?

fricca 06.12.2008 00:23

#content braucht hasLayout, das text-align im body darf IE7 nicht sehen.

weblearner 06.12.2008 10:16

hey!
danke für deine antwort...
hab zwar noch nie was von nem halslayout gehört aber gut....
ich folge mal deinem link und les mich ein...
dankeschön!

weblearner 06.12.2008 16:42

hallo nochmal...
also ich hab gelesen und gelesen und wirklich schlau bin ich leider nicht daraus geworden....
ich habe jetzt besagtes "text-align" im body mal komplett rausgenommen... den footer hat es dann auch sofort an die richtige stelle gesetzt.... bleibt noch die navigationsleiste...die ist nach wie vor an der gleichen stelle.... dazu kommt noch dass sie im IE anfangs nur zur hälfte angezeigt wird... erst wenn man kurz mit der maus dr5über fährt ist sie voll zu sehn... woran kann das noch liegen?
grüße!
weblearner

edit:
ich habe gerade rausgefunden dass es an dem "padding: 18px;" im #content liegen muss... wenn ich "padding: 2px;" schreibe wird die navigation im IE 7 richtig angezeigt, nicht aber im FF.... kann man da nicht irgendwie was tricksen damit der IE "padding: 2px;" und der FF "padding: 18px;" liest?
das problem mit derhalben navigationsleiste besteht trotzdem weiterhin...

fricca 06.12.2008 17:01

weblearner, das hasLayout-Phänomen im IE <= 7 wird dir ständig begegnen, wenn du Webseiten machst. Glaub mir, es ist unumgänglich, den verlinkten Artikel wirklich durchzuarbeiten.

Die eigentliche Problemursache bei dir ist die negative Verschiebung wegen des Padding.
Nimm die Navigation vor #content, dann musst du nichts verschieben.

Die em-Breiten sind nicht sinnvoll in einem Layout mit fester Pixelbreite.

weblearner 06.12.2008 17:25

ok ok... ich weiss ich bin grad ein bisschen faul ;)
ich werde lesen bis der arzt kommt, versprochen..!
kannst du mir aber verraten warum die navigation nur zur hälfte angezeigt wird? oder steht das auch da drin? das leuchtet mir nämlich überhaupt nicht ein...
danke für die mühe bisher!

fricca 06.12.2008 17:28

Bist du auch zu faul, die Antworten hier zu lesen?
Ich habe bereits geschrieben, wie du dein Problem am einfachsten lösen kannst! Weg mit den negativen Margins.

Zitat:

kannst du mir aber verraten warum die navigation nur zur hälfte angezeigt wird?
Wegen des fehlenden hasLayout.

weblearner 06.12.2008 18:32

und nochmal ich!
so jetzt funktioniert alles!
ich dank dir fricca für die geduld und den super link!
weblearner!


Alle Zeitangaben in WEZ +2. Es ist jetzt 22:35 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2020, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2019