|
|||
Darstellungsunterschiede IE6 /IE7 /FF3
Guten Tag zusammen,
ich habe unter Kosmetik am Grillo *·* Mikrodermabrasion, Kosmetik, Massagen und Wellnessanwendungen in Essen eine Landingpage erstellt, die unter dem FF3 und dem IE7 so aussieht (abgesehen von -moz-border-radius-Angaben) wie ich sie haben will. Im IE6 verschwinden die Texte vollständig, es bleiben nur die Fußzeile und der Header (CSS-ID mit hinterlegtem Hintergrundbild) sowie das dort eingebundene Menu vor silver-Hintergrund übrig. Entwickelt wurde unter FF3 (reines HTML Schreiben, kein WYSIWIG-Editor, CSS mit TopStyleLite erstellt). Ich habe bisher kein Erfahrung mit der Erstellung einer Browserweiche, daher benötige ich etwas Hilfestellung. Ich weiß noch nicht einmal ob "Floaten" das richtige Stichwort ist, daher sind mir die dort genannten Links auch keine Hilfe. Multiple IE ist vorhanden Mein Bitte: Könnte sich bitte jemand den HTML-Quelltext (validiert!) und die CSS-Datei ansehen und mir die Hand führen? Ich danke euch Grob-Struktur der HMTL-Seite (Text 'rausgekillt) HTML-Code:
<?xml version="1.0" encoding="us-ascii"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de"> <head> <link rel="stylesheet" type="text/css" href="css/csslpmain.css" /> <meta http-equiv="Content-Type" content="text/html; charset=us-ascii" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta name="Author" content="LittleNemo" /> <meta name="revisit-after" content="10 days" /> <meta name="robot" content="Index,Follow" /> <meta name="description" content="Kurzbeschreibung" /> <meta name="page-topic" content="Diverse Page Topics" /> <meta name="keywords" content="Diverse Stichworte/> <title>Titleangaben</title> </head> <body> <div style="margin: 0px auto; width: 800px; text-align: left;"> <div id="header"><!-- mit Bildhintergrund => CSS --> <div id="menu"><!-- Menu im Header => CSS --> Diverse Menu-Links </div> </div> <div id="content"><!-- Weisser Hintergrund --> <div class="left"><!-- Linke Spalte => CSS --> <h2>Was ist Mikroabrasion?</h2> Text Bild mit style="float:right;" <ul>Listeneinträge</ul> <h2>Überschrift</h2> Text </div> <div class="right"><!-- Rechte Spalte => CSS --> <h2>Überschrift</h2> Text und Bild mit style="float:left;padding:5px;" Bild Link mit style="float:right;" <h2>Überschrift</h2> Text mit Bild-Link </div> </div> <div id="footer"><!-- Seitenfuss => CSS -->Adressangabe </div> </div> </body> </html> Der CSS-Code ist hier: Code:
body{ font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: 12px; background-color: Silver; /*#fced9a;*/ text-align: left; /*Scrollbaranzeige nur IE*/ scrollbar-arrow-color: #ab2641; scrollbar-face-color: #fced9a; scrollbar-3dlight-color: #ab2641; scrollbar-base-color: #fced9a; scrollbar-track-color: #fced9a; } h2 {font-size:14px; color:#ab2641; } p {margin-top:0px;} a:link, a:visited, a:active, a:hover { text-decoration:none; font-weight:bold; color:#ff9200; } a:active, a:hover { color:#ffffff; } a.menu:link, a.menu:visited, a.menu:hover { color:#ab2641; display: inline; margin-top: 2px; text-align: center; width: 100px; padding: 5px; font-size:10px; } a.menu:active, a.menu:hover { color:#eeeeee; display: inline; margin-top: 2px; text-align: center; width: 100px; padding: 5px; background-color: #ab2641; font-size:10px; } /* Die Titelzeile */ #title { padding-top:15px; height:24px; color: #214778; } /* Das Menü */ #menu { color: #ab2641; text-align: right; padding: 0px 0px; } /* Der Inhalt */ #content { position: absolute; top: 200px; width: 800px; margin: 0px auto; background-color: white;/*#fced9a; padding: 5px;*/ color: #214778; text-align: left; overflow: auto; bottom: 0px; z-index:0; /*Eckenradius in Pixel, nicht IE*/ -moz-border-radius-topright:10px; -moz-border-radius-topleft:10px; -khtml-border-radius-topright:10px; -khtml-border-radius-topleft:10px; } small{ width: 760px; font-size: xx-small; text-align: center } #footer{ position: absolute; bottom: 0; width: 800px; height: 15px; /* overflow: auto;*/ text-align: left; background: #ab2641; color: #eeeeee; } #header{ position: absolute; top: 0px; width: 800px; height: 200px; /* overflow: auto;*/ text-align: left; background-color: white; background-image: url(../img/aesthetik5.png); background-repeat: no-repeat; background-position: bottom; } .arrow{ padding-left: 40px; } .left{ position: absolute; top: 0px; padding: 5px; width: 450px; /*overflow: auto;*/ /*border: solid; border-color: red;*/ } .right{ position: absolute; top: 5px; margin-left: 465px; padding: 0px; width: 335px; z-index: 5; /*border: solid; border-color: Aqua;*/ } #star24{ position: absolute; top: 250px; margin-left: 5px; padding: 5px; width: 220px; z-index: 99; /* border: solid; border-color: Aqua;*/ } |
Sponsored Links |
|
|||
Schon mal versucht, den Containern in #content eine Höhe zu geben?
__________________
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 |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
IE6 Problem - Menü zumindest bedienbar machen | Ares | CSS | 1 | 11.02.2011 13:33 |
IE6 "cleart" Spalte ohne ersichtlichen Grund | ppatrick | CSS | 5 | 05.04.2010 15:50 |
IE6 ignoriert CSS-Anweisungen | Hallenkicker | CSS | 11 | 27.07.2008 21:58 |
Text-Zeichen im IE6 wiederholen sich – Problem... | rg69 | (X)HTML | 2 | 05.06.2008 15:36 |
Dropdown-menü ie6 Darstellungsprobleme | Koody | CSS | 6 | 29.08.2007 15:15 |