Antworten auf deine Fragen:
Neues Thema erstellen

IE 9 macht Probleme....

designcat08

Nicht mehr ganz neu hier

Hallo zusammen,

es wäre super, wenn mir jemand hier kurz helfen könnte......
Ich bin dabei, mich näher mit html und css zu beschäftigen und arbeite momentan mit dem Buch Einstieg in CSS von Elisabeth Wetsch.
Da das Buch etwas älter ist, stolpere ich bei IE 9 über das Problem, dass ein Beispiel nicht richtig angezeigt wird.

Wie bringe ich IE 9 in diesem Fall dazu, mitzuspielen?
(der Rahmen oben dockt nicht an den Rand rechts an)

HTML:
HTML:
<html>
<!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>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  <title></title>
  <meta name="description" content="" />
  <meta name="keywords" content="" />
  <meta name="author" content="Martina">
  <meta name="editor" content="html-editor phase 5">
  <link href="styles.css" rel="stylesheet" type="text/css" media="screen"/>
</head>
<body id="produkte">
<div id="rahmenoben"></div><!-- END #rahmenoben -->
<div id="nav">
<ul>
<li class="navhome"><a href="#"><span>home</span></a></li>
<li class="navteam"><a href="#"><span>team</span></a></li>
<li class="navprodukte"><a href="#"><span>produkte</span></a></li>
<li class="navservice"><a href="#"><span>service</span></a></li>
<li class="navkontakt"><a href="#"><span>kontakt</span></a></li>
</ul>
</div><!-- END #nav -->
<div id="rahmenlinks">
<div id="menu">
<ul>
<li><a href="#">Obst</a>
<ul>
<li class="aepfel"><a href="#">Äpfel</a></li>
<li class="birnen"><a href="#">Birnen</a></li>
<li class="kirschen"><a href="#">Kirschen</a></li>
</ul>
</li>
<li><a href="#">Gemüse</a>
<ul>
<li class="tomaten"><a href="#">Tomaten</a></li>
<li class="gurken"><a href="#">Gurken</a></li>
<li class="spinat"><a href="#">Spinat</a></li>
</ul>
</li>
</ul>
</div><!-- END #menu -->
</div><!-- END #rahmenlinks -->
<div id="hauptrahmen">
<div id="maintext">
<h1>Webhome Modell "Frames" oben</h1>
<p>Cassie will be competing at the US Covergirl Classic this weekend on July 24 in Chicago, Illinois. She will be in the senior session at 7:00 p.m. at the UIC Pavilion. Cassie has already qualified for the VISA Championships in Hartford, CT. She will use this competition as a warm up. The Universal Sports will be broadcasting the US Covergirl Classic live. You can find more information by going to UniversalSports.Com. Good luck Cassie!</p>
</div><!-- END #maintext -->
</div><!-- END #hauptrahmen -->
</body>
</html>

CSS:
Code:
html {/*height: 100.1%; */ font-size: 62.5%; overflow: hidden;}

body {font: 1.2em/1.8em Verdana, sans-serif; height: 100%; max-height: 100%;}

* {margin: 0px; padding: 0px; border: 0px;}

h1, h2, h3, h4, h5, h6 {font-family: "Century Gothic", sans-serif; margin: 0em 0em 0.5em 0em; color: #004A7F;}
h1 {font-size: 2.2em; border-bottom: 1px dashed #004A7F; padding-bottom: 0.4em; font-weight: normal;}

div#header h1 {border: 0px;}

h2 {font-size: 2.0em;}
h3 {font-size: 1.8em;}
h4 {font-size: 1.6em;}
h5 {font-size: 1.4em;}
h6 {font-size: 1.2em;}

a {color: #E3004F; text-decoration: none;}
a:link {}
a:visited {}
a:hover {}
a:active {}

div#nav {position: absolute; top: 100px; right: 0px; width: auto; text-align: right; background: #DEDEDE; padding-right: 20px; z-index: 100;}
div#nav li {display: inline; margin-left: 0.4em;}
div#nav a {text-decoration: none; font-weight: bold; text-transform: uppercase;}
div#nav a span {padding: 0.4em 1.0em 0.6em 1.0em; border: 1px solid #CCCCCC; border-bottom: 1px solid #FFFFFF; background: #FFFFFF;}
div#nav a:hover span, body#home li.navhome a span, body#team li.navteam a span, body#produkte li.navprodukte a span, body#service li.navservice a span, body#kontakt li.navkontakt a span {background: #E3004F; color: #FFFFFF;}

div#rahmenoben {position: absolute; top: 0px; left: 0px; right: 0px; width: auto; height: 100px; overflow: hidden; background: #DEDEDE url(images/cssboxmania_logo.gif) no-repeat 10px 10px; text-align: right; padding-right: 20px;}

div#rahmenlinks {position: absolute; top: 100px; left: 0px; width: 200px; height: 100%; overflow: hidden; background: #EDEDED;}

div#menu {margin: 3.0em 20px;}
div#menu ul {list-style-type: none;}
div#menu ul li {font-weight: bold;}
div#menu ul ul li {font-weight: normal; margin-left: 10px;}
div#menu li.tomaten {background: #E3004F; margin-left: -30px; margin-right: -20px; padding-left: 40px;}
div#menu li.tomaten a {color: #FFFFFF; font-weight: bold;}

div#hauptrahmen {position: absolute; left: 200px; top: 120px; right: 0px; bottom: 0px; overflow: auto; background: #FFFFFF;}

div#maintext {margin: 2.0em;}

/* Star-html-Hack 4IE6 */
* html body {padding: 120px 0px 0px 200px;}
* html div#hauptrahmen {height: 100%; width: 100%;}
* html div#rahmenoben {width: 100%;}
 

krid2873

Noch nicht viel geschrieben

AW: IE 9 macht Probleme....

Moin,

Wie bringe ich IE 9 in diesem Fall dazu, mitzuspielen?
(der Rahmen oben dockt nicht an den Rand rechts an)
Entferne die erste Zeile:
HTML:
<html>
aus deinem HTML-Dokument. Stichwort "Quirks-Modus".

Und im CSS-Teil diese Zeile raus:
Code:
* html body {padding: 120px 0px 0px 200px;}
 
Zuletzt bearbeitet:

designcat08

Nicht mehr ganz neu hier

AW: IE 9 macht Probleme....

Ah super, das klappt einwandfrei!! Vielen Dank für die Hilfe!!

Da werde ich mich bei der Gelegenheit dann auch gleich mal eingehender informieren was den Quirks-Modus angeht!
 
Y

yanina112

Guest

AW: IE 9 macht Probleme....

Hallo designcat08,

das Löschen der Zeile

* html body {padding: 120px 0px 0px 200px;}

bewirkt im Quirks-Modus, dass plötzlich ein horizontaler Scrollbalken erscheint und nur ein Teil des div#hauptrahmen, bzw. div#maintext sichtbar wird. Um dies zu verhindern, soll die Zeile:

* html div#hauptrahmen {height: 100%; width: 100%;}

in

* html div#hauptrahmen {height: 100%; width: auto;}

geändert werden. Dann funktioniert es auch im Quirks-Modus.

Was mir noch aufgefallen ist: der Trick mit

html {height: 100.1%;}

(in diesem konkreten Beispiel auskomentiert, da nicht brauchbar) funktioniert mit den neueren Versionen von Firefox nicht. Der Wert muss auf 100.2% erhöht werden, um einen vertikalen Scrollbalken in Firefox zu erzwingen.

Grüße
 

designcat08

Nicht mehr ganz neu hier

AW: IE 9 macht Probleme....

Oh super, vielen Dank für den Tipp bzw. die Tipps!! Das werde ich mir auch gleich zusätzlich noch mal merken...ich denke mal das werde ich sicher dann in Zukunft noch mal brauchen! :)
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Neueste Themen & Antworten

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Keine Mitglieder online.

Statistik des Forums

Themen
118.619
Beiträge
1.538.363
Mitglieder
67.540
Neuestes Mitglied
Alex Weidner
Oben