XSL Stylesheet und CSS Box Modell von romy, 24.06.2009 11:49

XSL Stylesheet und CSS Box Modell

Kaschi 19.06.2009 16:47

Hallo,

ich bin gerade dabei, mich in XML und XSLT einzuarbeiten und komme momentan einfach nicht weiter:

1. Ich habe eine XML Datei, in die ich eine DTD und ein XSLT Stylesheet eingebunden habe
2. In dem XSLT Stylesheet definiere ich, dass mir der Inhalt der XML Datei in einer DIV Box angezeigt werden soll.
3. In das XSLT Stylesheet habe ich ein CSS Stylesheet eingebunden, dass mir meine DIV Boxen definiert.

Mein Problem ist nun folgendes:

Im IE7:
Die XML Seite wird angezeigt und der Inhalt ausgegeben. Die DIV Box ist aber nach rechts verschoben. Der Hoover Effekt, den ich für 5 Boxen definiert habe, funktioniert nicht.

Firefox3:
Der Inhalt der XML Datei wird angezeigt - allerdings komplett OHNE Formatierung, d.h. ohne DIV Boxen, Hintergrund usw. (Halt einfach nur der Text)

Opera:
Hier wird die Seite soweit korrekt angezeigt.

Könntet ihr euch den Code einmal ansehen, und mir bitte sagen, was ich falsch mache? Warum wird die Seite nicht in jedem Browser korrekt angezeigt? Die reine HTML Version (also komplett ohne XML) mit der selben CSS Datei wird in allen drei Browsern korrekt angezeigt - das möchte ich nun auch mit XML erreichen.

Hier die XML Datei

  
<?xml version="1.0"?>  
<!DOCTYPE Beschreibung SYSTEM "../dtd/dtd.dtd">  
<?xml-stylesheet type="text/xsl" href="../xsl/style.xsl" ?>  
<Beschreibung>  
<Text>  
<Ueberschrift1 id="ueberschrift1">blabla</Ueberschrift1>  
<Ueberschrift2 id="ueberschrift2">blabla2</Ueberschrift2>  
<Absatz id="absatz">absatz1/Absatz>  
<Absatz id="absatz2">absatz2</Absatz>  
</Text>  
</Beschreibung>

Hier die XSL Datei

  
<?xml version="1.0" encoding="iso-8859-1"?>  
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">  
  
<xsl:template match="/">  
<html>  
<body>  
<head>  
<link rel="stylesheet" type="text/css" href="../../css/layout.css" />  
<title>Titel</title>  
</head>  
<div id="haupt">  
 <div id="title"></div>  
 <div id="title2"></div>  
 <div id="title3"></div>  
 <div id="left"></div>  
  
<div id="content">  
  
<xsl:for-each select="Beschreibung/Text/Ueberschrift1">  
<xsl:value-of select="." />  
</xsl:for-each>  
  
<xsl:for-each select="Beschreibung/Text/Ueberschrift2">  
<xsl:value-of select="." />  
</xsl:for-each>  
  
<xsl:for-each select="Beschreibung/Text/Absatz">  
<xsl:value-of select="." />  
</xsl:for-each>  
  
</div>  
<div id="footer"></div>  
</div>  
</body>  
</html>  
</xsl:template>  
  
</xsl:stylesheet>

Und zum Schluss die CSS Datei

  
body  
{  
 font-family:Verdana;  
 font-size:12px;  
 background-color:#bdbec6;  
 text-align:center;  
 margin:0px;  
}  
  
#link1:hover, #link2:hover, #link3:hover, #link4:hover, #link5:hover  
{  
background-image: url("../layout/selektion3.gif");  
background-repeat:no-repeat;  
  
}  
#haupt {  
width:1024px;  
height:768px;  
margin:0px auto;  
text-align:left;  
background-color:#bdbec6;  
border:1px solid #000000;  
}  
  
#title {  
height:58px;  
background-color:#7b7d8e;  
background-image: url("../layout/title.jpg");  
border-bottom:0px solid #000;  
background-repeat:no-repeat;  
}  
#title2 {  
height:34px;  
background-color:#7b7d8e;  
background-image: url("../layout/title2.jpg");  
border-bottom:0px solid #000;  
background-repeat:no-repeat;  
}  
#title3 {  
height:20px;  
background-color:#7b7d8e;  
background-image: url("../layout/title3.jpg");  
border-bottom:0px solid #000;  
background-repeat:no-repeat;  
}  
#left {  
background-color:#bdbec6;  
width:172px;  
height:621px;  
float:left;  
background-image: url("../layout/menue.jpg");  
background-repeat:no-repeat;  
}  
#link1 {  
margin-left:15px;  
padding-top:6px;  
width:146px;  
height:30px;  
float:left;  
border:0px;  
position:absolute;  
top:235px  
}  
#link2 {  
margin-left:15px;  
padding-top:6px;  
width:146px;  
height:30px;  
float:left;  
border:0px;  
position:absolute;  
top:285px  
}  
#link3 {  
margin-left:15px;  
padding-top:6px;  
width:146px;  
height:30px;  
float:left;  
border:0px;  
position:absolute;  
top:330px  
}  
#link4 {  
margin-left:15px;  
padding-top:6px;  
width:146px;  
height:30px;  
float:left;  
border:0px;  
position:absolute;  
top:375px  
}  
#link5 {  
margin-left:15px;  
padding-top:6px;  
width:146px;  
height:30px;  
float:left;  
border:0px;  
position:absolute;  
top:420px  
}  
  
#content {  
border:0px solid #efeff7;  
background-color:#efeff7;  
width:832px;  
height:621px;  
float:right;  
padding:0px 10px;  
background-image: url("../layout/inhalt.jpg");  
background-repeat:no-repeat;  
}  
#footer {  
clear:both;  
height:35px;  
background-color:#7b7d8e;  
background-image: url("../layout/footer.jpg");  
border-bottom:0px solid #000;  
background-repeat:no-repeat;  
}

Ich komme einfach nicht mehr weiter und suche schon seit Stunden im Internet und in Büchern nach der Lösung für mein Problem.

Beitrag melden

– Informationen zu den Bewertungsregeln