---
title: "fehlerhafte Darstellung im IE6. CSS schuld?"
url: "https://www.typo3.net/d/64484-fehlerhafte-darstellung-im-ie6-css-schuld"
source: "typo3.net"
tags: ["Frontend","Styling","Frage","HTML & CSS"]
created: "2007-06-26"
last_reply: "2007-06-28"
replies: 4
solved: false
page: 1
pages: 1
lang: "de"
---

# fehlerhafte Darstellung im IE6. CSS schuld?

Frontend › Styling · 4 Antworten · gestartet 2007-06-26

## Eröffnungsbeitrag

**hypetype** · 2007-06-26 · [Beitrag #1](https://www.typo3.net/d/64484-fehlerhafte-darstellung-im-ie6-css-schuld/1)

Hallo an Alle,

ich bin ein Typo3-Neuling und versuche mich an meinem ersten Projekt. Auch im Layout mit Hilfe von CSS bin ich kein wirkliches Ass.

Hier kurz die URL: <http://p30293.typo3server.info/31.0.html>

Nun habe ich einen Darstellungsfehler in meiner Seite, der allerdings nur im IE6 und nicht im Firefox oder Opera auftaucht.

Abbildung 1:

[Bild: p30293.typo3server.info/…/fehler_01.jpg](http://p30293.typo3server.info/fileadmin/Daten_Suriya_Kanthi/images/fehler_01.jpg)

Zu sehen ist, dass der generierte Seitentitel, als Bild mit Hilfe des GIFBUILDERS, um einige wenige Pixel eingerückt ist. Definiert habe ich das im TS so:

```typoscript
# Inhalt-Top Seitentitel anzeigen
        INHALT_TOP=IMAGE
	INHALT_TOP.file = GIFBUILDER
	INHALT_TOP.file {
	XY = 558,40
	#maxHeight = 40
	maxWidth = 558
	5=IMAGE
	5.file=fileadmin/Daten_Suriya_Kanthi/images/background_03.gif
	20 = TEXT
	20.text.field = title
	#20.text.case = upper
	#20.dataWrap = /// | 
	20.fontFile=fileadmin/fonts/NuevaStd-Bold.otf
	20.offset = 30,35
	20.niceText = 0  
	20.fontSize= 26
	20.fontColor=#993300

}
```

Abbildung 2:

[Bild: p30293.typo3server.info/…/fehler_02.jpg](http://p30293.typo3server.info/fileadmin/Daten_Suriya_Kanthi/images/fehler_02.jpg)

der gleiche Fehler scheint auch in meinem Footer aufzutauchen. Das Bild (als Link) "Chandra-Kumari" scheint ebenfalls um einige wenige Pixel nach rechts eingerückt zu sein, wodurch der Rest des Footers nicht genügend Platz findet und umbricht. Auch scheint überhalb des Footers ein winziger Spalt zu sein.

der dazugehörige Ausschnitt aus dem TS:

```typoscript
# Impressum einlesen
       	IMPRESSUM = TEXT
	IMPRESSUM.value (
	<div style="position:relative; left:25px; top:20px; color:white;">
	<p>Impressum</p><br />
	<p>© Suriya-Kanthi 2007</p>
	</div>
	)
	
     # Das animierte Linkbild zu CK einlesen
     LINK_CK = IMAGE
     LINK_CK.file = fileadmin/Daten_Suriya_Kanthi/images/background__13_ani.gif
     LINK_CK.stdWrap.typolink.parameter = www.chandra-kumari.de target="_blank"
     LINK_CK.altText = Chandra-Kumari
     
     # Das Linkbild zum Wellnesszentrum einlesen
     LINK_WELLNESS = IMAGE
     LINK_WELLNESS.file = fileadmin/Daten_Suriya_Kanthi/images/background_15.gif
     LINK_WELLNESS.stdWrap.typolink.parameter = www.ayurveda-wellnesszentrum.de target="_blank"
     LINK_WELLNESS.altText = Ayurveda Wellness Zentrum
     
     # Bild rechte Spalte unten einlesen
     RECHTS_UNTEN = IMAGE
     RECHTS_UNTEN.file = fileadmin/Daten_Suriya_Kanthi/images/background_16.gif
```

Meine Befürchtung ist das der CSS-Code nicht IE konform ist. Habe schon viele Hacks ausprobiert um den IE "auszutricksen" aber nichts hat geholfen.

Ich wäre sehr dankbar für einen Tipp wo der Fehler liegen könnte.

Hier der verwendete CSS-Code meiner Seite:

##########################################

* {
margin: 0;
padding: 0;
}

body { 	text-align: center;
	position: relative;
	left: 0;
	top:0;
	}

h2,h3,h4,h5,h6,boddy,div,p,button {
	font: 12px/16px Verdana, Helvetica, Arial
	}

h1 { color: #8C2521; font: bold 13px Verdana, Helvetica, Arial; }

h3 { color: #F5CF7A; font: bold 13px Verdana, Helvetica, Arial;  }

a { 	color: #8C2521;
	font: 13px Verdana, Helvetica, Arial;
	background-color: transparent;
	text-decoration: underline;
	}

a:hover {
	color: white;
	font-size: 13px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	line-height: normal;
	background-color: #8C2521;
	text-decoration: underline;
	}

div#container {
	background: url(Daten_Suriya_Kanthi/images/background.gif);
	background-repeat: repeat-y;
	width:950px;
	margin:0pt auto;
	border:0;
	padding:0;
	text-align: left;
	position: relative;
	left: 0;
	top:0;
	}

div#header {
	margin:0;
	padding:0;
	border:0;
	width:950px;
	text-align: center;
	}

div#links {
	background-position: left top;
	float:left;
	width:196px;
	margin:0;
	padding:0;
	border-style: none;
	outline-style: none;
	outline-width: 0px;
	border: 0px
	clear:left;
	min-height: 700px;
	}

div#center {
	margin-left:196px;
	margin-right:190px;
	width:auto;
	max-height:none;
	border:0;
	min-height: 700px;
	}

div#center_top {
	width:558px;
	padding: 0pt;
	margin: 0pt;
	height: 40px;
	}

div#center_middle {
	padding-left:30px;
	padding-top:15px;
	padding-right:25px;
	width:auto;
	min-heigth:680px;
	}

div#center_middle img {
	border: 2px solid;
	border-color: #993300;
	floeat:left;
	}

div#center_bottom {
	width:auto;
	max-height:none;
	border:0;
	padding:0;
	margin-bottom:0pt;
	clear:both;
	}

div#right {
	width: 196px; /* nur Internet Explorer */
	width/**/:/**/ 161px; /* alle anderen Browser */
	height:auto;
	float:right;
	padding-left:18px;
	padding-right:17px;
	padding-top:0px;
	background-position: right top;
	border:0;
	position: relative;
	color: #F5CF7A;
	}

div#footer {
  	margin:0;
  	clear:both;
  	padding:0;
  	background-color: #ffd982;
	}

div#footer a:hover {
  	background-color: transparent;
	text-decoration: none;
	}

div#impressum {
	background: url(Daten_Suriya_Kanthi/images/background_13.gif);
	background-repeat: none;
	width: 193px; /* nur Internet Explorer */
	width/**/:/**/ 196px; /* alle anderen Browser */
	border:0;
	height:82px;
	float:left;
	}

.float-left {
	float:left;
	}

#clearone {
   	clear: both;
   	height: 1px;
   	}

.img {
	border-width: 0;
	outline-width: 0;
	}

span.kontakt {
	color: white;
	font: 13px Verdana, Helvetica, Arial;
	padding-left: 25px;
	}
###############################################

## Antworten

### [#2](https://www.typo3.net/d/64484-fehlerhafte-darstellung-im-ie6-css-schuld/2) · fuss · 2007-06-26

Olla!

Validier erstmal Dein CSS & XHTML und schmeiß die Fehler raus:
<http://jigsaw.w3.org/css-validator>
<http://validator.w3.org>

Dann gib dem div#center_top noch ein float: left; mit, das sollte funktionieren.
Mit dem footer, das scheint was ähnlich gelagertes zu sein, aber ohne Gewähr ;)

gruss, fuss

### [#3](https://www.typo3.net/d/64484-fehlerhafte-darstellung-im-ie6-css-schuld/3) · hypetype · 2007-06-28

Wow das mit dem float:left hat super funktioniert; 1000 Dank.

Leider ist aber das Problem mit den beiden Spalten zwischen Header und Content, und zwischen Contend und Footer (nur im IE) immer noch da:

horizontaler Spalt zw. Header und Content (leicht im Schnörkel zu sehen):
[Bild: p30293.typo3server.info/…/fehler_03.jpg](http://p30293.typo3server.info/fileadmin/Daten_Suriya_Kanthi/images/fehler_03.jpg)

horizontaler Spalt zw. Content und Footer:
[Bild: p30293.typo3server.info/…/fehler_04.jpg](http://p30293.typo3server.info/fileadmin/Daten_Suriya_Kanthi/images/fehler_04.jpg)

Ich denke, dass der horizontale Spalt zwischen allen Boxen ist, nur fällt er woanders nicht auf da ich mit einem Hintergrundbild für den kompletten "Außencontainer" gearbeitet habe. Ich vermute stark, dass der Fehler auch hier im CSS liegt. Habe die Datei schon validiert, es wird mir aber kein Fehler angezeigt.

Hat jemand vielleicht auch hierfür eine Lösung?

### [#4](https://www.typo3.net/d/64484-fehlerhafte-darstellung-im-ie6-css-schuld/4) · fuss · 2007-06-28

Pack Dein Headerdiv mal in eine Zeile, dann is das oben weg

```html
<div id="header"><img src="31.0_files/header.jpg" alt="" title="" border="0" height="120" width="950"></div>
```

und dann das bottom div in eine Zeile, dann is das unten weg.

```html
<div id="center_bottom"><img src="31.0_files/content_foot.gif" alt="" title="" border="0" height="12" width="558"></div>
```

gruss, fuss

### [#5](https://www.typo3.net/d/64484-fehlerhafte-darstellung-im-ie6-css-schuld/5) · hypetype · 2007-06-28

Mensch Fuss, hat alles super geklappt. Vielen Dank Du bist mein Retter.

---

Quelle: „fehlerhafte Darstellung im IE6. CSS schuld?“, typo3.net, https://www.typo3.net/d/64484-fehlerhafte-darstellung-im-ie6-css-schuld
Beiträge von Mitgliedern des Forums. Bitte mit Link auf die Diskussion zitieren.