---
title: "Design wird im IE nicht richtig dargestellt"
url: "https://www.typo3.net/d/103000-design-wird-im-ie-nicht-richtig-dargestellt"
source: "typo3.net"
tags: ["Frontend","Styling","Frage","HTML & CSS"]
created: "2010-12-21"
last_reply: "2010-12-23"
replies: 8
solved: false
page: 1
pages: 1
lang: "de"
---

# Design wird im IE nicht richtig dargestellt

Frontend › Styling · 8 Antworten · gestartet 2010-12-21

## Eröffnungsbeitrag

**nitramf** · 2010-12-21 · [Beitrag #1](https://www.typo3.net/d/103000-design-wird-im-ie-nicht-richtig-dargestellt/1)

Hallo!

ich bin grad minimal am verzweifeln :D

Es handelt sich um diese Seite:
<http://typo3.gutschein-king.eu/index.php?id=5>

Im Firefox wird bei mir alles korrekt dargestellt, im Internet-Explorer ist es die reinste Katastrophe.

Ich habe bei Google die Lösung gefunden, einfach ein text-align:center;

in das CSS vom body einzufügen, habe ich probiert, bringt leider nix.

Was kann ich noch tun?
Ich würde mich freuen, wenn mir jemand helfen könnte ;)

Gruß,
nitramf

## Antworten

### [#2](https://www.typo3.net/d/103000-design-wird-im-ie-nicht-richtig-dargestellt/2) · ISS · 2010-12-21

hallo nitramf

am einfachsten ist, wenn du eine browserweiche mit ts einbindest.

```typoscript
[browser = msie] && [version=<7]
page.includeCSS.file6 = fileadmin/css/menu_ie7.css
page.includeCSS.file7 = fileadmin/css/style_ie7.css
[global]

[browser=msie]&&[version=8]
page.includeCSS.file8 = fileadmin/css/menu_ie8.css
page.includeCSS.file9 = fileadmin/tschau/css/style_ie8.css
[global]

[browser = netscape, mozilla, firefox]
page.includeCSS.file10 = fileadmin/css/menu.css
page.includeCSS.file11 = fileadmin/css/style.css
[global]
```

jetzt musst du für ie8 ie7 und tiefer und firefox ein eigenes temlplate und css file anlegen

Gruss,
ISS

### [#3](https://www.typo3.net/d/103000-design-wird-im-ie-nicht-richtig-dargestellt/3) · nitramf · 2010-12-21

Hallo,

danke für die Antwort!
das Problem ist, dass ich die Erweiterung TemplaVoila nutze, die wird mir da sicherlich rein funken, oder?

Wenn ich es mit dem text-align probiere, geht es ja nicht, mal davon abgesehen, dass das Design dann im Firefox anders dargestellt wird. Können andere HTML Doctypes oder Header da helfen?

Ich habe auch noch eine andere Frage, ich habe gerade die Richtige Schriftart eingebunden, allerdings wird diese nicht wirklich schön ausgegeben.

Hier ist das Orginal.
<http://friedel.mivi-solutions.de/main/index.php>

Ich habe mich mit der Option niceText befasst, und denke dass sie abhilfe schaffen kann, allerdings wird einfach kein Text mehr angezeigt, sobald ich sie aktiviere. Woran kann das liegen?

```typoscript
temp.menu = HMENU
temp.menu {
special = directory
  special.value = 1
  1 = GMENU
  1 {
    expAll = 1
    noBlur = 1
    wrap = <ul id="nav">|</ul>
   # wrap=  <ul id="nav"><div style="margin-right:50px"> | </div> |*| | |*| |</ul>
    
 

    
    
    NO = 1
    NO {
       wrapItemAndSub =  <li style="margin-right:50px;">| </li>|*|<li>|</li>
      #wrapItemAndSub = <li>|</li>
      
        XY = 155, 25
      backColor = #231F20
      5 = IMAGE
      10=TEXT
      10 {
        text.field=title
     
         offset=10,20
        fontColor = #FFFFFF
        fontFile=fileadmin/templates/lte50194.ttf
        fontSize=17
       # niceText = 1
      }
      
      
      
    }
    IFSUB = 1
    IFSUB {
      wrapItemAndSub = <li>|</li>
      
      #155,25
        XY = 155, 25
      backColor = #231F20
      5 = IMAGE
      10=TEXT
      10 {
        text.field=title
        offset=10,20
        fontColor = #FFFFFF
        fontFile=fileadmin/templates/lte50194.ttf
      # niceText = 1
        fontSize=17
      }
      
      
      
    }
  }
  2 < .1
  2 {
    wrap = <ul class="wat"> | </ul>
    IFSUB {
      ATagParams = class="daddy"
    }
  }
  3 < .2
}
```

Gruß,
nitramf

/edit:
hier meine Konfiguration:
ImageMagick enabled:
    1
ImageMagick path:
    /usr/bin/ (6.3.7)
ImageMagick path/LZW:
    /usr/bin/ (6.3.7)
Version 5/GraphicsMagick flag:
    im6

GDLib enabled:
    1
GDLib using PNG:

IM5 effects enabled:
    0 (Blurring/Sharpening with IM 5+)
Freetype DPI:
    96 (Should be 96 for Freetype 2)
Mask invert:
    (Should be set for some IM versions approx. 5.4+)

File Formats:
    gif,jpg,jpeg,tif,tiff,bmp,pcx,tga,png,pdf,ai

### [#4](https://www.typo3.net/d/103000-design-wird-im-ie-nicht-richtig-dargestellt/4) · ISS · 2010-12-21

hallo nitramf

Zitat Frage1: **das Problem ist, dass ich die Erweiterung TemplaVoila nutze, die wird mir da sicherlich rein funken, oder?**

Es tut mir leid, doch da ich noch nie mit TemplaVoila gearbeitet habe, kann ich dir diese Frage nicht beantworten. Doch mein Gefühl sagt mir, ja wird wohl reinfunken.

Zitat Frage2: **Wenn ich es mit dem text-align probiere, geht es ja nicht, mal davon abgesehen, dass das Design dann im Firefox anders dargestellt wird. Können andere HTML Doctypes oder Header da helfen?**

Dies sind eben so die Eigenheiten von IE... nein andere Header oder Doctypes werden nicht helfen... hier mal meine CSS zum zeigen, wwas so unterschiedlich ist bei ie und firefox:
CSS für Firfox

```css
body   {
	background-color: #d7d7cf;
	padding:0px;
	margin:0px;
	font-family: Verdana, Geneva, sans-serif;
	color: #898A74;

}

#container {
	background-image: url(../images/sonstige/bk_gradient1.png);
	position:absolute;
	left:50%;
	width:951px;
	margin-left:-475px;
	background-color: #E3E3DE;
	padding-bottom:40px;
}

#head{
	padding:0px;
	margin:0px;
	height:394px;
}
#header {
	width: 951px;
	height: 398px;
}
/* Bilder CSS */
#home {
	position:absolute;
	width: 33px; 
      	margin-top:	-301px;      
	margin-left:	595px;
}
#ausbildung {
	position:absolute;
	width: 33px;  
       	margin-top:	-301px;
	margin-left:	628.5px;	
}
#beziehung {
	position:absolute;
	width: 33.5px;  
       	margin-top:	-301px;
	margin-left:	662px;
}
#freizeit {
	position:absolute;
	width: 33px;  
       	margin-top:	-301px;
	margin-left:	695.5px;
}
#lebenswelt {
	position:absolute;
	width: 33px;  
       	margin-top:	-301px;
	margin-left:	729px;
}
#wohlfuehlen {
	position:absolute;
	width: 33px;  
       	margin-top:	-301px;
	margin-left:	762.5px;
}
#rechte {
	position:absolute;
	width: 33px;  
	margin-top:	-301px;
	margin-left:	796px;
}
#umwelt {
	position:absolute;
	width: 33px;  
        margin-top:	-301px;
	margin-left:	828.5px;
	}
#multimedia {
	position:absolute;
	width: 33px;  
       	margin-top:	-301px;
	margin-left:	862px;
}
#beratung {
	position:absolute;
	width: 34px;  
	margin-top:	-282.5px;
	margin-left:	898px;

}
#beratung_aktiv {
	position:absolute;
	width: 34px;  
       	margin-top:	-299px;
	margin-left:	898px;
}
#kanton {
	position:absolute;
	top:5px;
	left: 715px;
	height: 10px;
	width: 170px;
}
#login {
	position:absolute;
	top:25px;
	right:0px;
	height: 95px;
	width: 375px;
}

#login_box {
	float:	left;
}
#suche {
	position:absolute;
	top:50px;
	right:20px;
}
#headmenu {
	position: absolute;
	top: 95px;
	right: 0px;
	width: 360px;
	background: #000060;
}

#topmenu {
	padding:0px;
	margin: 0px;
}

#content_left{
	background-image: url(../images/sonstige/bk_gradient1.png);
	margin-top: 30px;
	width: 360px;
	float:left;
}

#content_right{3
	background-image: url(../images/sonstige/bk_gradient1.png);
	margin-top: 30px;
	width: 360px;
	float:left;
}
/* wenns nur eine Spalte in der Mitte hat */
#content_middle{
   	background-image: url(../images/sonstige/bk_gradient2.png);	
	margin-top: 30px;
	width: 720px;
	float:left;
	margin-right: 5px;
}
#content_border{
	margin-top: 30px;
	float:left;
	width: 225px;
	background-color: #DFDFD9;
}
#content_left .box_left{
	padding-left: 25px;
	padding-right: 10px;
	padding-top:	10px;
	padding-bottom:	10px;	
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-top-style: none;
	border-right-style: dashed;
	border-bottom-style: none;
	border-left-style: none;
	border-top-color: #FFF;
	border-right-color: #FFF;
	border-bottom-color: #FFF;
	border-left-color: #FFF;
	background-image: url(../images/sonstige/bk_gradient1.png);
	background-repeat:no-repeat;
}
#content_middle .box_left{
	padding-left: 25px;
	padding-right: 10px;
	padding-top:	10px;
	padding-bottom:	10px;	
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-top-style: none;
	border-right-style: dashed;
	border-bottom-style: none;
	border-left-style: none;
	border-top-color: #FFF;
	border-right-color: #FFF;
	border-bottom-color: #FFF;
	border-left-color: #FFF;
	background-image: url(../images/sonstige/bk_gradient2.png);
	background-repeat:no-repeat;
}
.box_left div.csc-default{

}

#content_right .box_right{
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-top-style: none;
	border-right-style: dashed;
	border-bottom-style: none;
	border-left-style: none;
	border-top-color: #FFF;
	border-right-color: #FFF;
	border-bottom-color: #FFF;
	border-left-color: #FFF;
	padding-left: 10px;
	padding-right: 10px;
	padding-top:	10px;
	padding-bottom:	10px;	
	background-image: url(../images/sonstige/bk_gradient1.png);
	background-repeat:no-repeat;
}
#content_middle .box_right {
	padding-left: 25px;
	padding-right: 10px;
	padding-top:	10px;
	padding-bottom:	10px;	
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-top-style: none;
	border-right-style: dashed;
	border-bottom-style: none;
	border-left-style: none;
	border-top-color: #FFF;
	border-right-color: #FFF;
	border-bottom-color: #FFF;
	border-left-color: #FFF;
	background-image: url(../images/sonstige/bk_gradient2.png);
	background-repeat:no-repeat;
}
.box_border {
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-top-style: none;
	border-right-style: dashed;
	border-bottom-style: dashed;
	border-left-style: none;
	border-top-color: #FFF;
	border-right-color: #FFF;
	border-bottom-color: #FFF;
	border-left-color: #FFF;
	padding-left: 5px;
	padding-right: 10px;
	padding-top:	10px;
	padding-bottom: 10px;
}


/* normaler Text - Grösse */
.bodytext, #content_middle li {
	font-size: 0.8em;
}
/* für frage stellen form */
#content_middle .bodytext textarea {
	background-image: url(../images/sonstige/bk_gradient3.png);
	background-repeat: no-repeat;
	width: 100%;
	border: 1px solid #898a74;
	font-family: Verdana, Geneva, sans-serif;
	background-color: #d5d5cd;
}

.bodytext label {
	float:left;
	width: 100px;
	font-weight: bold;
	clear: both;
}
.tx-iktschauquestions-pi1 .bodytext span {
	margin-left: 100px;
	display: block;
	}
	
.tx-iktschauquestions-pi1 form .bodytext span {
	margin-left: 0px;
	display:inline;
	}	

#footer {
	float: none;
	height: 30px;
	background-color: #DDDCD5;
	position: absolute;
	bottom:0px;
	width:100%;
	color: #898A74;
	text-align:center;
	padding-top: 10px;
}
#footer a{
	color: #898A74;
	font-size: 0.8em;
	font-weight:bold;
	background-color:#DDDCD5;
	text-decoration:none;
}

div.csc-textpic-left img{
	margin-top:10px;
}

/* Extensions */

/* Themenblätter / Downloads */
.tx-abdownloads-pi1 {
	margin-top:15px;
}

/* Themenblätter / Downloads */
#content_border .tx_abdownloads_catalogView_categoryPath {
	display: none;
}

/* Links */
.tx-ablinklist-pi1 {
	padding-bottom:25px;
}
.tx_ablinklist_listView_linkAddNew {
	margin-top: 5px;
float: right;
font-size: 12px;
text-decoration: none;
border: #000000 thin solid;
}

/* Adressen */
.tx-ttaddress-pi1 {
	margin-top: 15px;
	font-size: 0.8em;
}
/* Adressen - Name */
.fn {
	font-weight: bold;
	width: 200px;
}
/* Adressen - Layout */
ul.vcard {
   list-style-type: none;
   padding: 0;
   margin: 0;
}

li.vcard_inner {
   float: left;
   width: 30px;
   font-weight: bold;
   margin: 0 20px 10px 0;
}
      
li.vcard_outer {
   float: left;
   width: 200px; 
   padding: 0;
   margin: 0 0 10px 0;
}

li.clr {
   display: inline;
   margin: 0;
   padding: 0;
   width: 1px;
}

br.clr {
   clear: left;
   width: 1px;
   font-size:1px;
   margin: 0;
   padding: 0;
   overflow:hidden;
}


/* Spalten */
div.tx-rscontentcolumn-pi1 div.rightcol {
	padding:1%;
	width:47%;
	white-space:normal;
	float:left;
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-right-style: none;
	border-top-color: #FFF;
	border-right-color: #FFF;
	border-bottom-color: #FFF;
	border-left-color: #FFF;
	border-top-style: none;
	border-bottom-style: none;
	border-left-style: solid;
	margin-bottom: 10px;
}

/* Login */
#login div.tx-felogin-pi1, #suche div.tx-macinasearchbox-pi1 {
	background: 	none;
	font-family:	Verdana, Geneva, sans-serif;
	color: 			#898A74;
	font-size:		10px;;
	text-align:		right; 
}

#login div.tx-felogin-pi1 login_input {
}

.loginlink {
text-decoration:	none;
color:				#898A74;
margin-right:		20px;
}
	
	
#login div.tx-felogin-pi1 div.login_button input {
	float:				left;
	font-size:			12px;
	background-color:	#FFF;
	color:				#898a74;
	border:				1px solid #898a74;
	margin-top:			18px;
	margin-left:		4px;
	height:				20px;
}

#login div.tx-felogin-pi1 input, #suche div.tx-macinasearchbox-pi1 #searchform input{
	font-size:			12px;
	background-color:	#FFF;
	color:				#898a74;
	border:				1px solid #898a74;
}

a.link-login {
	font-family:	Verdana, Geneva, sans-serif;
	color: 			#898A74;
	font-size:		0.8em;
}

.logout-text {
	width: 350px;
}
/* Ende Extensions */

#schwarzer_balken {
	width: 951px;
	height: 24px;
	position: relative;
	float: left;
	margin-bottom: -24px;
}
```

CSS für IE8

```css
body   {
	background-color: #d7d7cf;
	padding:0px;
	margin:0px;
	font-family: Verdana, Geneva, sans-serif;
	color: #898A74;

}

#container {
	background-image: url(fileadmin/images/Grafiken_Tschau/Sonstige/bk_gradient1.jpg);
	position:absolute;
	left:50%;
	width:951px;
	margin-left:-475px;
	background-color: #E3E3DE;
	padding-bottom:40px;
}

#head {
	padding:0px;
	margin:0px;
	height:394px;
	
}
#header {
	position:absolute;
	width: 951px;
	height: 398px;
	z-index: 10;
}
/* Bilder CSS */
#home {
	position:absolute;
	width: 33px; 
      	margin-top:	100px;      
	margin-left:	595px;
	z-index: 11;
}
#ausbildung {
	position:absolute;
	width: 33px;  
       	margin-top:	100px;
	margin-left:	628.5px;	
	z-index: 11;
}
#beziehung {
	position:absolute;
	width: 33.5px;  
       	margin-top:	100px;
	margin-left:	662px;
	z-index: 11;
}
#freizeit {
	position:absolute;
	width: 33px;  
       	margin-top:	100px;
	margin-left:	695.5px;
	z-index: 11;
}
#lebenswelt {
	position:absolute;
	width: 33px;  
       	margin-top:	100px;
	margin-left:	729px;
	z-index: 11;
}
#wohlfuehlen {
	position:absolute;
	width: 33px;  
       	margin-top:	100px;
	margin-left:	762.5px;
	z-index: 11;
}
#rechte {
	position:absolute;
	width: 33px;  
	margin-top:	100px;
	margin-left:	796px;
	z-index: 11;
}
#umwelt {
	position:absolute;
	width: 33px;  
        margin-top:	100px;
	margin-left:	828.5px;
	z-index: 11;
	}
#multimedia {
	position:absolute;
	width: 33px;  
       	margin-top:	100px;
	margin-left:	862px;
	z-index: 11;
}
#beratung {
	position:absolute;
	width: 34px;  
	margin-top:	117px;
	margin-left:	898px;
	z-index: 11;

}
#beratung_aktiv {
	position:absolute;
	width: 34px;  
       	margin-top:	102px;
	margin-left:	898px;
	z-index: 11
}
#kanton {
	position:absolute;
	top:5px;
	left: 715px;
	height: 10px;
	width: 170px;
	z-index: 11;
}
#login {
	position:absolute;
	top:0px;
	right:0px;
	height: 95px;
	width: 375px;
	margin-top: 30px;
	z-index: 11;
}

#login_box {
	float:	left;
}
#suche {
	position:absolute;
	top:50px;
	right:20px;
}
#headmenu {
	position: absolute;
	top: 95px;
	right: 0px;
	width: 360px;
	background: #000060;
}

#topmenu {
	padding:0px;
	margin: 0px;
	background-image: url(fileadmin/images/Grafiken_Tschau/Sonstige/schwarzer_balken.png);
}

#content_left{
	background-image: url(fileadmin/images/Grafiken_Tschau/Sonstige/bk_gradient1.jpg);
	margin-top: 30px;
	width: 360px;
	float:left;
}

#content_right{3
	background-image: url(fileadmin/images/Grafiken_Tschau/Sonstige/bk_gradient1.jpg);
	margin-top: 30px;
	width: 360px;
	float:left;
}
/* wenns nur eine Spalte in der Mitte hat */
#content_middle{
    background-image: url(fileadmin/images/Grafiken_Tschau/Sonstige/bk_gradient2.jpg);	
	margin-top: 30px;
	width: 720px;
	float:left;
	margin-right: 5px;
}
#content_border{
	margin-top: 30px;
	float:left;
	width: 225px;
	background-color: #DFDFD9;
}
#content_left .box_left{
	padding-left: 25px;
	padding-right: 10px;
	padding-top:	10px;
	padding-bottom:	10px;	
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-top-style: none;
	border-right-style: dashed;
	border-bottom-style: none;
	border-left-style: none;
	border-top-color: #FFF;
	border-right-color: #FFF;
	border-bottom-color: #FFF;
	border-left-color: #FFF;
	background-image: url(images/Grafiken_Tschau/Sonstige/bk_gradient1.jpg);
	background-repeat: no-repeat;
}
#content_middle .box_left{
	padding-left: 25px;
	padding-right: 10px;
	padding-top:	10px;
	padding-bottom:	10px;	
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-top-style: none;
	border-right-style: dashed;
	border-bottom-style: none;
	border-left-style: none;
	border-top-color: #FFF;
	border-right-color: #FFF;
	border-bottom-color: #FFF;
	border-left-color: #FFF;
	background-image: url(images/Grafiken_Tschau/Sonstige/bk_gradient2.jpg);
	background-repeat: no-repeat;
}
.box_left div.csc-default{

}

#content_right .box_right{
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-top-style: none;
	border-right-style: dashed;
	border-bottom-style: none;
	border-left-style: none;
	border-top-color: #FFF;
	border-right-color: #FFF;
	border-bottom-color: #FFF;
	border-left-color: #FFF;
	padding-left: 10px;
	padding-right: 10px;
	padding-top:	10px;
	padding-bottom:	10px;	
	background-image: url(images/Grafiken_Tschau/Sonstige/bk_gradient1.jpg);
	background-repeat: no-repeat;
}
#content_middle .box_right {
	padding-left: 25px;
	padding-right: 10px;
	padding-top:	10px;
	padding-bottom:	10px;	
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-top-style: none;
	border-right-style: dashed;
	border-bottom-style: none;
	border-left-style: none;
	border-top-color: #FFF;
	border-right-color: #FFF;
	border-bottom-color: #FFF;
	border-left-color: #FFF;
	background-image: url(images/Grafiken_Tschau/Sonstige/bk_gradient2.jpg);
	background-repeat: no-repeat;
}
.box_border {
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-top-style: none;
	border-right-style: dashed;
	border-bottom-style: dashed;
	border-left-style: none;
	border-top-color: #FFF;
	border-right-color: #FFF;
	border-bottom-color: #FFF;
	border-left-color: #FFF;
	padding-left: 5px;
	padding-right: 10px;
	padding-top:	10px;
	padding-bottom: 10px;
}


/* normaler Text - Grösse */
.bodytext, #content_middle li {
	font-size: 0.8em;
}
/* für frage stellen form */
#content_middle .bodytext textarea {
	background-image: url(images/Grafiken_Tschau/Sonstige/bk_gradient3.jpg);
	background-repeat: no-repeat;
	width: 100%;
	border: 1px solid #898a74;
	font-family: Verdana, Geneva, sans-serif;
	background-color: #d5d5cd;
}

.bodytext label {
	float:left;
	width: 100px;
	font-weight: bold;
	clear: both;
}
.tx-iktschauquestions-pi1 .bodytext span {
	margin-left: 100px;
	display: block;
	}
	
.tx-iktschauquestions-pi1 form .bodytext span {
	margin-left: 0px;
	display:inline;
	}	

#footer {
	float: none;
	height: 30px;
	background-color: #DDDCD5;
	position: absolute;
	bottom:0px;
	width:100%;
	color: #898A74;
	text-align:center;
	padding-top: 10px;
}
#footer a{
	color: #898A74;
	font-size: 0.8em;
	font-weight:bold;
	background-color:#DDDCD5;
	text-decoration:none;
}

div.csc-textpic-left img{
	margin-top:10px;
}

/* Extensions */

/* Themenblätter / Downloads */
.tx-abdownloads-pi1 {
	margin-top:15px;
}

/* Themenblätter / Downloads */
#content_border .tx_abdownloads_catalogView_categoryPath {
	display: none;
}

/* Links */
.tx-ablinklist-pi1 {
	padding-bottom:25px;
}
.tx_ablinklist_listView_linkAddNew {
	margin-top: 5px;
float: right;
font-size: 12px;
text-decoration: none;
border: #000000 thin solid;
}

/* Adressen */
.tx-ttaddress-pi1 {
	margin-top: 15px;
	font-size: 0.8em;
}
/* Adressen - Name */
.fn {
	font-weight: bold;
	width: 200px;
}
/* Adressen - Layout */
ul.vcard {
   list-style-type: none;
   padding: 0;
   margin: 0;
}

li.vcard_inner {
   float: left;
   width: 30px;
   font-weight: bold;
   margin: 0 20px 10px 0;
}
      
li.vcard_outer {
   float: left;
   width: 200px; 
   padding: 0;
   margin: 0 0 10px 0;
}

li.clr {
   display: inline;
   margin: 0;
   padding: 0;
   width: 1px;
}

br.clr {
   clear: left;
   width: 1px;
   font-size:1px;
   margin: 0;
   padding: 0;
   overflow:hidden;
}


/* Spalten */
div.tx-rscontentcolumn-pi1 div.rightcol {
	padding:1%;
	width:47%;
	white-space:normal;
	float:left;
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-right-style: none;
	border-top-color: #FFF;
	border-right-color: #FFF;
	border-bottom-color: #FFF;
	border-left-color: #FFF;
	border-top-style: none;
	border-bottom-style: none;
	border-left-style: solid;
	margin-bottom: 10px;
}

/* Login */
#login div.tx-felogin-pi1, #suche div.tx-macinasearchbox-pi1 {
	background: 	none;
	font-family:	Verdana, Geneva, sans-serif;
	color: 			#898A74;
	font-size:		10px;;
	text-align:		right; 
}

#login div.tx-felogin-pi1 login_input {
}

.loginlink {
text-decoration:	none;
color:				#898A74;
margin-right:		20px;
}
	
	
#login div.tx-felogin-pi1 div.login_button input {
	float:				left;
	font-size:			12px;
	background-color:	#FFF;
	color:				#898a74;
	border:				1px solid #898a74;
	margin-top:			18px;
	margin-left:		4px;
	height:				20px;
}

#login div.tx-felogin-pi1 input, #suche div.tx-macinasearchbox-pi1 #searchform input{
	font-size:			12px;
	background-color:	#FFF;
	color:				#898a74;
	border:				1px solid #898a74;
}

a.link-login {
	font-family:	Verdana, Geneva, sans-serif;
	color: 			#898A74;
	font-size:		0.8em;
}

.logout-text {
	width: 350px;
}
/* Ende Extensions */

#schwarzer_balken {
	width: 951px;
	height: 24px;
	position: relative;
	float: left;
	margin-bottom: -24px;
}
```

Zitat Frage3: **Ich habe mich mit der Option niceText befasst, und denke dass sie abhilfe schaffen kann, allerdings wird einfach kein Text mehr angezeigt, sobald ich sie aktiviere. Woran kann das liegen?**

Hm.. dieses Problem hatte ich auch mal.. ich habe

```typoscript
niceText = 0
```

gesetzt versuchs mal so! Kannst dich ja wenns nicht geht wieder melden.

### [#5](https://www.typo3.net/d/103000-design-wird-im-ie-nicht-richtig-dargestellt/5) · etux · 2010-12-21

> **nitramf schrieb:**
>
> Im Firefox wird bei mir alles korrekt dargestellt, im Internet-Explorer ist es die reinste Katastrophe.

Deine CSS-Formatierung ist grundsätzlich fehlerhaft (für alle Browser).

Lesestoff: <http://little-boxes.de/little-boxes-teil1-online.html>

> **nitramf schrieb:**
>
> Können andere HTML Doctypes ….. da helfen?

Natürlich. (Suchbegriffe: DOCTYPE, Quircks-Modus, … )
Die CSS-Formatierung muss Du aber trotzdem überarbeiten.

### [#6](https://www.typo3.net/d/103000-design-wird-im-ie-nicht-richtig-dargestellt/6) · etux · 2010-12-21

> **nitramf schrieb:**
>
> Im Firefox wird bei mir alles korrekt dargestellt, im Internet-Explorer ist es die reinste Katastrophe.

Die Darstellung entspricht der CSS-Formatierung. Und sie ist (für alle Browser) fehlerhaft.

Lesestoff: <http://little-boxes.de/little-boxes-teil1-online.html>

> **nitramf schrieb:**
>
> Können andere HTML Doctypes ... da helfen?

Natürlich.
Lesestoff: <http://carsten-protsch.de/zwischennetz/doctype/einleitung.html#modus>

### [#7](https://www.typo3.net/d/103000-design-wird-im-ie-nicht-richtig-dargestellt/7) · ISS · 2010-12-21

Am einfachsten ist es wenn du sicher geen willst das deine CSS- und HTML-Dateien richtig gelesen werden geh auf <http://validator.w3.org/#validate_by_input> für dein HTML zu validieren und auf <http://jigsaw.w3.org/css-validator/> für dein CSS zu validieren.

Ouou ich entschuldige mich.. hatte bei Doctyps was falsches im Kopf

Gruss,
ISS

### [#8](https://www.typo3.net/d/103000-design-wird-im-ie-nicht-richtig-dargestellt/8) · nitramf · 2010-12-21

Ich glaube der Post hat das Forum gesprengt :D

Könntest du den Teil mit dem niceText bitte nochmal posten?

Mit Glück gehts ja mit diesem Post wieder, vielleicht auch nicht...

### [#9](https://www.typo3.net/d/103000-design-wird-im-ie-nicht-richtig-dargestellt/9) · ISS · 2010-12-23

> **nitramf schrieb:**
>
> Könntest du den Teil mit dem niceText bitte nochmal posten?

Da

```typoscript
niceText = 0
```

---

Quelle: „Design wird im IE nicht richtig dargestellt“, typo3.net, https://www.typo3.net/d/103000-design-wird-im-ie-nicht-richtig-dargestellt
Beiträge von Mitgliedern des Forums. Bitte mit Link auf die Diskussion zitieren.