Andere Darstellung Firefox und IE

Hallo,

ich habe nach längerem stöbern und suchen einige Informationen zur Navigation gefunden und die in meine Seite eingebaut.
Beim Firefox funktioniert alles einwandfrei, allerdings ist die Schrift beim IE verschoben und nicht zentriert.
Daraufhin habe ich Netz weiter gesucht und wiederum einige Informationen zu der Anpassung bei verschiedenen IE-Versionen. Leider funktioniert das immer noch nicht wie gewünscht.
Kann mir da jemand weiterhelfen? Ich sitze schon recht lange an der Sache und so langsam ist es frustrierend, dass die Seite beim IE immer noch falsch angezeigt wird. :frowning:
Hier der Quelltext der HTML-Datei
[HTML]

alias architects [if lte IE 6]> #Rahmen { behavior:url("csshover.htc"); } <![endif]

alias architects

  • PROFILE
  • <li><a href="projects/architecture.html">PROJECTS</a>
      <ul>
        <li><a href="projects/architecture.html">ARCHITECTURE</a></li>
        <li><a href="projects/urban.html">URBAN STRUCTURE</a></li>
        <li><a href="projects/intersections.html">INTERSECTIONS</a></li>
      </ul>
    </li>
    
    <li><a href="references/projectlist.html">REFERENCES</a>
      <ul>
        <li><a href="references/projectlist.html">PROJECTLIST</a></li>
        <li><a href="references/clients.html">CLIENTS</a></li>
        <li><a href="references/memberships.html">MEMBERSHIPS</a></li>
        <li><a href="references/networking.html">NETWORKING</a></li>
      </ul>
    </li>
    
    <li><a href="news/news.html">NEWS</a>
      <ul>
        <li><a href="news/news.html">NEWSTICKER</a></li>
        <li><a href="news/links.html">LINKS</a></li>
      </ul>
    </li>
    
    <li><a href="projects/architecture.html">CONTACT</a>
      <ul>
        <li><a href="contact/adress.html">ADRESS</a></li>
        <li><a href="contact/internet.html">INTERNET</a></li>
        <li><a href="contact/imprint.html">IPRINT</a></li>
      </ul>
    </li>
    
[/HTML]und hier die dazugehörige CSS-Datei. tut mir leid, wenn es mittlerweile etwas viel geworden ist. Ich habe mal alle meine Versuche drin gelassen. Ich hoffe, dass Ihr dank der Kommentare zurcht kommt. [CODE]

body {
padding: 0px;
height:350px;
width:768px;
background-image: url(Bilder/leer.jpg);
background-repeat: no-repeat;
background-color: #000000;
}

a {
text-decoration: none;
}

a:link {
color: #cc0000;
}

a:visited {
color: #cc0000;
}

a:active {
color: #cc0000;
}

a:hover {
color: #FFCC00;
}

p.alias {
position: absolute;
top: 310px;
left: 285px;
font-size: 30px;
word-spacing: 7px;
letter-spacing: 16px;
font-family: century gothic;
color: #cc0000;
text-decoration: none;
}

#inhalt {
font-family: century gothic;
position: absolute;
top: 70px;
font-size: 13px;
color: #cc0000;
}

a.profile {
position: absolute;
top: 310px;
left: 165px;
}

a.projects {
position: absolute;
top: 310px;
left: 300px;
}

a.references {
position: absolute;
top: 310px;
left: 450px;
}

a.news {
position: absolute;
top: 310px;
left: 630px;
}

a.contact {
position: absolute;
top: 310px;
left: 755px;
}

div#Rahmen {
font-family: century gothic;
position: absolute;
top: 360px;
left: 180px;
font-size: 14px;
color: #cc0000;

width: 700px;
padding: 20px;
border: 0;
background-color: black;

}
html div#Rahmen { /* Korrektur fuer IE 5.x */
width: 700px;
}
div#Rahmen div {
clear: left;
}
ul#Navigation {
margin: 0; padding: 0;
text-align: center;
}

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.4em;
}
: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:hover ul { /
Korrektur fuer IE 5.x /
left: -1.5em;
left: -0.4em;
}
:first-child+html ul#Navigation ul { /
Workaround fuer den IE 7 /
background-color:black; padding-bottom:0.4em;
}
ul#Navigation li:hover ul {
display: block; /
Unternavigation in modernen Browsern einblenden */
}
ul#Navigation li ul li {
float: none;
display: block;
margin-bottom: 0.2em;
}

ul#Navigation a, ul#Navigation span {
display: block;
width: 10em; /* Breite den in li enthaltenen Elementen zuweisen /
padding: 0.2em 1em;
text-decoration: none;
border: 0;
border-left-color: black; border-top-color: black;
color: #cc0000; background-color: black;
}
html ul#Navigation a, html ul#Navigation span {
width: 8.6em; /
Breite nach altem MS-Boxmodell für IE 5.x /
w\idth: 6.4em; /
korrekte Breite fuer den IE 6 im standardkonformen Modus /
}
ul#Navigation a:hover, ul#Navigation span, li a#aktuell {
border-color: black;
border-left-color: black; border-top-color: black;
color: #ffcc00; background-color: black;
}
li a#aktuell { /
aktuelle Rubrik kennzeichnen /
color: #cc0000; background-color: black;
}
ul#Navigation li ul span { /
aktuelle Unterseite kennzeichnen */
background-color: black;
}
[/CODE]
Vielen Dank im Voraus.

Huhu…
ne, der CSS-Code ist noch sehr übersichtlich. Um dein Dokument fehlerfrei durch die Browser darstellbar zu haben, musst du auf jeden Fall erst einmal einen Doctype einbauen. Vorher lohnt sich alles spekulieren nicht.

SELFHTML: HTML/XHTML / Allgemeine Regeln fr HTML / Grundgerst einer HTML-Datei

Viele Grüße
Körnerbrötchen

Hallo nochmal,

ich habe heute entdeckt, dass nach dem Einfügen der Zeile:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> in meinem Dokument es Probleme mit der Positionierung der Tabelle gibt.
Im Firefox wird sie wie ich es mir denke richtig (fortlaufend) unterhalb des Textes angezeigt.
Im IE erscheintsie allerdings oben-links.
Ich verstehe nicht warum, denn in meiner CSS-Datei habe ich (meiner Meinung nach) eigentlich nichts stehen, was die Seite dazu veranlassen würde die Tabelle woanders zu positionieren.
Hier noch die Quellcodes der HTML Datei:
[HTML]

aliasarchitects profile

Text1


Text2


ZeileSpalte
TestTest

[/HTML]und der CSS-Datei: [CODE] body { padding: 0px; height:409px; width:768px; background-image: url(../../Bilder/hintergrund.jpg); background-repeat: no-repeat; background-color: #000000; }

#inhalt {
width: auto;
margin: 0px 150px 200px 0px;
font-family: century gothic;
}

p.inhalt {
margin: 0px;
position: absolute;
width: 600px;
height: 320px;
top: 140px;
left: 290px;
font-size: 10px;
font-family: century gothic;
line-height: 1.3em;
}

table.partner {
line-height: 1.1em;
font-size: 10px;
font-family: century gothic;
}
[/CODE]Ich hoffe, dass Ihr wieder eine Lösung wisst.
Vielen Dank im Voraus.

Liebe Grüße
bucada

An deinem Code ist immer noch eine Menge zu tun.
[html] [/html][FONT=monospace]
[/FONT]Bei HTML 4 kannst du den letzten Slash weglassen.[FONT=monospace]
[/FONT][html]

[/html][FONT=monospace]
[/FONT]Das p steht für paragraph und das heißt auf deutsch „Absatz“. Du deklarierst damit jedoch keinen solchen. Ersetze das p-tag durch ein div-tag.[FONT=monospace]
[/FONT][html] Text1[/html]Das font-tag ist veraltet. Du brauchst das auch gar nicht, denn das kannst du ja per CSS lösen.

Im CSS:

font-family: century gothic;Was ist „century gothic“? Wenn es eine Schriftart ist, dann muss diese in Anführungszeichen gesetzt werden, sind es zwei, dann gehört ein Komma dazwischen. Dennoch solltest du Alternativschriftarten vorschlagen, denn die wenigsten User werden diese installiert haben.

Viele Grüße

Achja: Das schließende font-tag in der Tabelle muss auch noch raus. Das gehört da nicht hin.

Vielen Dank nochmal.
Mit Deinen Tipps hat das jetzt geklappt. :razz:

Wunderbar. :slight_smile: Das freut zu hören.