✔ div navigation verschoben im IE

[chirp]

Hallo,

dazu gibt es einige Threads, aber geholfen hat mir leider keiner.
Meine Seite wird in allen Browser außer dem IE korrekt angezeigt. Im IE werden die Grafik-Links verschoben, so das sie teilweise übereinanderliegen - kein schönes Bild und ich habe keine Idee mehr wie ich das verhindern könnte. Könnt ihr mir bitte sagen wie ich den IE dazu bringe das richtig anzuzeigen? Das ist die Navigation:

#nav 		{ margin:0;
		  padding:0;
		  list-style:none; }


#nav a
		{ display:block;
                   width:300; 
		  height:200; 


a#a:link, a#a:visited            {	position:absolute; top:12.5em; left:25em; width:300; height:200;

                                         background:url; }

a#a:hover                        {	background:url; }


a#b:link, a#b:visited            {      	position:absolute; top:12.5em; left:43.7em; width:300; height:200;

					background:url; }

a#b:hover                        {	background:url; }


a#c:link, a#c:visited            {       position:absolute; top:25em; left:25em; width:300; height:200;

					background:url; }

a#c:hover                        {	background:url; }


a#d:link, a#d:visited            {       position:absolute; top:25em; left:43.7em; width:300; height:200; color: #E8E8E8;

					background:url; }

a#d:hover                        {	background:url; }

Der Code orientiert sich glaube ich sehr an einem von Maik veröffentlichten.

<div id="nav">

         		<ul>
    		       	<li><a href="../www/pages/1.html" id="a"></a></li>
		       	</ul>


         		<ul>
    		        <li><a href="../www/pages/2.html" id="b"></a></li>
		        </ul


                         <ul>
    		       	<li><a href="../www/pages/3.html" id="c"></a></li>
		       	</ul>



                    	<ul>
    		       	<li><a href="../www/pages/4.html" id="d"></a></li>
		       	</ul>

                         </div>

Vielen Dank für eure Hilfe

 

[Maik]

Hi,

im ersten Regelblock fehlt das ul-Element:

#nav ul {
margin:0;
padding:0;
list-style:none;
}

und nach dem Zweiten die schliessende geschweifte Klammer:

#nav a { 
display:block;
width:300;
height:200;
}

Desweiteren fehlt bei allen Breiten- und Höhenangaben die Einheitenangabe px, weshalb die Links die Dimension nicht annehmen.

Normalerweise werden aber die Menüpunkte in ein einziges Listenelement eingebettet - also:

<div id="nav">
     <ul>
         <li><a href="../www/pages/1.html" id="a"></a></li>
         <li><a href="../www/pages/2.html" id="b"></a></li>
         <li><a href="../www/pages/3.html" id="c"></a></li>
         <li><a href="../www/pages/4.html" id="d"></a></li>
     </ul>
</div>

 

[chirp]

Danke für die schnelle Antwort.
Ul ist verloren gegangen. Ich dachte px ist Standardeinstellung. Und: natürlich ist eine Liste (auch eine ungeordnete) mit einem Punkt blöd.
Und: Leider ist die Situation unverändert.
Die links sollten mittig angeordnet sein und gleich groß. Im IE werden sie ja übereinander geschoben.
Noch eine Idee...?


PS: wieso habe ich plötzlich Renommee? Bis jetzt konnte ich leider nur Fragen... und "Mitglied Bronze" ist auch nicht von Anfang an oder?

 

[Maik]

Hast du auch im zweiten Regelblock die fehlende schliessende geschweifte Klammer gesetzt?

Denn bei mir werden nun die Links in allen mir zur Verfügung stehenden Browser einheitlich positionierrt.

Das hängt mit der Anzahl deiner Beiträge zusammen, dass du nun einen Renommeepunkt erhalten hast, und sich dein Benutzertitel geändert hat.

 

[chirp]

Die ist wohl beim kopieren verloren gegangen...
hier:
#nav { margin:0;
padding:0;
list-style:none; }

#nav ul { margin:0;
padding:0;
list-style:none; }


#nav a
{ display:block;
width:300;
height:200; }

______________________

Vielleicht wirken sich dann andere Skript-bestandteile negativ aus...ich gehe ein weiteres mal aus die Suche... dabei sieht es sonst gut aus..sea monkey, opera, firefox, safari

 

[Maik]

Bei dir fehlt wohl immer noch die Einheit "px" bei der Breiten- und Höhendeklaration.

Mit diesem Quellcode wird bei mir vom IE alles korrekt interpretiert und positioniert:

<!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">
<meta name="author" content="Maik">
<title>tutorials.de | demo_chirp</title>

<style type="text/css">
<!--
#nav ul {
margin:0;
padding:0;
list-style:none;
}

#nav a {
display:block;
width:300px;
height:200px;
position:absolute;
}

a#a:link, a#a:visited {
top:12.5em;
left:25em;
background:red;
}

a#a:hover { background:ur(); }

a#b:link, a#b:visited {
top:12.5em;
left:43.7em;
background:yellow;
}

a#b:hover { background:url(); }

a#c:link, a#c:visited {
top:25em;
left:25em;
background:green;
}

a#c:hover { background:url(); }

a#d:link, a#d:visited {
top:25em;
left:43.7em;
color: #E8E8E8;
background:blue;
}

a#d:hover { background:url(); }
-->
</style>

</head>
<body>

<div id="nav">
     <ul>
         <li><a href="../www/pages/1.html" id="a">a</a></li>
         <li><a href="../www/pages/2.html" id="b">b</a></li>
         <li><a href="../www/pages/3.html" id="c">c</a></li>
         <li><a href="../www/pages/4.html" id="d">d</a></li>
     </ul>
</div>

</body>
</html>

 

[chirp]

Hallo Maik,

vielen Dank für die komplette Seite. Bei mir wird dein Code schon in der Vorschau des Editors und auch im IE fehlerhaft dargestellt, wie gehabt. Es liegt also scheinbar nicht am Code, sondern an etwas anderem...meinem Editor (phase5) oder meinem IE..

 

[Maik]

Hi,

Phase5 verwendet den IE als Browser-Engine für die Seitenvorschau, und wenn der IE etwas falsch darstellt, schliesst sich da der Editor natürlich an.

Ich nutze ebenfalls diesen Editor (Phase 5², Release:21.01.2000), und bei mir zeigt er die Seite korrekt an.

 

[chirp]

danke, das wusste ich nicht. Ich bin ratlos. Dein Code war ja wohl ok . Ratlos..ich versuche mal ein IE Update. Wenn dir noch eine mögliche Ursache einfällt: Vielen Dank

 

[chirp]

Problem gelöst!
Habe nun die neuste Version vom IE installiert und prompt zeigt er alles richtig an. Nur Phase 5 übernimmt das noch nicht. Muss wohl auch neuinstalliert werden.
Tja, als relativer Anfänger rechnete ich nicht damit das der Browser schuld ist..
Dankeschön!