Zum Inhalt springen

Darstellung in Firefox/Opera/Safari sind eine Katastrophe

Erstellt am 24. Juli 2007 · 2 Antworten · letzte Antwort am 24. Juli 2007

Tags: HTML & CSS, Frage

4kussin ·

Hallo

also ich hab letzte Woche angefangen mit Typo zu arbeiten (Projekt: http://www.cndk.de), klappt eigentlich auch ganz gut, außer das meine Designvorlage (HTML-Tmplate), welches ich mit Dreamweaver erstellt habe, nicht funktioniert.
Nicht funktioniert, bezieht sich nur auch Typo. Die erstellte Vorlage klappte in allen gängigen Browsern.

Zur Fehlerbegutachtung, siehe obige Domain.

Als ich aber die Vorlage inkl. dem CSSheet in Typo geladen hatte, klappte Sie nicht mehr (im IE), so dass ich das CSS dementsprechend abgeändert habe (siehe zweites Sheet).

Frage am Ende!!!

Siehe Dreamwever-Version (CSS):

/* ++++++++++++++++++++++++++++++++++++  BODY Definitionen ++++++++++++++++++++++++++++++++++++ */

A
{
	color: #FFFFFF;
	text-decoration: none;
}

A:hover
{
	text-decoration: underline;
}

BODY
{
	background-color: #00FF00;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #FFFFFF;
}

/* +++++++++++++++++++++++++++++++++++++  ID Definitionen +++++++++++++++++++++++++++++++++++++ */

#dardarstellungscontainer
{
	left: 65px;
	top: 15px;
	width: 800px;
	height: 450px;
	position: absolute;
	z-index: 1;
	border: #FFFFFF 15px solid;
	padding: 15px;
	overflow: hidden;
}

#navigation
{
	position: absolute;
	width: 250px;
	height: 200px;
	z-index: 2;
	overflow: hidden;
}

#logo
{
	position: absolute;
	width: 120px;
	height: 120px;
	z-index: 3;
	left: 540px;
	overflow: hidden;
}

#firma
{
	position: absolute;
	width: 155px;
	height: 120px;
	z-index: 4;
	left: 675px;
	overflow: hidden;
}

#inhalt
{
	position: absolute;
	width: 800px;
	height: 235px;
	z-index: 5;
	top: 240px;
	overflow: auto;
}

#copyright
{
	position: absolute;
	width: 175px;
	height: 25px;
	z-index: 6;
	top: 530px;
	overflow: hidden;
	left: 65px;
}

#quicklinks
{
	position: absolute;
	width: 400px;
	height: 25px;
	z-index: 7;
	top: 530px;
	overflow: hidden;
	left: 525px;
	text-align: right;
}

/* +++++++++++++++++++++++++++++++++++  CLASS Definitionen ++++++++++++++++++++++++++++++++++++ */

.navigation
{
	margin: 0px;
	font-size: 24px;
	font-weight: bold;
}

.firma
{
	margin: 0px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 24px;
	font-weight: bold;
}

TYPO3 - CSS für Internet Explorer

/* ++++++++++++++++++++++++++++++++++++  BODY Definitionen ++++++++++++++++++++++++++++++++++++ */

A
{
	color: #FFFFFF;
	text-decoration: none;
}

A:hover
{
	text-decoration: underline;
}

BODY
{
	background-color: #00FF00;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #FFFFFF;
}

H1
{
	font-size: 16px;
	font-weight: bold;
}

H2
{
	font-size: 12px;
	font-weight: bold;
	margin: 0px 0px 6px;
}

P
{
	margin: 0px 0px 6px;
}

/* +++++++++++++++++++++++++++++++++++++  ID Definitionen +++++++++++++++++++++++++++++++++++++ */

#dardarstellungscontainer
{
	left: 65px;
	top: 15px;
	width: 860px;
	height: 515px;
	position: absolute;
	z-index: 1;
	border: #FFFFFF 15px solid;
	padding: 15px;
	overflow: hidden;
}

#navigation
{
	position: absolute;
	width: 250px;
	height: 200px;
	z-index: 2;
	overflow: hidden;
}

#logo
{
	position: absolute;
	width: 120px;
	height: 120px;
	z-index: 3;
	left: 540px;
	overflow: hidden;
}

#firma
{
	position: absolute;
	width: 140px;
	height: 120px;
	z-index: 4;
	left: 675px;
	overflow: hidden;
}

#inhalt
{
	position: absolute;
	width: 800px;
	height: 240px;
	z-index: 5;
	top: 230px;
	overflow: auto;
}

#copyright
{
	position: absolute;
	width: 175px;
	height: 25px;
	z-index: 6;
	top: 535px;
	overflow: hidden;
	left: 65px;
}

#quicklinks
{
	position: absolute;
	width: 400px;
	height: 25px;
	z-index: 7;
	top: 535px;
	overflow: hidden;
	left: 525px;
	text-align: right;
}

/* +++++++++++++++++++++++++++++++++++  CLASS Definitionen ++++++++++++++++++++++++++++++++++++ */

.navigation
{
	margin: 0px;
	font-size: 18px;
	font-weight: bold;
}

.firma
{
	margin: 0px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 24px;
	font-weight: bold;
}

Kann mir vielleicht einer sagen wo der Fehler ist bzw. ob ich bei Typo etwas einstellen muss?

Gruß Daniel

jenses ·

vermutlich stimmt der doktype nicht überein,
vergleiche einfach mal Dreamweaver- und TYPO3-Quelltext.

4kussin ·

Hi Jenses!

jenses schrieb

vermutlich stimmt der doktype nicht überein

Du hattest Recht, Dreamweaver hatte xhtml und TYPO hatte html!

Für alle die Wissen wollen, wie man TYPOs Doctype ändert, hier eine einfache Lösung:

Man muss nur folgenden TypoScript-Code in das ROOT-Template aufnehmen:

### PAGE-Objekt erstellen, falls keins besteht
page = PAGE
page {
  
  ### PAGE-Objekt konfigurieren
  config { 
    doctype = xhtml_11 
    xmlprologue = none
  }
}

Vielen Dank noch einmal,
Gruß Daniel