✔ Problem mit DIV und Tabelle

Q

QUEST08

Erfahrenes Mitglied
Hi CSS-Gruppe,

habe ein Problem, welches ich nicht lösen kann. Bin bereits den ganzen Tag dran, leider komme ich nicht weiter.

Der Grund: Unterschiedliche Darstellung zwischen IE und FF.

Folgender Code ist im FF korrekt:

HTML: 
<!-- CSS -->
<style type="text/css" media="screen">
#slider1 {
    width: 710px; /* important to be same as image width */
    height: 300px; /* important to be same as image height */
    position: relative; /* important */
	overflow: hidden; /* important */
}

#slider1Content {
    width: 710px; /* important to be same as image width or wider */
    position: absolute;
	top: -16;
	margin-left: -40;
}
.slider1Image {
    float: left;
    position: relative;
	display: none;
}
.slider1Image span {
    position: absolute;
	font: 10px/15px Arial, Helvetica, sans-serif;
    padding: 10px 13px;
    width: 694px;
    background-color: #000;
    filter: alpha(opacity=70);
    -moz-opacity: 0.7;
	-khtml-opacity: 0.7;
    opacity: 0.7;
    color: #fff;
    display: none;
}
.clear {
	clear: both;
}
.slider1Image span strong {
    font-size: 14px;
}
.left {
	top: 0;
    left: 0;
	width: 140px !important;
	height: 254px;
}
.right {
	right: 0;
	bottom: 0;
	width: 140px !important;
	height: 254px;
}
ul { list-style-type: none;}
</style>
<!-- JavaScripts-->
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/s3Slider.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $('#slider1').s3Slider({
            timeOut: 4000 
        });
    });
</script>
<div id="slider1" style="float: left">
        <ul id="slider1Content">
<?php
						
error_reporting(E_ALL);

include "system_files/connection.php";

$result = @mysql_query("SELECT * FROM `page_bildwechsel` ORDER BY RAND()") or die(mysql_error());
while ($row = mysql_fetch_array ($result)) 
{

echo "<li class=\"slider1Image\">";
echo "<img src=\"images_club/".$row['bild']."\" alt=\"test\"/>";
echo "<span class=\"".$row['ausrichtung']."\"><strong><font color=\"#C0D22B\">".$row['titel']."</font></strong><br>".$row['text']."</span></li>";

};

mysql_close($mysql_ce);

?><div class="clear slider1Image"></div>
        </ul>
    </div>

Das ganze ist eine Slideshow, wobei die Bilder aus der Datenbank kommen.
Ich habe hier
HTML: 
#slider1Content {
    width: 710px; /* important to be same as image width or wider */
    position: absolute;
	top: -16;
	margin-left: -40;
}
Minusangaben. Wenn ich diese (ursprünglich 0) wieder auf 0 setze, passt es im IE, aber im FF nicht mehr.

Das ganze soll sich links an <td> anordnen, wobei jeweils die tabelle zu weit links und zu weit oben ist. also je nachdem wo es nicht klappt. kann mir jemand helfen?
 
Hi,

bist du bitte so gut, hier den geparsten PHP-Code, also was der Browser da als HTML-Code ausgibt, zu posten - wir sind hier schliessslich nicht im PHP-Forum.

Ein Link zur Seite wäre hier aber auch ganz hilfreich, um die Slideshow direkt und live in Aktion sehen zu können.

Was da zumindest aber schon mal direkt ins Auge sticht, sind die fehlenden Angaben zur Maßeinheit (px).

mfg Maik
 
Hi,

also hier mal ein Beispiel:

URL GELÖSCHT

man sieht es ganz gut, wenn man im IE den text beobachtet, der reinfährt.
 
Zuletzt bearbeitet:
Du hast es lediglich versäumt, die voreingestellten Polsterungseigenschaften des Listenelements auf null zurücksetzen, die in den Browsern unterschiedlich ausfallen, washalb du mit den negativen Werten herumhantieren musstest.

CSS: 
#slider1Content {
margin-left:0;
position:absolute;
top:0;
width:710px;
}

ul {
list-style-type:none;
margin:0;
padding:0;
}


mfg Maik
 
hi maik,

wo setze ich das rein? meinst du die zwei atribute bei

Code: 
ul { list-style-type: none;}



Liebe Grüße,
QUEST08
 
Jo. Das geht aus meinem CSS-Code aber doch klar hervor.

Ansonsten im Zweifel einfach "copy & paste" :)

mfg Maik
 
Code: 
<!-- CSS -->
<style type="text/css" media="screen">
#slider1 {
    width: 710px; /* important to be same as image width */
    height: 300px; /* important to be same as image height */
    position: relative; /* important */
	overflow: hidden; /* important */
}

#slider1Content {margin-left:0;position:absolute;top:0;width:710px;} ul {list-style-type:none;margin:0;padding:0;}

.slider1Image {
    float: left;
    position: relative;
	display: none;
}
.slider1Image span {
    position: absolute;
	font: 10px/15px Arial, Helvetica, sans-serif;
    padding: 10px 13px;
    width: 694px;
    background-color: #000;
    filter: alpha(opacity=70);
    -moz-opacity: 0.7;
	-khtml-opacity: 0.7;
    opacity: 0.7;
    color: #fff;
    display: none;
}
.clear {
	clear: both;
}
.slider1Image span strong {
    font-size: 14px;
}
.left {
	top: 0;
    left: 0;
	width: 140px !important;
	height: 254px;
}
.right {
	right: 0;
	bottom: 0;
	width: 140px !important;
	height: 254px;
}
ul { list-style-type: none;}

oben ist jetzt der eingefügte code von dir. jedoch gibt es keine änderungen.
 
Klar, du musst schon deine Regelblöcke gegen meine austauschen, oder deine entsprechend abändern, da meine von deinen wieder überschrieben werden, und somit alles beim Alten bleibt :)

mfg Maik
 
sorry, meinte ich auch. ist nun ersetzt, jedoch immernoch das gleiche problem. im FF klappt es, aber im IE nicht.
 
Kannst du die Änderung mal online aktualisieren? Dort ist im CSS nämlich noch alles beim Alten.

mfg Maik
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück