|
|||
"FF vs IE" - fast alles ist anders...
Hi,
Folgene Webseite: http://tokuul.to.funpic.de/ Der Mozilla (FF) zeigt alles richtig an, der Internet Explorer macht irgendein Schindluder: Die Tabellen werden einfach falsch angezeigt und ich benötige noch Hilfe bei der Veränderung des Menus. Wie erziehe ich den IE richtig - Was muss man ändern? Ich bin verzweifelt! Sry, wenn der Code so lang ist, aber das wesentlich sind jetzt nur die Tabellen und das Menu (Habe den Teil so verkleinert, dass es weniger ist): /* Die Div-Container (funktionieren im IE & FF!): */ body { background : #660000; font-size : 12px; font-family : Tahoma, Helvetica; color : #000000; text-align : center; } #main { width: 976px; height: 880px; padding: 5px; margin: auto auto; background: #8b4513; border: 1px solid #fffac4; text-align: left; z-index: 0; } #pfad, #time { margin: auto auto; background: #fffac4; border: 1px solid #000000; width: 948px; height: 17px; padding: 1px 3px 1px; z-index: 1; } #pfad { margin-top: 10px; text-align: left; margin-top: 125px; } #time { text-align: right; } #arrow1, #arrow2, #arrow3, #arrow4, #arrow5, #content { float: left; margin: auto auto; background: #ffcc66; z-index: 1; text-align: left; } #arrow1 { width: 15px; height: 14px; padding: 3px; margin-top: 15px; border: 1px solid #000000; } #arrow2 { width: 15px; height: 15px; padding: 2px 3px 2px 3px; margin-top: 101px; border: 1px solid #000000; border-top: 2px solid #000000; } #arrow3 { width: 15px; height: 15px; padding: 2px 3px 2px 3px; margin-top: 203px; border: 1px solid #000000; border-top: 2px solid #000000; } #arrow4 { width: 15px; height: 15px; padding: 2px 3px 2px 3px; margin-top: 257px; border: 1px solid #000000; border-top: 2px solid #000000; } #arrow5 { width: 15px; height: 15px; padding: 2px 3px 2px 3px; margin-top: 327px; border: 1px solid #000000; border-top: 2px solid #000000; } #content { margin-top: 15px; background: #fffac4; border: 0 solid inherit; } #menu, #bottom, #tdmenu { float: left; background: #fffac4; z-index: 0; } #menu { padding: 0; margin-top: 15px; margin-left: 10px; margin-right: auto; border: 0 none inherit; text-align: center; } #bottom { width: 948px; height: 17px; padding: 1px; padding-left: 3px; padding-right: 3px; margin-top: 15px; margin-left: 10px; border: 1px solid #000000; text-align: right; } #tdmenu { width: 100px; text-align: left; border-color: #000000; border-style: solid; text-align: left; border-spacing: 0; border-width: 1px; border-top-width: 0; } #poll, #links, #login { width: 100px; float: right; padding: 0; margin-right: 10px; margin-top: 15px; background: #ffcc66; border: 1px solid #000000; text-align: center; z-index: 1; } #poll { height: 50px; } #links { height: 150px; } #login { height: 80px; } Code:
/* Jetzt folgen die Tabellen, die im IE vollkommen anders sind. Dadurch ändert sich auch das ganze Menu: */ #tdinfo, #tdcomm, #tddown, #tdallg { height: 22px; border-top: 2px solid #000000; border-bottom: 1px solid #000000; } #tdinfo { background: url(source/images/mnu_information.png) #ffcc66 no-repeat 50% 50%; } #tdcomm { background: url(source/images/mnu_community.png) #ffcc66 no-repeat 50% 50%; } #tddown { background: url(source/images/mnu_downloads.png) #ffcc66 no-repeat 50% 50%; } #tdallg { background: url(source/images/mnu_allgemein.png) #ffcc66 no-repeat 50% 50%; } #tdstart { background: url(source/images/mnu_startseite.png) #ffcc66 no-repeat 50% 50%; height: 22px; border-top: 1px solid #000000; border-bottom: 1px solid #000000; } .tdhead { width: 708px; height: 14px; padding-left: 5px; background: #ffcc66; border-spacing: 0; border-top: 1px solid #000000; border-left: 1px solid #000000; border-right: 1px solid #000000; } .tdnew { width: 708px; height: 100px; background: #fffac4; border-spacing: 0; border: 1px solid #000000; } .tdspace_l { width: 4px; height: 21px; border-bottom: 1px solid #000000; } .tdspace { width: 4px; height: 21px; border-width: 0px; } .tdsym1 { width: 21px; height: 21px; background: url(source/images/warning.gif) no-repeat 50% 50%; border-bottom: 1px solid #000000; } .tdsym2 { width: 21px; height: 21px; background: url(source/images/note.gif) no-repeat 50% 50%; border-bottom: 1px solid #000000; } .tdtitle { width: 679px; height: 21px; text-align: left; border-color: #000000; border-bottom: 1px solid #000000; } .tdtopic { width: 700px; height: 31px; text-align: left; border-bottom: 1px solid #000000; } .tdempty { width: 708px; height: 5px; border-width: 0px; } .tdempty_l { width: 4px; height: 17px; border-top: 1px solid #000000; } .tdcontent { text-align: left; width: 700px; text-align: left; border-width: 0px; } .tdstats { width: 700px; height: 17px; text-align: right; border-top: 1px solid #000000; } a.head { color: #000000; font-size: 15px; font-family: Tahoma, Helvetica; } a.info { color: #000000; font-size: 10px; font-family: Tahoma, Helvetica; } a.stats { color: #000000; font-size: 8.5px; font-family: Tahoma, Helvetica; } a.stats:hover { color: #000000; text-decoration: none; font-size: 8.5px; font-family: Tahoma, Helvetica; } a.info { color: #000000; font-size: 10px; font-family: Tahoma, Helvetica; } a.info:hover { text-decoration: none; color: #000000; font-size: 10px; font-family: Tahoma, Helvetica; } .error { border: 1px solid #000000; color:red; font-family:arial; } /* Das Menu, welches beim IE auch völlig falsch angezeigt wird (u.a. wegen den Tabellen) */ a.menu { display: inline; display: block; text-align: left; text-decoration: none; color: #000000; font-size: 12px; font-family: Tahoma, Helvetica; text-align: left; border: 0 solid #000000; } a.menu:hover { text-align: left; background-color: #660000; font-size: 10px; color: #fffac4; border: 1px solid #000000; } So, vielen Dank für Hilfe, gruß Tokuul!
__________________
Wissen ist Macht, nichts wissen macht auch nichts |
Sponsored Links |
|
|||
Aaargh, ist das viel:
Zunächst frage ich mich, warum der FF(!) das Logo und das Banner in einer Zeile anzeigt, obwohl ich nirgendwo ein Float dafür gefunden habe und auch keine Tabelle.... Mach doch mal ein float: right; (wegen Abfolge im HTML) rein und cleare das im nächsten container. /// getested: Mach float: left; sry Das wäre die Nummer 1. Edit: Nummer 2: Das Menü wird nicht "völlig" falsch angezeigt, es sieht genauso aus wie im FF. Allerdings springt der Content um wohl 3 Pixel wenn man hovert. (Nochmal edit: Es hat auch größere Abstände zwischen den einzelnen Punkten, o.k.) Nochmal edit: Ein Container ist vertauscht Edit: Hier kommt der Link nochmal rein, damit ich nicht so weit nach oben scrollen muss: http://server42.ctmworld.net/tes/?Startseite Edit: Probier mal aus: Anstelle margin-left bei #menu ein padding-left. /// getestet: bringt nix. Edit die x-te: Habe aus deinem a.menu:hover die width-angabe rausgemacht und die Schriftgrösse auf 10px gesetzt. Jetzt gibts wenigstens keine Ruckler mehr (bei mir) und beim Hovern verkleinert sich die Schrift wie beim FF. Jetzt muss ich aber wieder arbeiten Edit: Habe deinen margin-bug für #menu nachvollzogen. Ist ein IE-Bug, was sonst: Lösung: http://www.positioniseverything.net/...ed-margin.html (display:inline auf #menü anwenden) gilt übrigens auch für #poll und #login, weil die rechts floaten und du ein margin-right definiert hast. Also auch dort display:inline notieren!! andir
__________________
Grüsse Andreas- auch mal wieder da... Design isn't about the tools, it's about creating the best experience for the user. A design should be based on usability, accesibility, aesthetics, but never on floats, lists or background images. ( by Cameron Adams) Wiedergelesen: > hier und hier [Foren-Links] Dein Post? Klar, DAS vorher gelesen? Hilft. ## User-Landkarte |
Sponsored Links |
|
|||
Zusammenfassung:
Falscher Header (Grafiken untereinander statt nebeneinander Lösung: float: left; nachfolgend clearen Verschobene Divs #menu, #poll usw. IE-Bug: display:inline notieren bei #menu, #poll usw. Menü: Noch nicht ganz klar, was das verursacht: Vorläufige Lösung: width-Angabe aus a.menu:hover raus, Schriftgrösse auf 10px setzen, sonst reißt dir der Container aus. (Schrift ist eh winzig) grüsse andir
__________________
Grüsse Andreas- auch mal wieder da... Design isn't about the tools, it's about creating the best experience for the user. A design should be based on usability, accesibility, aesthetics, but never on floats, lists or background images. ( by Cameron Adams) Wiedergelesen: > hier und hier [Foren-Links] Dein Post? Klar, DAS vorher gelesen? Hilft. ## User-Landkarte |
|
|||
Ah, vielen Dank für dein Engargement! Ich änder den kram mal und sage nochma bescheid. Gleich mehr...
Also.... : Zitat:
Zitat:
Zitat:
Eigentlich möchte ich garnicht, dass die Schriftart kleiner wird, nur wenn ich die gleich groß lasse, dann wird das menu länger (nach unten), weil halt wegen diesem Rand zu viele Pixel da sind. Desweiteren stört mich auch dieser "Ein-Pixel-Space" um den schwarzen Rand. Am liebsten hätte ich es so, dass - wenn man mit der Maus drüberfährt - nur ein Rand oben und unten angezeigt wird und kein Ein-Pixel-Platz zwischen diesem Link und dem Rand der Tabelle. Man würde als Betrachter also garnicht merken, dass - wenn die Maus über dem Link ist - rechts und links garkein Rand ist, da die braune "box" ja direkt an dem Rand der Tabelle liegt. Ich glaube es ist klar geworde, wie es ein soll - hoffe es zumindest. Vielleicht sollten wir das erst mal hinbekommen - ich schaffe es nicht. PS: oh, man kommt da oft "Rand" vor....^^
__________________
Wissen ist Macht, nichts wissen macht auch nichts |
|
|||
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de"> <head> <title>The Elder Scrolls IV: Oblivion - Startseite</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <meta name="DC.Title" content="TES IV: Oblivion"> <meta name="DC.Creator" content="Jan Vogler"> <meta name="DC.Subject" content="Informationen rund um The Elder Scrolls IV: Oblivion"> <meta name="DC.Description" content="The Elder Scrolls IV: Oblivion ist eine Website zum vierten Teil der Elder Scrolls Reihe, deren bekanntester Ableger bisher Morrowind gewesen ist. Auf unserer Website finden Sie nicht nur eine Beschreibung des Spiels, sondern auch Screenshots, Wallpaper und weitere Medien, die direkt mit Oblivion zusammenhängen."> <meta name="DC.Publisher" content="project CTMWorld.NET"> <meta name="DC.Contributor" content=""> <meta name="DC.Format" content="text/html"> <meta name="DC.Identifier" content="http://tes.ctmworld.net/"> <meta name="DC.Language" content="de"> <meta name="DC.Rights" content="Alle Rechte liegen beim Autor"> <meta name="description" content="The Elder Scrolls IV: Oblivion ist eine Website zum vierten Teil der Elder Scrolls Reihe, deren bekanntester Ableger bisher Morrowind gewesen ist. Auf unserer Website finden Sie nicht nur eine Beschreibung des Spiels, sondern auch Screenshots, Wallpaper und weitere Medien, die direkt mit Oblivion zusammenhängen." /> <meta name="keywords" content="Elder, Scrolls, IV, Oblivion, Morrowind, Daggerfall, Arena, Battlespire, Redguard, Vier, 4, Screenshots, Forum, Foren, Wallpaper, Videos, Trailer, News, Tamriel, Cyrodiil, Reich, Vergessens, Preview, Review, Test, Chat" /> <link rel="stylesheet" href="styles.css" type="text/css" title="Forumdesign" /> </head> <body> <div id="main">[img]source/images/hp_logo.jpg[/img]</img>[img]source/images/hp_banner.jpg[/img]</img> <div style="clear:left;" id="pfad">The Elder Scrolls»Startseite</div> <div id="time"><a class="info">Internetzeit: 673</a></div> <div style="display:inline;" id="menu"> <table id="tdmenu"> <tr> <td id="tdstart"></td> </tr> <tr> <td>»News</td> </tr> <tr> <td>»News Archiv</td> </tr> <tr> <td>»News Posten</td> </tr> <tr> <td id="tdinfo"></td> </tr> <tr> <td>»FAQ</td> </tr> <tr> <td>»Beschreibung</td> </tr> <tr> <td>»Geschichte</td> </tr> <tr> <td>»Screenshots</td> </tr> <tr> <td>»Concept Art</td> </tr> <tr> <td id="tdcomm"></td> </tr> <tr> <td>»Forum</td> </tr> <tr> <td>»Chat</td> </tr> <tr> <td id="tddown"></td> </tr> <tr> <td>»Mods</td> </tr> <tr> <td>»Patches</td> </tr> <tr> <td>»Media</td> </tr> <tr> <td id="tdallg"></td> </tr> <tr> <td>»Links</td> </tr> <tr> <td>»Link Us</td> </tr> <tr> <td>»Kontakt</td> </tr> <tr> <td>»Impressum</td> </tr> </table> </div> <div id="arrow1">[img]source/images/folder.gif[/img]</img></div> <div id="content"> <table class="tdhead"> <tr> <td><a class="head">Startseite</a></td> </tr> </table> <table class="tdnew"> <tr> <td colspan="4" class="tdempty"></td> </tr> <tr> <td></td> <td colspan="2" class="tdcontent"> Willkommen auf der wohl ersten deutschen Webseite vom Morrowind Nachfolger: The Elder Scrolls IV: Oblivion.</p> Unsere Webseite ist von der Community von Morrowind für bestehende und zukünftig anwachsende Community von TES IV: Oblivion. Darum ist es uns wichtig, dass die Communtiy wächst. Wenn du noch nicht Teil unserer Communtiy bist, so melde dich im Forum an und schreibe mit. Oder chatte einfach mit uns und tausche dich über Oblivion aus. Natürlich reden wir im Forum auch über andere Sachen, wie dem Vorgänger Oblivions und anderes.</p> Wer überhaupt keine Ahnung hat, was denn The Elder Scrolls IV: Oblivion ist, sollte sich unsere Beschreibung anschauen. Falls du eher bunte Bilder bevorzugst - wir haben sie! In unserer wachsenden Screenshotsgalerie findest du bisher veröffentliche Bilder - auch wenns am Anfang recht wenige sind. Aber wohl sehr eindrucksvolle. Die Grafikpracht ist gigantisch. Zusätzlich zu den Screenshots zeigen wir auch "Concept Arts". Das sind Zeichnungen, auf denen dargestellt wird, was es geben soll. Diese sind von Städten, Personen, Monstern und Landschaften.</p> Jene, die mehr über den Hintergrund Oblivions erfahren wollen, sollten sich die Geschichte anschauen und lesen. Tatsächlich hat Oblivion recht wenig mit Morrowind oder dessen Vorgängern. Sollten trotz dieser Informationen noch Fragen offen bleiben, lies unsere Host Europe – Ihr Webhosting Provider: Domains, E-Mail, WebPack, Virtual Private Server (VPS), (Managed) Server Hosting, E-Shops, VoIP Telefonie und DSL Flatrate – World Class Internet Hosting & Services - oder frag im Forum.</p> Sobald Oblivion veröffentlicht wird, gibt es Mods und Patches. Vorerst allerdings "nur" Multimedia - Musikfiles usw. - sofern veröffentlicht!</p> Sollte es noch weitere sehenswerte Webseiten zum Thema Oblivion geben, so stehen sie auf unserer Linkliste. Wenn du willst kannst du uns verlinken - wir sind sehenswert. Solltest du Anregungen haben oder sonstiges, was die Webseite betrifft und nicht im Forum gefragt werden kann oder fragen willst, so sende uns eine eMail. Diese steht auf der Kontaktseite.</p> Rechtliche Informationen stehen im Impressum.</p> Bitte beachte, dass unsere Webseite noch im Aufbau ist. Viele Bereiche stehen daher nicht zur Verfügung. Danke für deine Rücksicht und Viel Spaß!</p> </td> <td></td> </tr> </table></div> <div style="display: inline;" id="poll"> Hier folgt bald eine Umfrage.</p> </div> <div id="login"> <form method="post" action="http://tes.ctmworld.net/forum/login.php"> <input type="hidden" name="send" value="send"> Acc: <input type="text" name="l_username" maxlength="50" size="5" class="input" tabindex="1"> PW: <input type="password" name="l_password" maxlength="30" size="5" class="input" tabindex="2"> <input type="submit" value="Anmelden" class="input" tabindex="3"> </form> </p> </div> </div> </body></html> Bei mir hats funktioniert andir
__________________
Grüsse Andreas- auch mal wieder da... Design isn't about the tools, it's about creating the best experience for the user. A design should be based on usability, accesibility, aesthetics, but never on floats, lists or background images. ( by Cameron Adams) Wiedergelesen: > hier und hier [Foren-Links] Dein Post? Klar, DAS vorher gelesen? Hilft. ## User-Landkarte Geändert von hemfrie (26.02.2007 um 12:28 Uhr) Grund: Namen ausgetragen |
|
|||
Also, ich habe genau diesen Code eingefügt und im IE sieht es bei mir so aus:
http://www.loh-wow.de/images/picture...1099067300.jpg Der Firefox zeigt es wie gewünscht an: http://www.loh-wow.de/images/picture...1099067383.jpg Zu dem Menu später - das wird ja eh noch umgesaltet - aber die Boxen sind bei mir auch nicht am rechten Ort & der Text ist zusammengeengt...
__________________
Wissen ist Macht, nichts wissen macht auch nichts |
|
|||
Aha?
Schon mal ein Fortschritt, oder? Wie wärs mit einem Dankeschön? (Ich kann Dir aber auch eine Rechnung schicken ) Jetzt denk mal selber nach: Dein #login wird das display:inline auch noch brauchen Gestalte mal das Menü um wie vorgeschlagen. andir
__________________
Grüsse Andreas- auch mal wieder da... Design isn't about the tools, it's about creating the best experience for the user. A design should be based on usability, accesibility, aesthetics, but never on floats, lists or background images. ( by Cameron Adams) Wiedergelesen: > hier und hier [Foren-Links] Dein Post? Klar, DAS vorher gelesen? Hilft. ## User-Landkarte |
|
|||
Zitat:
Zitat:
PS:Ich arbeite nochmal an einer Code-Vereinfachung und editiere danach nochmal den ersten Post mit den bisherigen Fortschritten. Hab nämlich durch deinen Artikel ( http://www.positioniseverything.net/...ed-margin.html ) enddeckt, dass man margin-left und so garnicht extra schreiben braucht
__________________
Wissen ist Macht, nichts wissen macht auch nichts |
|
|||
Bitte gern geschehen
ich gehe jetzt erst mit ein paar Kumpels in eine nette kleine Beiz. (Kneipe) Schau morgen nochmal rein, habe da auch noch ein hartnäckiges Problem mit einem Background in einem meiner layouts, das ich mir erstmal nicht erklären kann... andir
__________________
Grüsse Andreas- auch mal wieder da... Design isn't about the tools, it's about creating the best experience for the user. A design should be based on usability, accesibility, aesthetics, but never on floats, lists or background images. ( by Cameron Adams) Wiedergelesen: > hier und hier [Foren-Links] Dein Post? Klar, DAS vorher gelesen? Hilft. ## User-Landkarte |
Sponsored Links |
|
|||
So, habe jetzt alles geändert (im ersten Post ist jetzt auch der neue Code):
http://tokuul.to.funpic.de/ Den Quellcode könnt ihr euch einfach anschauen. Ich habe jetzt noch zwei Probleme: 1. Die Tabellen und das Menu stimmen beim IE überhaupt nicht - die sind einfach zu weit auseinander, obwohl ich pixel Angaben angegeben habe. Vielleicht kann mir auch nochmal jemand bei Folgendem helfen: Zitat:
Zitat:
Schonma danke!^^
__________________
Wissen ist Macht, nichts wissen macht auch nichts |
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|