#1
| |||
| |||
XHTML 1.0 Strict + CSS = IE will nichtHi. Ich versuche zZt. mal eine Webseite zu entwerfen. Mir persönlich gefällt sie auch schon (99% der andere wohl nicht...), aber egal. Es soll sich dabei um eine Produktpage für meinen Editor SimpleEdit handeln. Nun habe ich mich entschieden, die Seite in XHTML 1.0 strict sowie CSS zu entwerfen. Firefox / Mozilla / Opera haben mit meiner Seite keine Probleme und stellen sie korrekt dar. Die W3C-Validatoren (XHTML, CSS) sagen mir "valide". Nur der IE will nicht nett sein. Jetzt bin ich gerade am Zweifeln, wie ich euch am besten das Problem zeigen kann. Screenshot wird nicht viel bringen, deswegen poste ich hier einfach mal den Quellcode rein. HTML-Code: Code: <?xml version="1.0" encoding="iso-8859-1"?> <!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"> <head> <title>SimpleEdit - www.dragon-scripts.de</title> <link rel="stylesheet" href="./style.css" /> </head> <body> <div class="main"> <div class="menu"> <h2>Menu 1</h2> <ul> <li>Item 1</li> <li>Item 2</li> </ul> <h2>Menu 2</h2> <ul> <li>Item 1</li> <li>Item 2</li> </ul> </div> <div class="content"> <h1>Über SimpleEdit</h1> <p>SimpleEdit ist ein kleiner und ausgesprochen schneller Editor,<br /> der vollständig in Java entwickelt wurde.[...]</p> <h1>News</h1> <h2>Version 1.0 Alpha 2 released!</h2> <p>Die aktuellste Version ist die Version 1.0 Alpha 2[...]</p> </div> <div id="footer">© <a href="http://www.dragon-scripts.de" onclick="window.open(this.href, 'Window'); return false;">Dragon-Scripts.de</a> | <a href="http://www.dragon-scripts.de/index.php?page=fix&id=1" onclick="window.open(this.href, 'Window'); return false;">Impressum</a></div> </div> </body> </html> CSS-Code: Code: /* commented backslash hack \*/ html, body{ height: 100%; } /* end hack */ html, body { margin: 0; padding: 0; } body { background-color: #CCCCCC/*#EDEDED*/; margin-top: 10px; margin-left: 10px; margin-right: 10px; color: #000058/*117189|147B95*/; font-family: Verdana; } .menu { float: left; border-top: 1px solid #000000; border-left: 1px solid #000000; border-right: 1px solid #000000; width: 150px; } .content { text-align: left; margin-left: 200px; padding: 0px 10px 0px 0px; font-size: 0.8em; } .content > h1 + p { padding-left: 15px; } .content > h2 + p { padding-left: 30px; } .content > h1 { border: 1px solid #000000/*999999*/; margin: 0px; padding: 5px; background-color: #F9B30B/*E6A711|CCCC00*/; color: #650E18/*634200*/; font-size: 1.1em; } .content > h2 { border: 1px solid #000000; margin: 0px; margin-left: 15px; margin-top: 20px; padding: 5px; background-color: #0066CC; color: #FFFFFF; font-size: 0.8em; } .menu > ul { list-style-type: none; margin: 0px; padding: 0px; } .menu > ul > li { /*padding: 0px 0px 0px 5px;*/ padding: 5px; border-bottom: 1px solid #000000; background-color: #EDEDED; font-size: 0.8em; } .menu > ul > li:hover { color: #3562A1; background-color: #FFFFFF; font-weight: bold; } .menu > h2 { margin: 0px; padding: 0px 0px 0px 5px; border-bottom: 1px solid #000000; background-color: #0066CC; font-size: 1.1em; color: #FFFFFF; } #footer { font-size: 0.6em; margin-top: 50px; } .main { background-color: #E6E6E7/*#CCCCCC*/; background-image: url('./logo.jpg'); background-repeat: no-repeat; background-position: 20px 10px; height: 70%; min-height: 70%; padding: 120px 10px 10px 10px; border: 1px dotted #000000; width: 760px; margin-left: auto; margin-right: auto; } a:link, a:visited { color: #000054; } a:hover { color: #3562A1; } (Meinungen zum allgemeinen Design sind ebenfalls erwünscht. ) __________________ Patrick Gotthardt Patrick Gotthardt on Software |
#2
| |||
| |||
auf die Schnelle... Korrektur nur am CSS-Code. Bemerkungen: Hover gibt es beim IE leider nur für die a-Tags. Da musst Du mit alternativ mit onmouseover arbeiten. Gruppierte CSS-Anweisungen sind meineswissens per Komma zu trennen, die Variante mit den > kenn ich garnicht. Ansonsten netter, einfacher (im positiven Sinne) Style. Code: <?xml version="1.0" encoding="iso-8859-1"?> <!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"> <head> <title>SimpleEdit - www.dragon-scripts.de</title> <style> <!-- /* commented backslash hack \*/ html, body { height: 100%; } /* end hack */ html, body { margin: 0; padding: 0; } body { background-color: #CCCCCC/*#EDEDED*/; margin-top: 10px; margin-left: 10px; margin-right: 10px; color: #000058/*117189|147B95*/; font-family: Verdana; } .menu { float: left; border-top: 1px solid #000000; border-left: 1px solid #000000; border-right: 1px solid #000000; width: 150px; } .content { text-align: left; margin-left: 200px; padding: 0px 10px 0px 0px; font-size: 0.8em; } .content p { padding-left: 15px; } .content h1 { border: 1px solid #000000/*999999*/; margin: 0px; padding: 5px 5px 5px 5px; background-color: #F9B30B/*E6A711|CCCC00*/; color: #650E18/*634200*/; font-size: 1.1em; } .content h2 { padding: 5px 5px 5px 5px; border: 1px solid #000000; margin: 0px; margin-left: 15px; margin-top: 20px; padding: 5px; background-color: #0066CC; color: #FFFFFF; font-size: 0.8em; } .menu ul { list-style-type: none; margin: 0px; padding: 0px; } .menu li { /*padding: 0px 0px 0px 5px;*/ padding: 5px; border-bottom: 1px solid #000000; background-color: #EDEDED; font-size: 0.8em; } .menu li:hover { color: #3562A1; background-color: #FFFFFF; font-weight: bold; } .menu h2 { margin: 0px; padding: 0px 0px 0px 5px; border-bottom: 1px solid #000000; background-color: #0066CC; font-size: 1.1em; color: #FFFFFF; } #footer { font-size: 0.6em; margin-top: 50px; } .main { background-color: #E6E6E7/*#CCCCCC*/; background-image: url('./logo.jpg'); background-repeat: no-repeat; background-position: 20px 10px; height: 70%; min-height: 70%; padding: 120px 10px 10px 10px; border: 1px dotted #000000; width: 760px; margin-left: auto; margin-right: auto; } a:link, a:visited { color: #000054; } a:hover { color: #3562A1; } --> </style> </head> <body> <div class="main"> <div class="menu"> <h2>Menu 1</h2> <ul> <li>Item 1</li> <li>Item 2</li> </ul> <h2>Menu 2</h2> <ul> <li>Item 1</li> <li>Item 2</li> </ul> </div> <div class="content"> <h1>Über SimpleEdit</h1> <p>SimpleEdit ist ein kleiner und ausgesprochen schneller Editor,<br /> der vollständig in Java entwickelt wurde.[...]</p> <h1>News</h1> <h2>Version 1.0 Alpha 2 released!</h2> <p>Die aktuellste Version ist die Version 1.0 Alpha 2[...]</p> </div> <div id="footer">© <a href="http://www.dragon-scripts.de" onclick="window.open(this.href, 'Window'); return false;">Dragon-Scripts.de</a> | <a href="http://www.dragon-scripts.de/index.php?page=fix&id=1" onclick="window.open(this.href, 'Window'); return false;">Impressum</a></div> </div> </body> </html> |
#3
| |||
| |||
Mein Tipp allgemein zu XHTML etc. HTML Tidy benutzen. Dieses kleine aber mächtige Programm wirkt wunder Am besten mit HTML Studio herunterladen, denn dort hat man eine "benutzerfreundliche" Konfiguration |
#4
| ||||
| ||||
Editoren und automatische Umwandlungen sind immer so eine Sache ... ich habe einiges ausprobiert und bin noch nie drum herum gekommen, Hand anzulegen, um wirklich strict xhtml zu bekommen. Aber das ist auch irgendwo verständlich und von einem Klick&Go Editor kann man eben keine Wunder erwarten. |
#5
| |||
| |||
@utopia: Meine Vermutung geht dahin, dass der IE dieses ">" ebenfalls nicht kennt. .content > h1 Meint also in etwa "alle h1 die eine Ebene unter .content sind". Das Javascript werde ich dann noch hinzufügen, wobei mir die CSS-Variante besser gefällt... Danke für's Lob. @kiX: Die Seite ist bereits XHTML 1.0 Strict und CSS 2.0 valide. Zumindest laut den gängigen Validatoren. Die unschönen Einrückungen hab ich Weaverslave zu verdanken... ich frag mich echt, warum ich mich davon nicht trennen kann (wo ich doch nen eigenen programmiert habe...) Da frag ich mich glatt, ob ich meinen wunderschönen CSS- / XHTML-Kram nur wegen dem IE verunstalten soll... Opera zeigt die Seite korrekt an, Gecko auch. Warum da noch auf den IE rücksichtnehmen... selber Schuld wenn der kein CSS2 kann... :-/ Danke euch (dir). Wenn jemand noch ne andere Lösung weiß, ausser der, dass es daran liegt, dass der IE kein CSS2 kennt -> Danke. Edit: Ich hab grad nochmal bei Sitepoint gefragt... vielleicht wissen die ja was. __________________ Patrick Gotthardt Patrick Gotthardt on Software |
#6
| |||
| |||
Bis auf das hover in a-fremden Tags funzt der obige Code ja. Ob man nun deshalb zwanghaft an CSS2 halten muss, bleibt fragwürdig. Dass die > die gleiche Funktion haben wie ein Komma, dachte ich mir bereits. Ich kannte es bisher nur nicht. Das hier halte ich für sinnvoll: .content > h1 > h2 ist wesentlich kürzer als .content h1, .content h2 Aber .content > h1 würde ich als .content h1 notieren. cu |
#7
| |||
| |||
> != , Na ja... seltsamerweise klappt das so sogar. Jetzt müsstest du mir nur noch sagen, wie ich um das "+" herum komme. Dann versteht auch der dumme, blöde, IE was ich meine. Es geht also nur noch um diesen Teil: Code: .content h1 + p { padding-left: 15px; } .content h2 + p { padding-left: 30px; } Wenn das p nach einem h2 kommt soll das ganze halt anders eingerückt werden als nach einem h1. Obwohl ich das wohl verschmerzen könnte... __________________ Patrick Gotthardt Patrick Gotthardt on Software |
#8
| |||
| |||
Nun ja, ich komme meistens auch nicht drum herum mal nicht selber den Code durchgehen zu müssen. Komischerweise ist der Quelltext im FireFox (Mozilla) und Netscape eindwandfrei, aber im IE eben nicht. Das sieht das meistens alles so komisch aus und deswegen heisst es: Selber Hand anlegen, denn die meisten benutzen ja doch den Internet Explorer. |
#9
| |||
| |||
@TDM, arbeite doch einfach (umständlicher) mit 2 Classes: Variante 1: .content_pad1 { padding: 15px; } .content_pad2 { padding: 30px; --> <h1 class="content_pad1">Blub</h1><p class="content_pad1">blub</p> Variante 2: --> <div class="content_pad2"><h2>...</h2><p>...</p></div> Glaub mir, auch ich mag es, Code zu sparen. Aber was soll man machen. |
Stichworte |
- |
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Powerpoint? Nimm xHTML, CSS und deinen Browser! | MrNase | Programmierung und Datenbanken | 13 | 24.09.2005 11:38 |
XHTML 1.1 und Links | Jan Stöver | Programmierung und Datenbanken | 24 | 24.03.2005 17:38 |
Schmutziges WYSIWYG-HTML umwandeln in XHTML? | Fabchan | Programmierung und Datenbanken | 19 | 14.09.2004 20:55 |
xhtml und cssforum | hemfrie | Projektvorstellung und Bewertung | 6 | 02.04.2004 12:38 |