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.
Hier der Quelltext der HTML-Datei
[HTML]
alias architects
<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>
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.