Zur Boardunity Forenstartseite

Zurück   Boardunity & Video Forum » Technik » Programmierung und Datenbanken
XHTML 1.0 Strict + CSS = IE will nicht

XHTML 1.0 Strict + CSS = IE will nicht

Antwort
 
LinkBack Themen-Optionen Thema bewerten
  #1  
Alt 23.07.2004, 13:51
Mitglied
  
Registriert seit: 10.2003
Ort: Bottrop
Beiträge: 779

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. )
__________________
 Patrick Gotthardt
Patrick Gotthardt on Software
  #2  
Alt 23.07.2004, 23:49
Mitglied
  
Registriert seit: 01.2004
Beiträge: 173
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>

  #3  
Alt 24.07.2004, 02:57
Aktiv (oder so?)
  
Registriert seit: 04.2004
Beiträge: 96
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  
Alt 24.07.2004, 03:40
Benutzerbild von Jan Stöver
Boardunity Team
  
Registriert seit: 12.2003
Ort: Lübeck
Beiträge: 2.326
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  
Alt 24.07.2004, 09:44
Mitglied
  
Registriert seit: 10.2003
Ort: Bottrop
Beiträge: 779
@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  
Alt 24.07.2004, 10:46
Mitglied
  
Registriert seit: 01.2004
Beiträge: 173
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  
Alt 24.07.2004, 11:04
Mitglied
  
Registriert seit: 10.2003
Ort: Bottrop
Beiträge: 779
> != ,

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...

__________________
 Patrick Gotthardt
Patrick Gotthardt on Software
  #8  
Alt 24.07.2004, 12:54
Aktiv (oder so?)
  
Registriert seit: 04.2004
Beiträge: 96
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  
Alt 24.07.2004, 14:29
Mitglied
  
Registriert seit: 01.2004
Beiträge: 173
@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.

Antwort


Stichworte bearbeiten
Stichworte
-

« Admin und User-Trennung? | Ist PHP5 langsamer als PHP4 »
Themen-Optionen
Thema bewerten
Thema bewerten:

Forumregeln
Es ist dir nicht erlaubt, neue Themen zu verfassen.
Es ist dir nicht erlaubt, auf Beiträge zu antworten.
Es ist dir nicht erlaubt, Anhänge hochzuladen.
Es ist dir nicht erlaubt, deine Beiträge zu bearbeiten.
Gehe zu

Ä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

Archiv - Nach oben





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