• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Darstellungsprobleme mit IE8

D

djleitno

Neues Mitglied
Guten Tag

Also ich bin noch Anfänger und muss mit HTML5 eine Website machen und jetzt habe ich ein Problem mit dem IE8.
ältere Browser kennen die HTML5 Elemente ja nicht und da gibt’s ja die Lösung mit js

Code: 
document.createElement("header");
 document.createElement("nav");
 document.createElement("aside");
 document.createElement("section");
 document.createElement("article");
 document.createElement("footer");

nun das hab ich gemacht und die Elemente sollten jetzt ja wie ein <div> dargestellt werden oder??
Jetzt weiß ich aber nicht ob mein Problem an HTML5 liegt oder an CSS weil ich die aside mit float:left; nach links schiebe und die section geht dann ja automatisch nach rechts daneben aber das wird so nicht im IE8 dargestellt.
Hier könnt ihr es mal ansehen: Website

Mein Quelcode sieht wie folgt aus:

HTML: 
<!DOCTYPE html>
 <html>

 <head>
     <title>Seiten Titel</title>

     <meta charset="UTF-8">
     <meta name="description" content="">
     <meta name="author" content="">
     <meta name="keywords" content="">

     <link href="styles/style.css" type="text/css" rel="stylesheet">
     <link href="favicon.ico" type="image/x-icon" rel="shortcut icon">
     <script>
         document.createElement("header");
         document.createElement("nav");
         document.createElement("aside");
         document.createElement("section");
         document.createElement("article");
         document.createElement("footer");    
     </script>
 </head>

 <body>
     <div id="site">
         <div id="ddm">
             <div class="linkss"><a href="#" class="ddm">Hermann Leitner</a></div>
             <div class="linkss"><a href="#" class="ddm">Gabi Winck</a></div>
         </div>
         <header>
             <img id="banner" src="http://www.html.de/images/banner.jpg" alt="banner" /><!-- Banner oben -->
         </header>
         <nav><!-- navigationsleiste.-->
                     <a class="ghb" href="#"><img id="news" height="40" class="link" src="http://www.html.de/images/news.png" alt="News" OnMouseOver="document.news.src='images/newsl.png';" OnMouseOut="document.news.src='images/news.png'" /></a>
                     <a href="#"><img id="ueber" height="40" class="link" src="http://www.html.de/images/ueber.png" alt="&Uuml;ber" OnMouseOver="document.ueber.src='images/ueberl.png';" OnMouseOut="document.ueber.src='images/ueber.png'"/></a>
                     <a href="#"><img id="bilder" height="40" class="link" src="http://www.html.de/images/bilder.png" alt="Bilder" OnMouseOver="document.bilder.src='images/bilderl.png';" OnMouseOut="document.bilder.src='images/bilder.png'"/></a>
                     <a href="#"><img id="videos" height="40" class="link" src="http://www.html.de/images/videos.png" alt="Videos" OnMouseOver="document.videos.src='images/videosl.png';" OnMouseOut="document.videos.src='images/videos.png'"/></a>
                     <a href="#"><img id="blog" height="40" class="link" src="http://www.html.de/images/blog.png" alt="Blog" OnMouseOver="document.blog.src='images/blogl.png';" OnMouseOut="document.blog.src='images/blog.png'"/></a>
             </nav> <!-- Ende Navbiationsleiste -->
         <aside id="aleft">
             <div class="asidec">
                 aleft
             </div>
         </aside>
         
         <section id="section1">
             
         <article>
         <p id="ccc">
               asdfasdfsfads dgf  dfghu igduidrhg iurdg iuhg d fgkujhdg fdhfg dkjhgl kjhdflg dkjhflg kfdgkld gf
               df gjhfdkgh dghfdj hfdögjh dföjghdsf jghfdgjöshgjfkdg jfdksg kjfdh ghsjg hfdkg dfgdfgfdasdfasdfsfads dgf  
               dfghu igduidrhg iurdg iuhg d fgkujhdg fdhfg dkjhgl kjhdflg dkjhflg kfdgkld gf
               df gjhfdkgh dghfdj hfdögjh dföjghdsf jghfdgjöshgjfkdg jfdksg kjfdh ghsjg hfdkg dfgdfgfdasdfasdfsfads dgf  dfghu
               igduidrhg iurdg iuhg d fgkujhdg fdhfg dkjhgl kjhdflg dkjhflg kfdgkld gf
               df gjhfdkgh dghfdj hfdögjh dföjghdsf jghfdgjöshgjfkdg jfdksg kjfdh ghsjg hfdkg dfgdfgfdasdfasdfsfads dgf  dfghu
               igduidrhg iurdg iuhg d fgkujhdg fdhfg dkjhgl kjhdflg dkjhflg kfdgkld gf
               df gjhfdkgh dghfdj hfdögjh dföjghdsf jghfdgjöshgjfkdg jfdksg kjfdh ghsjg hfdkg dfgdfgfdasdfasdfsfads dgf  dfghu
               igduidrhg iurdg iuhg d fgkujhdg fdhfg dkjhgl kjhdflg dkjhflg kfdgkld gf
               df gjhfdkgh dghfdj hfdögjh dföjghdsf jghfdgjöshgjfkdg jfdksg kjfdh ghsjg hfdkg dfgdfgfdasdfasdfsfads dgf  dfghu
               igduidrhg iurdg iuhg d fgkujhdg fdhfg dkjhgl kjhdflg dkjhflg kfdgkld gf
               df gjhfdkgh dghfdj hfdögjh dföjghdsf jghfdgjöshgjfkdg jfdksg kjfdh ghsjg hfdkg dfgdfgfdasdfasdfsfads dgf  dfghu
               igduidrhg iurdg iuhg d fgkujhdg fdhfg dkjhgl kjhdflg dkjhflg kfdgkld gf</p>
               <p>
               df gjhfdkgh dghfdj hfdögjh dföjghdsf jghfdgjöshgjfkdg jfdksg kjfdh ghsjg hfdkg dfgdfgfdasdfasdfsfads dgf  dfghu igduidrh
               g iurdg iuhg d fgkujhdg fdhfg dkjhgl kjhdflg dkjhflg kfdgkld gf
               df gjhfdkgh dghfdj hfdögjh dföjghdsf jghfdgjöshgjfkdg jfdksg kjfdh ghsjg hfdkg dfgdfgfdasdfasdfsfads dgf  dfghu
               igduidrhg iurdg iuhg d fgkujhdg fdhfg dkjhgl kjhdflg dkjhflg kfdgkld gf
               df gjhfdkgh dghfdj hfdögjh dföjghdsf jghfdgjöshgjfkdg jfdksg kjfdh ghsjg hfdkg dfgdfgfdasdfasdfsfads dgf  dfghu i
               gduidrhg iurdg iuhg d fgkujhdg fdhfg dkjhgl kjhdflg dkjhflg kfdgkld gf
               df gjhfdkgh dghfdj hfdögjh dföjghdsf jghfdgjöshgjfkdg jfdksg kjfdh ghsjg hfdkg dfgdfgfdasdfasdfsfads dgf  dfghu i
               gduidrhg iurdg iuhg d fgkujhdg fdhfg dkjhgl kjhdflg dkjhflg kfdgkld gf
               df gjhfdkgh dghfdj hfdögjh dföjghdsf jghfdgjöshgjfkdg jfdksg kjfdh ghsjg hfdkg dfgdfgfdasdfasdfsfads dgf  dfghu igduidr
               hg iurdg iuhg d fgkujhdg fdhfg dkjhgl kjhdflg dkjhflg kfdgkld gf
               df gjhfdkgh dghfdj hfdögjh dföjghdsf jghfdgjöshgjfkdg jfdksg kjfdh ghsjg hfdkg dfgdfgfdasdfasdfsfads dgf  dfghu igduid
               rhg iurdg iuhg d fgkujhdg fdhfg dkjhgl kjhdflg dkjhflg kfdgkld gf
               df gjhfdkgh dghfdj hfdögjh dföjghdsf jghfdgjöshgjfkdg jfdksg kjfdh ghsjg hfdkg dfgdfgfdasdfasdfsfads dgf  dfghu igduid
               rhg iurdg iuhg d fgkujhdg fdhfg dkjhgl kjhdflg dkjhflg kfdgkld gf
               df gjhfdkgh dghfdj hfdögjh dföjghdsf jghfdgjöshgjfkdg jfdksg kjfdh ghsjg hfdkg dfgdfgfdasdfasdfsfads dgf  dfghu i
               gduidrhg iurdg iuhg d fgkujhdg fdhfg dkjhgl kjhdflg dkjhflg kfdgkld gf
               df gjhfdkgh dghfdj hfdögjh dföjghdsf jghfdgjöshgjfkdg jfdksg kjfdh ghsjg hfdkg dfgdfgfdasdfasdfsfads dgf  dfghu igdu
               idrhg iurdg iuhg d fgkujhdg fdhfg dkjhgl kjhdflg dkjhflg kfdgkld gf
               df gjhfdkgh dghfdj hfdögjh dföjghdsf jghfdgjöshgjfkdg jfdksg kjfdh ghsjg hfdkg dfgdfgfdasdfasdfsfads dgf  dfghu igd
               uidrhg iurdg iuhg d fgkujhdg fdhfg dkjhgl kjhdflg dkjhflg kfdgkld gf
               df gjhfdkgh dghfdj hfdögjh dföjghdsf jghfdgjöshgjfkdg jfdksg kjfdh ghsjg hfdkg dfgdfgfdasdfasdfsfads dgf  dfghu igduidrh
               g iurdg iuhg d fgkujhdg fdhfg dkjhgl kjhdflg dkjhflg kfdgkld gf
               df gjhfdkgh dghfdj hfdögjh dföjghdsf jghfdgjöshgjfkdg jfdksg kjfdh ghsjg hfdkg dfgdfgfdasdfasdfsfads dgf  dfghu igduidr
               hg iurdg iuhg d fgkujhdg fdhfg dkjhgl kjhdflg dkjhflg kfdgkld gf
               df gjhfdkgh dghfdj hfdögjh dföjghdsf jghfdgjöshgjfkdg jfdksg kjfdh ghsjg hfdkg dfgdfgfdasdfasdfsfads dgf  dfghu igduidrhg
               iurdg iuhg d fgkujhdg fdhfg dkjhgl kjhdflg dkjhflg kfdgkld gf
               df gjhfdkgh dghfdj hfdögjh dföjghdsf jghfdgjöshgjfkdg jfdksg kjfdh ghsjg hfdkg dfgdfgfdasdfasdfsfads dgf  dfghu igduidr
               hg iurdg iuhg d fgkujhdg fdhfg dkjhgl kjhdflg dkjhflg kfdgkld gf
               df gjhfdkgh dghfdj hfdögjh dföjghdsf jghfdgjöshgjfkdg jfdksg kjfdh ghsjg hfdkg dfgdfgfd
               </p>
         </article>
         </section>
         <footer>
         Copyright 2011
         </footer>
     </div>
 </body>
 </html>

und die CSS Datei:

HTML: 
body
 {
     background-color:#626262;
     overflow: auto;
 }

 .ddm
 {    
     text-decoration: none;
     color:darkgrey;
     font-size: 16px;

 }


 .linkss
 {
     width:auto;
 }


 #site
 {
     width: 940px;
     margin: 0 auto;
     text-align: left;
     border: solid darkred 3px;
 }
 header
 {
     width: 940px;
     height:150px;
     margin: 0 auto;
     background-color: red;

 }
 #banner
 {

     height:150px;
     width:940px;
 }
 nav
 {
     width: 940px;
     margin: 0 auto;
     height:40px;
     text-align: center;
     background-image: url(../images/nav.jpg);
     border-bottom: solid darkred 1px;    
 }

 #ddm
 {
     z-index:5;
     width:150px;
     position:absolute;
     margin:195px 0 0 330px;
     background-color:darkred;
     padding:10px 10px 10px 10px;
 }

 #aleft
 {      
     width:200px;
     height:600px;
     float:left;
     background-color:#92AEE1;
     border-right:solid darkred 2px;
 }

 .asidec
 {
     padding: 40px 20px 20px 30px;    
     text-align: center;
     color: #FFFFFF;
     font-size: large;
 }

 #section1
 {
     width:auto;    
     max-height: 600px;
     overflow:scroll;
     background-color:#c2c2c2;
 }



 article
 {
     padding-left: 20px;
     padding-right:20px;
     padding-top:20px;

 }

 footer
 {
     background-color:darkgrey;
     border-top: solid darkred 1px;
 }


 a:link
 {
     color:red;
 }

Kann mir da vielleicht jemand weiterhelfen??

MfG
Lukas
 
vitus37 schrieb:
Internet Explorer <= 8 kennt die neuen HTML5-Tags nicht und ignoriert diese.
Zum Vergrößern anklicken....
Deshalb erstellt er sie ja mit JavaScript.(Da fast alle User mit IE8 Javascript eingestellt haben, sollte das funktionieren, die anderen haben halt Pech gehabt).

Ich benutze dieses hier:
HTML5 Starter Pack by Radu Chelariu | Sickdesigner.com

Das Problem bei ihm ist halt auch das die Elemente nicht im CSS mit Style-Angaben definiert sind. Zum Beipiel Block- oder Inline-Element, etc.
Das HTML5 Starter-pack behebt all diese Dinge.
 
Zuletzt bearbeitet von einem Moderator:
Wustersoss schrieb:
Deshalb erstellt er sie ja mit JavaScript.(Da fast alle User mit IE8 Javascript eingestellt haben, sollte das funktionieren, die anderen haben halt Pech gehabt).

Ich benutze dieses hier:
HTML5 Starter Pack by Radu Chelariu | Sickdesigner.com
Zum Vergrößern anklicken....

Ich halte nichts von den JavaScript-Umgehungen. Die Vorgehensweise in meinem Artikel halte ich für deutlich barrierefreier und simpler.

Edit: Außerdem macht es keinen Sinn für IE8 mit JavaScript die HTML5-Elemente neu zu erstellen, wie es momentan scheinbar geschieht.
 
vitus37 schrieb:
Ich halte nichts von den JavaScript-Umgehungen. Die Vorgehensweise in meinem Artikel halte ich für deutlich barrierefreier und simpler.

Edit: Außerdem macht es keinen Sinn für IE8 mit JavaScript die HTML5-Elemente neu zu erstellen, wie es momentan scheinbar geschieht.
Zum Vergrößern anklicken....

Hmm, da stellt sich natürlich unwillkürlich die Frage ob man die neuen Elemente überhaupt verwenden sollte.
Deine Vorgehensweise die neuen Elemente zwar zu schreiben, sie aber nicht mit CSS anzusprechen, dafür die inneren Divs mit ansprechenden IDs mit CSS zu selektieren und anzusprechen ist für mich aber auch nicht nachvollziehbar. Wenn Sie zu nichts nütze sind ausser im HTML-Code Modernität vorzugaukeln, kann man sie ja auch gleich weglassen. Oder?

Es ist wie immer wenn Neuerungen eingeführt werden und nicht von allen nutzbar sind, keine Lösung ist vollkommen und ideal. Ich denke das Beste ist wohl derzeit noch, die neuen Elemente sparsam einzusetzen oder auf sie zu verzichten bis zumindest >90% der User diese darstellen können.
 
Wustersoss schrieb:
Wenn Sie zu nichts nütze sind ausser im HTML-Code Modernität vorzugaukeln, kann man sie ja auch gleich weglassen. Oder?
Zum Vergrößern anklicken....
Der Sinn der Elemente liegt doch schon in ihrem Namen: Semantik.

Die semantischen Tags ermöglichen es, den Dokumentteilen noch genauere Bedeutungen zuzuordnen. Suchmaschinen und natürlich Webbrowser können durch sie nachvollziehen, welchen Sinn entsprechende Inhaltsabschnitte haben. Suchmaschinen können sich bspw. auf die wichtigen Inhalte fixieren und und eher nebensächliches wie Footer ignorieren. Google könnte auch aus dem Inhalt des nav-Elements Sitelinks generieren.

Wustersoss schrieb:
Ich denke das Beste ist wohl derzeit noch, die neuen Elemente sparsam einzusetzen oder auf sie zu verzichten bis zumindest >90% der User diese darstellen können.
Zum Vergrößern anklicken....
Wenn jeder Webentwickler so denken würde, wird HTML5 niemals deckend unterstützt werden.
 
Wenn MS den IE9 für WinXP verfügbar machen und idealer Weise als automatisches Update installieren würde, wäre das ein großer Schritt für die Verbreitung von HTML5.
 
vitus37 schrieb:
Wustersoss schrieb:
Es ist wie immer wenn Neuerungen eingeführt werden und nicht von allen nutzbar sind, keine Lösung ist vollkommen und ideal. Ich denke das Beste ist wohl derzeit noch, die neuen Elemente sparsam einzusetzen oder auf sie zu verzichten bis zumindest >90% der User diese darstellen können.
Zum Vergrößern anklicken....

Wenn jeder Webentwickler so denken würde, wird HTML5 niemals deckend unterstützt werden.
Zum Vergrößern anklicken....

Ich denke auch, das ist eine Diskussion, die schon ewig läuft. Webentwickler können nichts dafür und auch nur sehr begrenzt etwas daran ändern, dass Nutzer Clients verwenden, die bestimmte Techniken nicht unterstützen.[1] Es gab immer Techniken und wird wahrscheinlich immer Techniken geben, die nicht flächendeckend unterstützt werden.

Das wird sicherlich niemals befriedigend gelöst. Das sehe ich so wie Wustersoss. Wir können nicht einfach sagen: „10 Prozent der Nutzer sind uns egal.“

Die Semantik ist in diesem Fall meines Erachtens aber dennoch ein gutes Argument. Ich finde die Dopplung von „HTML5”-Elementen und div-Elementen zwar auch irgendwie unnötig, aber es stimmt schon, dass es einen gewissen Sinn ergibt, denjenigen Clients, die die neuen Elemente unterstützen, diese auch zur Verfügung zu stellen und für andere Clients einen Fallback zu schaffen, der nicht auf JavaScript angewiesen ist. Das ist für mich ein Level mit CSS-Eigenschaften mit Vendor-Präfixen. Man möchte sie nicht nutzen, aber sie sind ein notwendiges Übel.

Na ja, Legacy-Fallbacks in Seiten einzubauen, ist einfach ein Zustand, mit dem man sich abfinden muss. Das Web wird vermutlich niemals eine kontrollierbare Umgebung sein. Das ist aber wahrscheinlich auch gut so.



1: Linux-Nutzer übrigens auch nicht.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben