Boardunity & Video Forum

Boardunity & Video Forum (https://boardunity.de/)
-   Programmierung und Datenbanken (https://boardunity.de/programmierung-datenbanken-f23.html)
-   -   XHTML 1.0 Strict + CSS = IE will nicht (https://boardunity.de/xhtml-1-0-strict-css-ie-will-t2179.html)

Patrick Gotthardt 23.07.2004 12:51
XHTML 1.0 Strict + CSS = IE will nicht
 
Hi.
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">&copy; <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&amp;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;
 }
Sollte jemand wissen, wie ich auch den IE zwingen kann die Seite richtig anzuzeigen: Bitte melde dich! ;)
(Meinungen zum allgemeinen Design sind ebenfalls erwünscht. ;) )

utopia 23.07.2004 22:49
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">&copy; <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&amp;id=1" onclick="window.open(this.href, 'Window'); return false;">Impressum</a></div>
  </div>
  </body>
 </html>

Eduard Zintz 24.07.2004 01:57
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 :)

Jan Stöver 24.07.2004 02:40
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.

Patrick Gotthardt 24.07.2004 08:44
@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.

utopia 24.07.2004 09:46
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

Patrick Gotthardt 24.07.2004 10:04
> != , ;)

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;
 }
Problem ist, dass ich das nicht anders definieren kann.
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...

Eduard Zintz 24.07.2004 11:54
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.

utopia 24.07.2004 13:29
@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.


Alle Zeitangaben in WEZ +1. Es ist jetzt 06:23 Uhr.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25