Hi Typo 3ler
ich bitte um eine Erklärung für folgendes Problem:
Habe eine Fotogalerie mittels CSS erstellt, deren Darstellung lokal auf dem Apachen im Firefox und IE gleich aussieht.
Wenn ich aber nun diesen Code (Seiteninhalt anlegen/HTML Code)auf den Typo3 Server stelle, unterscheiden sich beide Darstellungen sehr. Da stimmt sogar die Darstellung im Firefox nicht mehr ganz, die im IE haut überhaupt nicht mehr hin.
Könnte mir denken, dass ich "Css Styled Content" überschreiben muß, wüßte aber nicht wirklich wie.
Hier der Code den ich eingefügt habe:
<style type="text/css">
/* needed for IE to make :active state work first time */
a, a:visited {color:#000;}
/* Thumbnails */
a.gallery, a.gallery:visited {
display:block;
display:inline-block;
color:#000;
text-decoration:none;
border:1px solid #000;
width:71px;
height:69px;
float:left;
margin:4px;
z-index:50;
}
a.slidea {background:url(http://stot.linux3.webhome.at/fotos/kfz/thumb/thumb-kfz-01.jpg);}
a.slideb {background:url(http://stot.linux3.webhome.at/fotos/kfz/thumb/thumb-kfz-02.jpg);}
a.slidec {background:url(http://stot.linux3.webhome.at/fotos/kfz/thumb/thumb-kfz-03.jpg);}
a.slided {background:url(http://stot.linux3.webhome.at/fotos/kfz/thumb/thumb-kfz-04.jpg);}
a.slidee {background:url(http://stot.linux3.webhome.at/fotos/kfz/thumb/thumb-kfz-05.jpg);}
a.slidef {background:url(http://stot.linux3.webhome.at/fotos/kfz/thumb/thumb-kfz-06.jpg);}
a.slideg {background:url(http://stot.linux3.webhome.at/fotos/kfz/thumb/thumb-kfz-07.jpg);}
a.slideh {background:url(http://stot.linux3.webhome.at/fotos/kfz/thumb/thumb-kfz-08.jpg);}
a.slidei {background:url(http://stot.linux3.webhome.at/fotos/kfz/thumb/thumb-kfz-09.jpg);}
a.slidej {background:url(http://stot.linux3.webhome.at/fotos/kfz/thumb/thumb-kfz-10.jpg);}
a.slidek {background:url(http://stot.linux3.webhome.at/fotos/kfz/thumb/thumb-kfz-11.jpg);}
a.slidel {background:url(http://stot.linux3.webhome.at/fotos/kfz/thumb/thumb-kfz-12.jpg);}
a.slidem {background:url(http://stot.linux3.webhome.at/fotos/kfz/thumb/thumb-kfz-13.jpg);}
a.sliden {background:url(http://stot.linux3.webhome.at/fotos/kfz/thumb/thumb-kfz-14.jpg);}
a.gallery em, a.gallery span {
display:none;
}
a.gallery:hover {
border:1px solid #fff;
}
/* Gallery all */
#container_top {
position:relative;
width:600px;
height:500px;
background:white;
border:0px solid #a49188;
margin:1em auto;
}
#container_top img {
border:0; bottom: 0px;
}
#container_top .thumbs {
position:absolute;
left:0;
top:0;
}
/*
#container_top a.gallery:hover span {
display:block;
position:absolute;
width:600px;
height:50px;
top:110px;
left:5px;
padding:5px;
font-style:italic;
color:#fff;
z-index:100;
border:0px solid #a49188;
}
*/
#container_top a.gallery:hover span:first-line {
font-style:normal;
font-weight:bold;
font-size:1.1em;
color:#000;
}
#container_top a.gallery:active, #container_top a.gallery:focus {
border:1px solid #000;
}
#container_top a.gallery:active em, #container_top a.gallery:focus em {
display:block;
position:absolute;
width:480px;
height:300px;
top:196px;
left:50px;
color:#000;
border:0px solid red;
z-index:50;
background-color: #ffffff;
text-align: center;
bottom: 0px;
}
#container_top a.gallery:active em img, #container_top a.gallery:focus em img {
position: absolute;
bottom: 0;
left: 40px;
}
#container_top h1 {
clear:both;
margin:0;
padding-top:400px;
text-align:center;
font-family: georgia, "times new roman", serif;
font-size:3em;
font-weight:normal;
color:#fff;
}
#container_top h1 em {
font-size:0.6em;
color:#000;
}
</style>
<div id="container_top">
<div class="thumbs">
<a class="gallery slidea" href="#nogo"><em><img src="http://stot.linux3.webhome.at/fotos/kfz/kfz-01.jpg" alt="" /></em></a>
<a class="gallery slideb" href="#nogo"><em><img src="http://stot.linux3.webhome.at/fotos/kfz/kfz-02.jpg" alt="" /></em></a>
<a class="gallery slidec" href="#nogo"><em><img src="http://stot.linux3.webhome.at/fotos/kfz/kfz-03.jpg" alt="" /></em></a>
<a class="gallery slided" href="#nogo"><em><img src="http://stot.linux3.webhome.at/fotos/kfz/kfz-04.jpg" alt="" /></em></a>
<a class="gallery slidee" href="#nogo"><em><img src="http://stot.linux3.webhome.at/fotos/kfz/kfz-06.jpg" alt="" /></em></a>
<a class="gallery slidef" href="#nogo"><em><img src="http://stot.linux3.webhome.at/fotos/kfz/kfz-07.jpg" alt="" /></em></a>
<a class="gallery slideg" href="#nogo"><em><img src="http://stot.linux3.webhome.at/fotos/kfz/kfz-08.jpg" alt="" /></em></a>
<a class="gallery slideh" href="#nogo"><em><img src="http://stot.linux3.webhome.at/fotos/kfz/kfz-09.jpg" alt="" /></em></a>
<a class="gallery slidei" href="#nogo"><em><img src="http://stot.linux3.webhome.at/fotos/kfz/kfz-10.jpg" alt="" /></em></a>
<a class="gallery slidej" href="#nogo"><em><img src="http://stot.linux3.webhome.at/fotos/kfz/kfz-11.jpg" alt="" /></em></a>
<a class="gallery slidek" href="#nogo"><em><img src="http://stot.linux3.webhome.at/fotos/kfz/kfz-12.jpg" alt="" /></em></a>
<a class="gallery slidel" href="#nogo"><em><img src="http://stot.linux3.webhome.at/fotos/kfz/kfz-13.jpg" alt="" /></em></a>
<a class="gallery slidem" href="#nogo"><em><img src="http://stot.linux3.webhome.at/fotos/kfz/kfz-14.jpg" alt="" /></em></a>
<a class="gallery sliden" href="#nogo"><em><img src="http://stot.linux3.webhome.at/fotos/kfz/kfz-15.jpg" alt="" /></em></a>
</div>
<table width="600" height="500" cellspacing="0" cellpadding="0" border="0">
<tr>
<td width="47" valign="bottom">
<img src="http://stot.linux3.webhome.at/fotos/texte-website.jpg" alt="" />
<td align="center" valign="bottom" height="300">
<img src="http://stot.linux3.webhome.at/fotos/kfz/kfz-01.jpg" width="367" alt="" />
</td>
</tr>
</table>
</div>
Da mein TS Wissen sehr bescheiden ist, bitte ich Euch um Eure Hilfe.
Danke im voraus