Problem mit Anpassung an den IE
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
background
bild
datei
display
first
flugplan
korrektur
margin
navigation
none
nutzer
office
pawort
pfingsmontag
quelltext
rahmen
span
statistik
streckennetz
test
-
Hallo,
ich bin gerade dabei mal wieder eine neue Homepage zu gestalten. Ich habe nun die index-Datei fast fertig. Da ich zu Hause nur Firefox nutze habe ich es auch hier alles getestet. Nun wollte ich mir das ganze nochmal im IE anschauen und stellte mit schrecken viele ungenauigkeiten fest.
http://jensico-airlines.lima-city.de/neuews/index2.html
Das ist der Link.
Nun wollte ich ein paar Anpassungfragen stellen:
Im IE und bei Firefox ist der Text Passwort vergessen leicht unter dem Bild, ich habe aber nur 1 mal <br>. Hier der Quelltext für den Bereich:
....
<td width="800" height="120" align="right" background="oben.jpg" style="background-repeat:no-repeat;">
<form action="login.php" method="POST"><input type="Text" name="name" maxlength="20" value="Benutzername"> <br><input type="Password" name="password" maxlength="20" value="Passwort"> <br><input type="Submit" name="Login" value="Login"> </form>
<br><a href="pwvergessen.html"><font size="-1">Passwort vergessen</font></a>
</td>...
Außerdem werden die Iframes (Statistik und werbung) im IE geblockt. Warum das?
Mein größeres Problem ist aber eigentich die Navigation. Die Hauptnavi funktioniert im IE und bei Firefox 1A (Office...)
Bei Firefox ist die "Unternavigation) TEST1.... ohne Rahmen, bei dem IE ist dort ein Rahmen und es fehlt sogar etwas!
Hier die Quelltext:
index2.html
....
<td width="800" height="50">
<iframe src="navi.html" scrolling="no" border="0" width="800" frameborder="0" height="50"></iframe>
</td>
</tr>
<tr>
<td width="800" height="35">
<iframe src="navi2.html" scrolling="no"border="0" width="800"frameborder="0" height="35"></iframe>
</td>
....
navi.html (CSS-Datei habe ich mal raus genommen)
....
<body text="#000000" bgcolor="#FFFFFF">
<ul id="Navigation">
<li><a href="office.html" target="navi">Office</a></li>
<li><a href="flugbetrieb.html" target="navi">Flugbetrieb</a></li>
<li><a href="training.html" target="navi">Training</a></li>
<li><a href="#Beispiel">Anmelden</a><div></div></li>
</ul>
</body>
....
office.html (CSS-Datei habe ich auch hier raus genommen)
.....
<ul id="Navigation">
<li><a href="#Beispiel">TEST1</a></li>
<li><a href="#Beispiel">TEST2</a></li>
<li><a href="#Beispiel">Test</a></li>
<li><a href="#Beispiel">Test</a><div></div></li>
</ul>
.....
navi2.html
.....
<frameset>
<frame scrolling="no" name="navi" src="office.html"></frame>
<frame scrolling="no" name="navi" src="flugbetrieb.html"></frame>
<frame scrolling="no" name="navi" src="training.html"></frame>
</frameset>
......
Und mein letztes Problem:
Ich habe unten 3 Tabellen mit Rahmen (Jensico Airlines erweitert das Streckennetz ab Berlin-Tegel. Neu im Flugplan sind Quito (Ecuador) und Antalya (Türkei)). Der Rahmen ist jedoch sehr dick. Ich würde ihn gerne so haben, wie auch bei der Statistik ist (doch diese ist ein IFRAME).
Ich hoffe mir kann jemand helfen. Ich wünsche allen einen schönen Pfingsmontag.
Mfg Jens -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
http://validator.w3.org/check?uri=http%3A%2F%2Fjensico-airlines.lima-city.de%2Fneuews%2Findex2.html
Deine Seite ist nicht valide. Kümmer dich erstmal darum. Am besten machst du gleich XHTML Strict draus.
Denn solange du dich nicht an die Standards hälst, ist die Wahrscheinlichkeit wesentlich höher, dass mal ein Browser quer schießt.
Abgesehen davon ist der IE nicht gerade berühmt dafür, die Standards zu unterstützen. Es ist ein Fehler des IE, falls die Seite bei korrekten Standards falsch angezeigt wird. Solange es nicht zu kritisch ist, können die IE Nutzer es ruhig ein wenig unangenehmer haben. -
Hallo,
ich habe es mir darin mal angehen, habe aber auch noch sachen verändert. Jetzt bin ich auf eine Andere Idee gekommen, wie ich die Navigaitonsleiste erstellen könnte und schon habe ich das nächste Problem.
Ich will die Leiste nur "Aufklappbar" machen. Bei Firefox funktioniert das auch ohne Probleme, aber im IE klappt die sich einfach nicht auf
Hier mal die CSS-Datei:
body { font: normal 100.01% Helvetica, Arial, sans-serif; color: black; background-color: #C5C5C5; } div#Rahmen { width: 800px; padding: 0px; border: 0px; background-color: #C5C5C5; z-index:2; } * html div#Rahmen { /* Korrektur fuer IE 5.x */ width: 800px; w\idth: 800px; } 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 ul { /* Korrektur fuer IE 5.x */ left: -1.5em; lef\t: -0.4em; } *:first-child+html ul#Navigation ul { /* Workaround fuer den IE 7 */ background-color:#C5C5C5; 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: 6.4em; /* Breite den in li enthaltenen Elementen zuweisen */ padding: 0.2em 1em; text-decoration: none; font-weight: bold; border: 1px solid black; border-left-color: white; border-top-color: white; color: maroon; background-color: #ccc; } * 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: white; border-left-color: black; border-top-color: black; color: white; background-color: gray; } li a#aktuell { /* aktuelle Rubrik kennzeichnen */ color: maroon; background-color: silver; } ul#Navigation li ul span { /* aktuelle Unterseite kennzeichnen */ background-color: maroon; } a:link { text-decoration:none; font-weight:bold; color:#000000; } a:visited { text-decoration:none; font-weight:bold; color:#000000; } a:hover { text-decoration:none; font-weight:bold;} a:active { text-decoration:none; font-weight:bold;} a:focus { text-decoration:none; font-weight:bold; }
Und die Links in der Navigation:
<ul id="Navigation"> <li><a href="test.html">Office</a> <ul> <li><a href="test.html">Home</a></li> <li><a href="test.html">Konzept</a></li> <li><a href="test.html">Piloten</a></li> <li><a href="test.html">Team</a></li> <li><a href="test.html">Forum</a></li> <li><a href="test.html">Statistiken</a></li> <li><a href="test.html">Downloads</a></li> <li><a href="test.html">Hilfe</a></li> </ul> </li> <li><a href="test.html">Test1</a> <ul> <li><a href="test.html">Test2</a></li> <li><a href="test.html">Test2</a></li> </ul> </li> <li><a href="test.html">Seite 3</a></li> <li><a id="aktuell" href="test.html">Seite 4</a> <ul> <li><a href="test.html">Seite 4a</a></li> <li></li> <li><a href="test.html">Seite 4c</a></li> <li><a href="test.html">Seite 4c</a></li> <li><a href="test.html">Seite 4c</a></li> </ul> </li> <li><a href="test.html">Seite 5</a></li> </ul> -
Ich hab zwar nicht alles so genau gelesen, aber da tauchte first-child auf, was IE nun mal nicht interpretiert.
Ne schöne anleitung für dropdownmenüs findet ihr auf alistapart.com
Tipp: wenn ihr den hover-status von anderen elementen als links auch für ie nutzen wollt, müsst ihr nur eine behavior datei einbinden (.htc) -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
