[Anfängerfrage] CSS IE9 : Problem; Größe der Boxen

compilo · 10 August 2012

Hallo HTMLer.

Ich habe ein Problem und finde irgendwie keine Antwort auf meine Frage. Vielleicht bin ich wie beim letzten Mal einfach zu dumm, oder ich verwende in Google die falschen Suchbegriffe, da ich mich mit der Thematik eben nicht auskenne.

Mein Problem ist das folgende, dass mein Internetpräsenz im Internet Explorer 9 nicht so will, wie ich. Und vor allem, dass meine Boxen die ich über einen <div> und externen CSS-Code versuche zu steuern nicht so wollen wie ich. :mrgreen:

Als erstes die Info, dass ich bei der CSS-Validierung folgendes Ergebnis kriege:
Ergebnisse des CSS-Validators main.css (CSS level 3) / Gratuliere! Keine Fehler gefunden.

Ich kriege nur eine Warnung, die folgendes besagt:
Die gleichen Farben für den Vordergrund und den Hintergrund in den zwei Kontexten .box1 und #navigation li a

Zuerst mal die Sichtweisen aller Browser, damit vielleicht jemand die Problematik erkennen mag und schon weiß, auf was er im Code achten muss. Die Browser lagen jeweils in aktuellster Form vor. Beim Firefox/Chrome und Opera sah das Ergebnis genau gleich aus!

Firefox/Chrome/Opera:

Internet Explorer:

Beim Internet Explorer 9 sieht es so aus, als würde er sämtliche Arbeit von mir ignorieren und seinen eigenen CSS-Code zusammenschustern. Als würde ihn meine Anordnung des Contents überhaupt nicht jucken. Er zieht alles nach links. Die Boxen lässt er jedoch auf ihrem Platz. :mrgreen:

Den CSS-Code könnt ihr am Ende dieses Beitrags ansehen.

Das andere Problem ist, die unterschiedlichen Bildschirmgrößen. Ich habe mein Laptop und meinen Computer ausprobiert, doch leider mit einem ernüchternden Erfolg. Damit ihr auch hier das Problem erkennt und vielleicht den CSS-Code nach bestimmten Eigenschaften durchsuchen könnt, hab ich dafür mal ein Foto gemacht, wie das in den unterschiedlichen Größen aussieht.

1366 x 768:

1024x768:

Hier sieht man, dass der hintenliegenden Contentbereich sich noch das die Screengröße anpasst und auch funktioniert. Nur die Boxen verschwinden nach rechts, liegen nicht mehr auf dem Content und erzeugen einen Scrollbalken.

800x600:

Hier funktioniert gar nichts mehr. Der Content passt sich nicht mehr an die richtige Größe an und die Boxen sind kaum noch sichtbar. Wobei ich mich auch frage, ob eine Auflösung von 800x600 überhaupt noch beachtet werden sollte, in der heutigen Zeit.

Damit ihr mir nun vielleicht helfen könnt, da ich irgendwie sehr ratlos dastehe hier der CSS-Code:

Code:

body {
	margin: 0;
	padding: 0;
	line-height: 1.5em;
	font-family: Verdana, Arial, san-serif;
	font-size: 11px;
	color: #dddcdc;
	background: #262324 url(main.jpg) top repeat-x;
}

a:link, a:visited { color: #ff9600; text-decoration: none; font-weight: bold;} 
a:active, a:hover { color: #ff9600; text-decoration: underline;}

img {
	padding: 0px;
	margin: 0px;
}

p {
	margin: 0px;
	padding: 0px;
	text-align: justify;
}

.cleaner {
	clear: both;
	width: 100%;
	height: 1px;
	font-size: 1px;	
}

#container{
	width: 960px;
	margin: 0 auto;
}

.inner-container {
background: #3d3d3d;
font-size: 1.2em;
margin: 0 auto;
width: 942px;
}

.content {
height: 1280px;
background-color: #3f3b3c;
}

.box1{
width:440px;
height:300px;
border-radius: 10px;
border:2px solid #FF9600;
background-color:#000000;
position:absolute; top:400px; left:219px;
}

.box2{
width:440px;
height:300px;
border-radius: 10px;
border:2px solid #FF9600;
background-color:#000000;
position:absolute; top:400px; left:684px;
}

.box3{
width:440px;
height:300px;
border-radius: 10px;
border:2px solid #FF9600;
background-color:#000000;
position:absolute; top:720px; left:219px;
}

.box4{
width:440px;
height:300px;
border-radius: 10px;
border:2px solid #FF9600;
background-color:#000000;
position:absolute; top:720px; left:684px;
}

.box5{
width:440px;
height:300px;
border-radius: 10px;
border:2px solid #FF9600;
background-color:#000000;
position:absolute; top:1040px; left:219px;
}

.box6{
width:440px;
height:300px;
border-radius: 10px;
border:2px solid #FF9600;
background-color:#000000;
position:absolute; top:1040px; left:684px;
}

.box7{
width:440px;
height:300px;
border-radius: 10px;
border:2px solid #FF9600;
background-color:#000000;
position:absolute; top:1361px; left:219px;
}

.box8{
width:440px;
height:300px;
border-radius: 10px;
border:2px solid #FF9600;
background-color:#000000;
position:absolute; top:1361px; left:684px;
}

#header {
	width: 900px;
	height: 60px;
	padding: 40px 30px 0 30px;
}

#navigation {
	clear: both;
	position: relative;
	width: 920px;
	margin: 0 20px;
	height: 45px;
	background: url(menu.jpg) right no-repeat;
}

#navigation span {
	position: absolute;
	top: 0;
	left: 0;
	width: 5px;
	height: 45px;
	background: url(menu_left.jpg) no-repeat;
}

#navigation ul{
	padding: 0 0 0 10px;
	margin: 0 auto;
	height: 45px;
	list-style: none;
}

#navigation ul li{
	float:left;
	padding-right: 5px;
}

#navigation li a{
	float: left;
	display: block;
	color: #000;
	font-size: 12px;
	height: 45px;
	line-height: 45px;
	text-align: center;
	padding: 0px 0 0 8px;	
}
#navigation  li a b{
	float: left;
	display: block;
	padding: 4px 24px 0 16px;
}
#navigation  li.current a, #navigation  li a:hover{
	color: #fff;
	text-decoration: none;
	background: url(hover_left.jpg) left top no-repeat; 
}
#navigation  li.current a b, #navigation li a:hover b{
	color: #fff;
	padding-top: 0px;
	text-decoration: none;
	background: url(hover.jpg) right top no-repeat;
}

#banner_text {
	clear: both;
	width: 960px;
	height: 245px;
	background: #b7bd19 url(compilo.jpg) top left no-repeat;
}

#banner_text p{
	color: #ffffff ;
	font-size: 13px;
	font-weight: bold;
	width: 400px;
	padding: 130px 0px 0px 70px;
	text-align: left;
	line-height: 20px;
}

#banner_text a{
	color: #ff9600;
}

#footer {
	clear: both;
	color: #999;
	width: 960px;
	padding: 20px 0px 20px 0;
	text-align: center;
	background: url(footer.jpg) top center no-repeat;
}

#footer a{
	color: #fff;
	font-weight: normal;
}

Vielen Dank für eure Bemühungen.

Liebe Grüße
compilo

prm · 10 August 2012

Ein Link zur Problemseite wäre hilfreicher gewesen als deine großen Ausführungen.

Ich vermute jedoch, dass deiner Seite ein standardkonformer Doctype fehlt, den der IE zur korrekten Darstellung des CSS-Boxmodells benötigt.
DOCTYPE-Switch und seine Auswirkungen

compilo · 10 August 2012

Oh, daran dachte ich im ersten Moment gar nicht:

Compilo - Nachrichtensammlung : Politik

Dort kann man sich das Ganze einmal anschauen. :)

Meine index.php sieht am Anfang so aus:

Code:

<!-- Festlegen von W3C Standards (Dokumenttyp) -->

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<!-- Anfang HTML.Geruest -->
<html xmlns="http://www.w3.org/1999/xhtml">

Vielen Dank für eure Bemühungen. :)

Liebe Grüße
compilo

pax · 10 August 2012

Versuch mal einen strict doctype. Der IE verhält sich sonst wie IE 4.

Trüffelkrieger · 10 August 2012

Warum positionierst du deine vier Kästen denn absolut? Und vor allem, zu was? Wenn du nichts angibst, nach dem sich das positionieren soll, dann positioniert es sich am Viewport-Rand. Deshalb verschiebt sich das bei Veränderung der Größe. Arbeite da lieber mit float.

Edit: Du hast übrigens ein Sonderzeichen Problem...

prm · 10 August 2012

Lösche diese Zeile, damit der Doctype in der allerersten Quelltextzeile steht:

Code:

<!-- Festlegen von W3C Standards (Dokumenttyp) -->

[Anfängerfrage] CSS IE9 : Problem; Größe der Boxen

compilo

Neues Mitglied

prm

Aktives Mitglied

compilo

Neues Mitglied

pax

Guest

Trüffelkrieger

Mitglied

prm

Aktives Mitglied

Neueste Beiträge