Navigation wird im IE falsch, im FF richtig dargestellt...

Stefanotis · #1 (**permalink**) 10.05.2007, 16:14

Ich habe unten stehende Anzeigefehler in der navigation meiner erstellen Seite. geschrieben ists mit HTML und CSS. Ich habe schon ein bisschen über diese Problematik gelesen, aebr wieso der IE6 nun das Manü so falsch darstellt bleibt mir ein Rätsel..weiß jemand, wie ich das beheben kann?

korrekte Anzeige im FF:
http://spitmode.sp.funpic.de/Clipboard02.gif

falsche Darstellunge im IE6:
http://spitmode.sp.funpic.de/Clipboard01.gif
Hier der Quellcode der HTML:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>bla</title>
<link rel="stylesheet" type="text/css" href="format.css"></link>
</head>
<body>

<center><table class="bg_table" id="bg_table"><tr><td>







<center>
<table border="0" cellspacing="0" cellpadding="0"><tr><td>





<div id="Logorahmen"><ul id="Logo">

    <li></li>

  </ul></div>



  <div id="Rahmen"><ul id="Navigation">

    <li><a id="aktuell" href="#Beispiel">Start</a></li>

    <li><a href="#Beispiel">Leistungen</a></li>

    <li><a href="#Beispiel">Fotos</a></li>

    <li><a href="#Beispiel">Ausbildung</a></li>

    <li><a href="#Beispiel">Kontakt</a></li>

    <li><a href="#Beispiel">Impressum</a></li>

    <li><a href="#Beispiel">Datenschutz</a></li>

  </ul></div>




</td></tr></table>
</center>




<center>
<table border="0" cellspacing="0" cellpadding="0"><tr><td>
<div>
<h1>Aktuelles</h1>
<p>
Derzeit gibt es leider keine Aktuellen InfosDerzeit gibt es leider keine Aktuellen InfosDerzeit gibt es leider keine Aktuellen InfosDerzeit gibt es leider keine Aktuellen InfosDerzeit gibt es leider keine Aktuellen InfosDerzeit gibt es leider keine Aktuellen InfosDerzeit gibt es leider keine Aktuellen InfosDerzeit gibt es leider keine Aktuellen InfosDerzeit gibt es leider keine Aktuellen InfosDerzeit gibt es leider keine Aktuellen InfosDerzeit gibt es leider keine Aktuellen InfosDerzeit gibt es leider keine Aktuellen InfosDerzeit gibt es leider keine Aktuellen InfosDerzeit gibt es leider keine Aktuellen InfosDerzeit gibt es leider keine Aktuellen InfosDerzeit gibt es leider keine Aktuellen InfosDerzeit gibt es leider keine Aktuellen InfosDerzeit gibt es leider keine Aktuellen InfosDerzeit gibt es leider keine Aktuellen InfosDerzeit gibt es leider keine Aktuellen InfosDerzeit gibt es leider keine Aktuellen InfosDerzeit gibt es leider keine Aktuellen InfosDerzeit gibt es leider keine Aktuellen InfosDerzeit gibt es leider keine Aktuellen InfosDerzeit gibt es leider keine Aktuellen InfosDerzeit gibt es leider keine Aktuellen InfosDerzeit gibt es leider keine Aktuellen InfosDerzeit gibt es leider keine Aktuellen InfosDerzeit gibt es leider keine Aktuellen InfosDerzeit gibt es leider keine Aktuellen InfosDerzeit gibt es leider keine Aktuellen InfosDerzeit gibt es leider keine Aktuellen InfosDerzeit gibt es leider keine Aktuellen InfosDerzeit gibt es leider keine Aktuellen InfosDerzeit gibt es leider keine Aktuellen InfosDerzeit gibt es leider keine Aktuellen InfosDerzeit gibt es leider keine Aktuellen InfosDerzeit gibt es leider keine Aktuellen InfosDerzeit gibt es leider keine Aktuellen InfosDerzeit gibt es leider keine Aktuellen InfosDerzeit gibt es leider keine Aktuellen InfosDerzeit gibt es leider keine Aktuellen InfosDerzeit gibt es leider keine Aktuellen InfosDerzeit gibt es leider keine Aktuellen InfosDerzeit gibt es leider keine Aktuellen InfosDerzeit gibt es leider keine Aktuellen InfosDerzeit gibt es leider keine Aktuellen InfosDerzeit gibt es leider keine Aktuellen InfosDerzeit gibt es leider keine Aktuellen InfosDerzeit gibt es leider keine Aktuellen InfosDerzeit gibt es leider keine Aktuellen InfosDerzeit gibt es leider keine Aktuellen InfosDerzeit gibt es leider keine Aktuellen InfosDerzeit gibt es leider keine Aktuellen InfosDerzeit gibt es leider keine Aktuellen InfosDerzeit gibt es leider keine Aktuellen InfosDerzeit gibt es leider keine Aktuellen InfosDerzeit gibt es leider keine Aktuellen InfosDerzeit gibt es leider keine Aktuellen InfosDerzeit gibt es leider keine Aktuellen Infosv




<br><br><br><br>
<br><br><br><br>
<br><br><br><br>
<br><br><br><br>
<br><br><br><br>

</p>
</div>

</td></tr></table>
</center>






</td></tr></table></center>
</body>
</html>

Und nun der Teil des Codes in der CSS:

Code:

/* DATEI: format.css */

  body {
    color: black; background-color: white; background-image:url(images/back_main_2.gif);
    font-family: arial;
  }

  div#Logorahmen {
    width: 850px;
    height: 106px;
    padding: 5px;
    border: 1px #009F96 solid;
    border-bottom: none;
    background-image:url(images/bg_logo.gif);
  }

  ul#Logo {
    margin: 0; padding: 0;
    text-align: center;
  }

  ul#Logo li {
    list-style: none;
    float: left;
    padding: 3;
  }

  div#Rahmen {
    width: 850px;
    height: 15px;
    max-height: 15px;
    padding: 5px;
    border: 1px #009F96 solid;
    border-top: none;
    background-image:url(images/bg_navi.gif);
  }


  ul#Navigation {
    margin: 0; padding: 0;
    text-align: center;
  }

  ul#Navigation li {
    list-style: none;
    float: left;
    width: 90px;
    padding: 3;
    padding-top: 10;

  }



  ul#Navigation a, ul#Navigation span {
    display: block;
    padding: 0.2em 1em;
    text-decoration: none;
    border: 1px solid #009F96;
    color: #009F96; background-color: white;
    font-size: 11;
  }

  ul#Navigation a:hover, ul#Navigation span, li a#aktuell {
    border: 1 px solid white;
    color: white; background-color:  #009F96;
  }

  li a#aktuell {  /* aktuelle Rubrik kennzeichnen */
    color: white; background-color: #004191; border: 1px solid #004191;
  }

div {
    width: 864px;
    border: none;
  }

  p {
  padding: 5px;
  text-align: left;
  font-family: arial; font-size: 13; color: black;
  }

  h1 {
  padding: 5px;
  width: 851px;
  font-family: arial; font-size: 14;
  color: #004191;
  border: 1px solid #009F96;
  background-image:url(images/h1.gif);
  }

  table#bg_table {
  width: 900px;
  background-color: white;
  border: 1px solid #05CABF;
  padding-top: 10px;
  }

Ich bin wirklich am verzwifeln, kriege es einfach nicht hin, dass es im IE vernünftig ausschaut...bin sehr dankbar für jede Hilfestellung!

mfG

Spitmode[img][/img]

heiko_rs · #2 (**permalink**) 10.05.2007, 16:21

Fieses Markup: nicht valide, Tabellen, veraltete Attribute - vergeude keine Zeit darauf, sondern mache alles neu. Bei Fragen dazu kannst Du gerne immer posten (die korrekte Umsetzung Deines Designs ist relativ leicht).

Stefanotis · #3 (**permalink**) 10.05.2007, 16:24

Okay...
und wo kann ich dann erfahren, was ich alles "veraltet" erstellt habe? haste 'n guten Lesetipp parat, der mir erklärt, wie ich das neu und einfacher gestalte?

heiko_rs · #4 (**permalink**) 10.05.2007, 16:33

Ersetze erstmal alle Tabellen durch divs (wenn nötig), dann sind auch die veralteten Attribute bereits weg (abgesehen davon, daß Tabellen für tabellarische Daten gedacht sind, nicht jedoch zum Layouten bzw. Positionieren von Elementen zweckentfremdet werden sollen). Dann wirf <center> raus (dafür gibt's CSS). Auch sowas

Code:

<br><br><br><br>
<br><br><br><br>
<br><br><br><br>
<br><br><br><br>
<br><br><br><br>

brauchst Du nicht, auch dafür gibt's CSS (margin/padding).

Sehr hilfreich ist immer The W3C Markup Validation Service - dort wirst Du (vor allem bei Deinem Doctype) auf alles fehlerhafte (und veraltete) hingewiesen.

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Spry Menü bar falsch dargestellt im IE	Hilltono	CSS	2	02.12.2010 22:01
Problem mit FlyOut Menu im IE7	quarki69	CSS	5	15.03.2010 15:46
Falsche Darstellung im Internet Explorer	rw1981	CSS	3	06.02.2009 12:51
Balken wird nicht richtig dargestellt	believe_me	CSS	3	07.10.2008 21:09
Problem mit Line-Height auf dem IE lte 6	actionjackson	CSS	2	20.11.2007 10:17