✔ Link Menü in IE verschoben (Html&CSS)

P

Ph4Z3r

Grünschnabel
Hallo

bin noch ziemlich neu in Sachen Html und CSS aber ich hab ein problem mit dem IE 7 und ich weis nicht woran das liegen könnte.
Ich habe schon in Google geschaut aber nichts gefunden was mir helfen könnte.
Hab auch mal bei "validator.w3.org" die Seite überprüfen lassen und es wurden Fehler angezeigt aber das hilft mir auch nicht wirklich weil die fehler die angezeigt werden nicht im HTML-Code von mir auftauchen
bis auf eines.
Darum frage ich einfach mal hier nach hilfe^^


Das Problem ist folgendes:
Ich habe 2 Link- Navigationen, eine oben und eine Links. Im Fire Fox sehen die 2 Navigationsleisten richtig aus d.h. es sitzt alles da wo es sein sollte.
Im IE allerdings sind Navigationen "verschoben" d.h. die obere Navigationsleiste ist wie eine Treppe angeordnet (von links oben nach rechts unten) und
bei der Navigation Links sind Links "nur" nach untenhin auseinander gezogen.
Wie gesagt habe ich die Seite ja überprüfen lassen und mir wurde gesagt das dieser Code vor dem <head> Abschnitt fehlt:
HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
Nachdem ich den Code eingefügt habe seh es im IE schon anders aus: Die Links Oben werden zwar immernoch wie eine Treppe angeordnet nur das der Content-Bereich nicht nach untengeschoben wurde
und die Links auf der linken Seite sind diesmal NICHT nach unten verzerrt.

Ich habe Screenshots angehängt: (Weil die Bilder sehr groß sind füge ich sie mal als Link ein)

HP im Fire Fox
HP im IE mit Code
HP im IE ohne Code

Mein HTML-Code:
HTML: 
<html>
<head>
<title>"EvSeMa"</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">


<link href="config.css" rel="stylesheet" type="text/css" media="all">
</head>
<body style="text-align:center;">


<div id="Page">
  <div id="Header">  </div>
  
  <div id="Navi-Oben">
    <ul id="Nav-Oben">
     <li><a href="Layout.html" id="current">EvSeMa</a></li>
     <li><a href="Gallerie.html">Angebot</a></li>
     <li><a href="#">Preise</a></li>
     <li><a href="#">Buchung</a></li>
     <li><a href="#">Referenz</a></li>
     <li><a href="#">Galerie</a></li>
     <li><a href="#">Kontakt</a></li>
     <li><a href="#">Links</a></li>
    </ul>
  </div>
    
  	<div id="Navi-Links">   
      <ul id="Nav-Links">
       <li><a href="#">Link1</a></li>
       <li><a href="#">Link2</a></li>
       <li><a href="#">Link3</a></li>
       <li><a href="#">Link4</a></li>
       <li><a href="#">Link5</a></li>
       <li><a href="#">Link6</a></li>
       <li><a href="#">Link7</a></li>
       <li><a href="#">Link8</a></li>
       <li><a href="#">Link9</a></li>
       <li><a href="#">Link10</a></li>
      </ul>
    </div>
    
    <div id="Content"> 
     
      <div id="Text">
        <ul>
          <li>Hallo ich bin eine testpage!</li>
          <li>hhjk  </li>
        </ul>
      </div>
  </div>
    

  <div id="Footer">  
  </div>
</div>
</body>
</html>

Und mein CSS-Code:
Code: 
#Page {
	background-image:url(Bilder/Background.png);
	background-repeat:repeat-x;
	background-color:#1c3855;
	width:1024px;
	height:1090px;
	position:relative;
	margin:0px auto;
	text-align:left;
	}
#Header {
	background-image:url(Bilder/Header.png);
	width:974px;
	height:160px;
	float:left;
	position:relative;
	left:25px;
	top:25px;
}
#Navi-Oben {
	background-image:url(Bilder/Navi-Oben.png);
	background-repeat:no-repeat;
	width:924px;
	height:25px;
	float:left;
	position:relative;
	left:50px;
	top:40px;
}
#Navi-Links {
	background-image:url(Bilder/Navi-Links.png);
	background-repeat:no-repeat;
	width:150px;
	height:300px;
	float:left;
	position:relative;
	left:25px;
	top:55px;
}
#Content {
	background-image:url(Bilder/Content.png);
	width:809px;
	height:710px;
	float:left;
	position:relative;
	left:40px;
	top:55px;
}
#Text{
	width:779px;
	height:635px;
	position:absolute;
	left: 15px;
	top: 50px;
}
#Footer {
	background-image:url(Bilder/Footer.png);
	width:974px;
	height:100px;
	float:left;
	position:relative;
	left:25px;
	top:70px;
}
ul#Nav-Oben{
	margin:2px;
	padding:0px;
	list-style:none;
}
ul#Nav-Links{
	Margin:0px;
	padding:0px;
	list-style:none;
}
ul#Nav-Oben a{
	float:left;
	text-decoration:none;
	text-align:center;
	display:block;
	margin: 0px 0px 0px 0px;
	font: bold .8em verdana, "sans serif";
	color:#FFFFFF;
}
ul#Nav-Links a{
	float:left;
	text-decoration:none;
	text-align:center;
	display:block;
	margin: 25px 0px -25px 0px;
	font: bold .8em verdana, "sans serif";
	color:#FFFFFF;
}
ul#Nav-Oben li a:link, ul#Nav-Oben li a:visited{
	width:115px;
	line-height:21px;
}
ul#Nav-Oben li a:hover{
	background-image:url(Bilder/Link_Oben-Hover.png);
	background-repeat:no-repeat;
}
ul#Nav-Oben li a:active, ul#Nav-Oben li a#current{
	background-image:url(Bilder/Link_Oben-Hover.png);
	background-repeat:no-repeat;
}
ul#Nav-Links li a:link, ul#Nav-Links li a:visited{
	width:150px;
	line-height:25px;
}
ul#Nav-Links li a:hover{
	background-image:url(Bilder/Link_Links-Hover.png);
	background-repeat:no-repeat;
}
ul#Nav-Links li a:active, ul#Nav-Links li a#current{
	background-image:url(Bilder/Link_Links-Hover.png);
	background-repeat:no-repeat;
}

Hier noch der Link zu meiner HP:

http://valhallaempire.va.funpic.de/evsema/Layout.html


Würde mich freuen wenn ihr mir helfen könnt

MfG
Ph4Z3r
 
Hi,

CSS: 
ul#Nav-Oben li { display:inline; }

sorgt für die horizontale Ausrichtung der Listeneinträge (<li>), und verhindert ihre treppenartige Anordnung im IE6 u. IE7.

mfg Maik
 
Vielen Dank
hat mir sehr geholfen :)

Hab nun leider noch eine Frage:

Laut: Validator.w3.org
habe ich 6 Fehler in meinem HTML-Dokument aber in meinem Dokument sind diese Fehler nicht.
Habe ich da doch iwas falsch gemacht?
 
Jo, sonst würde der Validator sich ja nicht zu Wort melden :)

Zwischen dem <html> und <title>-Tag fehlt der öffnende <head>-Tag als Pendant zum schliessenden </head> vor dem <body>-Tag.

Desweiteren werden in XHTML inhaltsleere Elemente (= Standalone-Tags) mit dem Schrägstrich vor der >-Klammer geschlossen - siehe hierzu auch die Gegenüberstellung der "HTML 4.01"- und "XHTML"-Syntax Unterschied: Leere Elemente.

HTML: 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />


<link href="config.css" rel="stylesheet" type="text/css" media="all" />


mfg Maik
 
Ph4Z3r hat gesagt.:
Habe ich da doch iwas falsch gemacht?
Zum Vergrößern anklicken....
Ja, hast du. Du hast vergessen <head> zu öffnen.

XHTML erwartet ein Slash bei Elementen die keinen eigenen End-Tag besitzen:
HTML: 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
<link href="config.css" rel="stylesheet" type="text/css" media="all" />

Der Rest sind Folgefehler.
 
Ph4Z3r hat gesagt.:
Ach mist das erste hab ich glatt übersehen^^ und das zweite wusste ich nicht

Danke an Euch :)
Zum Vergrößern anklicken....
Keine Ursache - ist doch gern geschehen :)

Und was meinst du, wie der Validator vor neun oder zehn Jahren meine allerersten Dokumente in der Luft zerissen hat :)

Dagegen waren die sechs Fehlermeldungen von eben ein Treppenwitz :-(

mfg Maik
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück