Hallo zusammen,
bin gerade dabei eine Website zusammen zu basteln. Und bin nun auf ein eher wenigen schönen Fehler(?) gestossen. Der IE zeigt die Startseite anders an wie der Firefox (FF zeigt es korrekt an!).
Habe diverse Bilder in einer Tabelle die ich in einem DIV-Layer positioniere. Hinter den Bildern ist jeweils immer noch ein Background hinterlget. Dieser wird allerdings nur bei FF angezeigt. Der IE reagiert auf nichts was ich bis jetzt versucht habe.
Habe für den IE schon einen separaten Teil in der CSS angelegt damit ich mir die FF Variante nicht kaputt mache. Hab hier die Sache wieder gleich gestellt, da meine Versuche alle nichts gebracht hatten.
Ich habe jetzt schon 2 Stunden im Netz gesucht und diverse Unterschiede was padding angeht rausgefunden, aber irgendwie hab ich noch keine passende Lösung gefunden, die die Darstellung auch im IE korrigiert.
Hat jemand eine Idee was ich eventuell noch alles versuchen könnte? Oder am besten eine Lösung parat?
Danke schonmal im Voraus!!!
Nachtrag:
Wenn ich die Padding Angabe direkt in HTML angebe, sprich
dann funktioniert es auch im IE. Aber das wollte ich eigentlich nicht. Wo bitte ist der Unterschied, dass der IE es nicht gebacken bekommt, die Sachen aus der CSS-Datei ordentlich anzuzeigen?
bin gerade dabei eine Website zusammen zu basteln. Und bin nun auf ein eher wenigen schönen Fehler(?) gestossen. Der IE zeigt die Startseite anders an wie der Firefox (FF zeigt es korrekt an!).
Habe diverse Bilder in einer Tabelle die ich in einem DIV-Layer positioniere. Hinter den Bildern ist jeweils immer noch ein Background hinterlget. Dieser wird allerdings nur bei FF angezeigt. Der IE reagiert auf nichts was ich bis jetzt versucht habe.
.shadow
{
background: url(shadow_small_start.png) no-repeat bottom left;
padding: 4px 7px 17px 7px;
}
a .shadow
{
border: 0px;
filter:alpha(opacity=75);
-moz-opacity:0.75;
opacity:0.75;
-khtml-opacity:0.75;
}
a:hover .shadow
{
border: 0px;
filter:alpha(opacity=100);
-moz-opacity:1.00;
opacity:1.00;
-khtml-opacity:1.00;
}
<!--[if gte IE 5]>
.shadow
{
background-image: url(shadow_small_start.png) no-repeat bottom left;
padding: 4px 7px 17px 7px;
}
a .shadow
{
border: 0px;
filter:alpha(opacity=75);
-moz-opacity:0.75;
opacity:0.75;
-khtml-opacity:0.75;
}
a:hover .shadow
{
border: 0px;
filter:alpha(opacity=100);
-moz-opacity:1.00;
opacity:1.00;
-khtml-opacity:1.00;
}
<![endif]-->
{
background: url(shadow_small_start.png) no-repeat bottom left;
padding: 4px 7px 17px 7px;
}
a .shadow
{
border: 0px;
filter:alpha(opacity=75);
-moz-opacity:0.75;
opacity:0.75;
-khtml-opacity:0.75;
}
a:hover .shadow
{
border: 0px;
filter:alpha(opacity=100);
-moz-opacity:1.00;
opacity:1.00;
-khtml-opacity:1.00;
}
<!--[if gte IE 5]>
.shadow
{
background-image: url(shadow_small_start.png) no-repeat bottom left;
padding: 4px 7px 17px 7px;
}
a .shadow
{
border: 0px;
filter:alpha(opacity=75);
-moz-opacity:0.75;
opacity:0.75;
-khtml-opacity:0.75;
}
a:hover .shadow
{
border: 0px;
filter:alpha(opacity=100);
-moz-opacity:1.00;
opacity:1.00;
-khtml-opacity:1.00;
}
<![endif]-->
<div style="position: absolute; left: 0px; top: 360px; z-index: 1;>
<table cellpadding="1">
<tr>
<td>
<a href="#"><img src="BILD01.jpg" class="shadow" border="0"></a>
</td>
</tr>
</table>
</div>
<table cellpadding="1">
<tr>
<td>
<a href="#"><img src="BILD01.jpg" class="shadow" border="0"></a>
</td>
</tr>
</table>
</div>
Hat jemand eine Idee was ich eventuell noch alles versuchen könnte? Oder am besten eine Lösung parat?
Danke schonmal im Voraus!!!
Nachtrag:
Wenn ich die Padding Angabe direkt in HTML angebe, sprich
<td style="background: url(pics/shadow_small_start.png) no-repeat bottom left; padding: 4px 7px 17px 7px;">[...]</td>
Kommentar