PHP vs. CSS (IE vs Mozilla)

Grafixboy

Erfahrenes Mitglied
Hi Leute habe auf der cssPlay seite folgendes gefunden:

...das da

nun wollte ich das aber dynamisch gestalten klappt auch perfekt im Mozilla aber nicht im Internet Explorer.

...hier mein versuch der nicht im IE funktioniert
nicht wundern bei meinem Beispiel haben die Bilder (nicht die thumbs) nicht das richtige Endformat von 640x480.

Kann mir da jemand helfen ?

PHP:
<?
$aset=0;
$archive="pic/thumbs/";
//$pics=directory('pics','jpg,JPG,JPEG,jpeg,png,PNG');
?>
<!--[if lte IE 6]>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<![endif]-->
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<link rel="stylesheet" media="all" type="text/css" href="css/demos.css" />
<link rel="stylesheet" media="all" type="text/css" href="css/slideshow.css" />
<!--[if lte IE 6]>
<link rel="stylesheet" media="all" type="text/css" href="css/slideshowie.css" />
<![endif]-->
<title></title>
<meta name="author" content="grafixboy">
</head>
<body text="#000000"  link="#FF0000" alink="#FF0000" vlink="#FF0000">
<font color="#FFFFFF"><b>&nbsp;&nbsp;</b></font>
<div class="menu2">
<dl>
<dt>CSS PLaY ~ SLIDE SHOW ~ COPY</dt>
<dd>Hover the mouse over Set 1, Set 2 or Set 3 above to drop down the projector screen and show a 4x4 array of photographic slides in both portrait and landscape format.</dd>
<dd>Click the mouse on any of these photographic slides to see the 640 x 480 pixel full size photograph projected onto the screen.<br />NOTE: Opera and Safari users will need to keep the mouse button pressed to see the image.</dd>
<dd>To close the fullsize photograph click anywhere on the grey projection screen. Opera and Safari users just release the mouse button.</dd>
<dd>Moving the mouse off the grey projector screen will close the slide selection. <? echo "Bilder"?></dd>
</dl>
<ul>
<? $verzeichnis = dir("$archive");
while($datei = $verzeichnis->read()){
if($datei!="." && $datei!=".."){$anz2++;
if(!is_dir($datei)){

if(bcmod($i,16)==0){

$aset++;

echo <<<END

<ul>
<li><a href="#nogo">Set $aset
<!--[if IE 7]><!-->
</a>
<!--<![endif]-->
<table><tr><td>
<li>
END;
}
$i++;
/*else{
echo <<<END


END;
}*/
$img = @imagecreatefromjpeg("pic/thumbs/".$datei);

if ($img) {
 $img_height = imageSY($img);
 $img_width = imageSX($img);
  ImageDestroy($img);
}
if($img_width > $img_height){
  $format = "horiz";
  }else if($img_width < $img_height){
  $format = "vert";
  }else{$format = "horiz";}
#echo "h: " . $img_height. " w: ".$img_width;
echo "<a class=\"".$format."\" href=\"#portrait$i\"><span><img src=\"pic/thumbs/".$datei."\" title=".$datei."></span><em><img src=\"pic/".$datei."\" /></em></a>\n";
if(bcmod($i,4)==0){
$j++;
	if(bcmod($j,4)==0){
echo <<<END
</li>
</ul>

</td></tr></table>

<!--[if lte IE 6]>
</a>
<![endif]-->

</li>

END;
	}else{
	echo "<span class=\"clr\"></span>\n";}
}
}

}}
?>
	</li>
	</ul>

</td></tr></table>

<!--[if lte IE 6]>
</a>
<![endif]-->

</li>


</ul>
<br class="clear" />
<!--<div class="clear">&nbsp;</div>-->
</div>
</body>
</html>

Vielen Dank für eure Hilfe schonmalim Vorraus.

PS: Ihr müst euch nat zuvor die CSS-Dateien runterladen um lokal es zu testen.
http://www.cssplay.co.uk/menu/css/slide_show.css
http://www.cssplay.co.uk/menu/css/slide_show_ie.css
 
Zuletzt bearbeitet:
Hi,

es ist ein wenig schwierig zu erklären, aber ich versuche es mal.

Der HTML Code auf CSSPlay ist nicht so aufgebaut wie bei dir.
Vor dem 1. Set wird eine "<ul>" Liste eröffnet. Das ist bei deiner Version und der CSSPlay Version gleich.
Deins
HTML:
<ul>
<li><a href="#nogo">Set 1
<!--[if IE 7]><!-->
Cssplay
HTML:
<ul>
<li><a href="#nogo">Set 1
<!--[if IE 7]><!-->

Bei den dann folgenden Sets ist bei CssPlay kein öffnendes "<ul>" mehr da, bei dir schon, da die dies im Loop stehen hast.

HTML:
</li>
<ul>
<li><a href="#nogo">Set 2
<!--[if IE 7]><!-->

Cssplay:
HTML:
</li>
<li><a href="#nogo">Set 2
<!--[if IE 7]><!-->
(bei allen anderen "Set" Einträgen das gleiche.


Ich vermute das der Fehler daher in dem While Part ist,
wo du für jedes Set folgendes machst

PHP:
echo <<<END
<ul>
<li><a href="#nogo">Set $aset
usw...

Ist nur eine Vermutung, müssteste mal testen ob das stimmt.
 
Oh danke das muss ich übersehen haben.
Werd es Morgen gleich mal testen ob das der Fehler war
und es dann in beiden Browsern funktioniert.
Hoffe das klappt dann so wäre dann super
und du hättest was gut bei mir.
-------------------------------------------------------------------------------------------------
Ok habs jetzt doch mal gleich gemacht. hab als das <ul>
unter das schließende </dl> gesetzt so das nur einmal aufgerufen wird.
Geht aber immernoch nicht.
-------------------------------------------------------------------------------------------------
OK jezt habe ich es hinbekommen das es 1:1 (glaube ich zumindest)
den Selben html-code generiert aber in IE funktioniert es noch immer
nicht.

Oben habe ich jetzt den aktuell abgeänderten Code .
 
Zuletzt bearbeitet:
Hi,

übergib das Dokument, wie im Original, den Browsern im "Standardsmode".

Das Aufklappen und Anzeigen der Grafiken funktioniert zumindest schon mal im IE6, lediglich die horizontale Zentrierung der "Slide Show" passt in ihm noch nicht, da er ohne die Doctype-Deklaration aus dem Original-Quellcode in den "Quirksmode" schaltet, und in diesem Darstellungsmodus das CSS-Boxmodell nicht unterstützt - in diesem Fall ist dies u.a. die margin:0 auto-Deklaration für .menu2, die der horizontalen Zentrierung dient.

Im IE7 hingegen tut sich garnichts, wenn er sich im "Quirksmode" befindet.

mfg Maik
 
OK jezt habe ich es hinbekommen das es 1:1 (glaube ich zumindest)
den Selben html-code generiert aber in IE funktioniert es noch immer
nicht.
Es fehlt noch immer die erforderliche Doctype-Deklaration aus dem Original-Quellcode, um das Dokument im standardkonformen Modus zu übergeben:

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">


und ohne diese funktioniert die "Slide Show" im IE7 nicht, da er sich mit deinem derzeitigen HTML-Quelltext, wie schon in meinem letzten Post darauf hingewiesen, im "Quirksmode" befindet.

Zur Gegenprobe kannst du dir ja einfach mal die im IE7 funktionstüchtige Original-Seite herunterladen, darin den Doctype entfernen, und sie anschliessend im IE7 aufrufen.

mfg Maik
 
Super danke das war es geht jetzt *top*.
5 Sterne für dich MAIK ***** und Mairhofer geht jetzt 1 A.
-------------------------------------------------------------------------------------------------
OK jetzt ist alles fertig und funktioniert in allen gänigen Browsern.
Außer die Browserabhängigen CSS unterschiedlichen darstellungen.

Danke für die Hilfe.
 
Zuletzt bearbeitet:
Lass dir doch mal vom Firefox den Quelltext anzeigen. Fällt dir darin nicht auf, dass ein gehöriges Stück nach dem folgenden Kommentar ebenfalls farblich als Kommentar ausgegeben/angezeigt wird?

Grund hierfür sind die beiden rotmarkierten Bindestriche innerhalb des Kommentars:

Code:
<!--background="http://img.webme.com/pic/s/stephanie-meschke/hphintergrund.png" --Adminbereich-->


mfg Maik
 
Falls ich dich richtig verstehe.
Soll ja auch auskommentiert bleiben.
hatt er aber auch mit den 2 -- auskommentiert gehalten.
hab es aber dennoch mal lieber entfernt.

Mal ne Frage:
Weist du wieso die Set buttons im IE richtig anzeigt aber im
FF der Abstand bei den ersten 2 Sets nicht einhält?
 
Hi,

ich kann da keinen Unterschied bei den Abständen zwischen den "Set-Buttons" entdecken:

set-buttons.jpg

mfg Maik
 
Dann liegt es an meinem Browserskin, (vielleicht) bei mir ist zwischen
Set 1 und 2 keine Lücke. Obwohl sich das ja nicht auf den inhalt auswirken darf.

Danke und mfg grafixboy

Stelle später nachmal ein screenshot rein und schließe dann das Thema.
-------------------------------------------------------------------------------------------------------------
OK lag wirklich am Browser - Skin von FF weil beim Screenshot und einfügen
in Photoshop sieht alles wieder normal aus und beim ändern der Fenster-
größe verschwindet ab und zu einer der zwischenräume und taucht wieder
auf.

:Closed:
 
Zuletzt bearbeitet:

Neue Beiträge

Zurück