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
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:
# 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
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:
# 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;
}
###############################################