zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden IE 7 zeigt footer und navi falsch an

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 05.12.2008, 16:00
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 03.12.2008
Beiträge: 10
weblearner befindet sich auf einem aufstrebenden Ast
Standard 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!
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 06.12.2008, 00:51
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 03.12.2008
Beiträge: 10
weblearner befindet sich auf einem aufstrebenden Ast
Standard

Hier schauen so viele profies rein..... hat den kener einen lösungsvorschlag...?
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 06.12.2008, 01:23
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.775
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

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

Geändert von fricca (06.12.2008 um 01:40 Uhr) Grund: Link vergessen
Mit Zitat antworten
  #4 (permalink)  
Alt 06.12.2008, 11:16
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 03.12.2008
Beiträge: 10
weblearner befindet sich auf einem aufstrebenden Ast
Standard

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!
Mit Zitat antworten
  #5 (permalink)  
Alt 06.12.2008, 17:42
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 03.12.2008
Beiträge: 10
weblearner befindet sich auf einem aufstrebenden Ast
Standard

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...

Geändert von weblearner (06.12.2008 um 17:51 Uhr)
Mit Zitat antworten
  #6 (permalink)  
Alt 06.12.2008, 18:01
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.775
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

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.
Mit Zitat antworten
  #7 (permalink)  
Alt 06.12.2008, 18:25
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 03.12.2008
Beiträge: 10
weblearner befindet sich auf einem aufstrebenden Ast
Standard

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!
Mit Zitat antworten
  #8 (permalink)  
Alt 06.12.2008, 18:28
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.775
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

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.

Geändert von fricca (06.12.2008 um 18:32 Uhr)
Mit Zitat antworten
  #9 (permalink)  
Alt 06.12.2008, 19:32
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 03.12.2008
Beiträge: 10
weblearner befindet sich auf einem aufstrebenden Ast
Standard

und nochmal ich!
so jetzt funktioniert alles!
ich dank dir fricca für die geduld und den super link!
weblearner!
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
FAQ -- Häufig gestellte Fragen und häufig gegebene Antworten mazzo CSS 10 05.04.2012 18:32
grafische Navigation horizontal zentrieren, klappt nicht lila_3 CSS 4 30.11.2010 11:25
IE verschiebt Navi Menü macmensa CSS 7 17.08.2009 17:45
Probleme mit horizontaler Navi rechts lila_3 CSS 2 14.07.2009 22:36
div zentriert ? malo.conny CSS 2 26.04.2005 09:40


Alle Zeitangaben in WEZ +2. Es ist jetzt 16:39 Uhr.