CONTENIDO Forum

Das Diskussionsforum zum Open Source Content Management System
https://forum.contenido.org/

Bildergalerie - Falsche Darstellung im IE

https://forum.contenido.org/viewtopic.php?f=108&t=21436

Seite 1 von 1

Bildergalerie - Falsche Darstellung im IE

Verfasst: So 11. Mai 2008, 16:37
von grubi
Hey zusammen,

Ich habe folgendes Problem mit der Standard-Bildergalerie. In Firefox wird mir die Galerie richtig angezeigt, so wie ich sie haben möchte. Nur im Internet Explorer (IE) wird die Galerie in den Bereich des Menüs gerückt (also sehr weit nach links), so dass das Menü nach unten verschoben wird, wo es eigentlich nichts verloren hat.

Hier der direkte Link: http://www.propalliance.at/content/cms/ ... ?idcat=100

Wisst ihr da einen Rat? Dazu hab ich leider nichts mit der Suchfunktion gefunden. :roll:

Dankeschön schonmal!

Hmm...

Verfasst: Sa 17. Mai 2008, 10:50
von McHubi
Hi,

ich würde vermuten, dass der IE die css-Informationen anders interpretiert als der Firefox (float?).

Nutzt Du für die Galerie ein anderes Layout als für die übrigen Seiten? Ggf. ist ein <div>-Tag nicht geschlossen.

Verfasst: Sa 17. Mai 2008, 16:59
von grubi
Hey!

Danke für deine Antwort.
Also das Layout (Standard) ist genau das gleiche wie bei allen anderen Seiten auch (so ist es zumindest eingestellt). An den CSS-Dateien hab ich nichts großartiges verändert bzw. finde ich beim Durchsehen auch keinen Fehler drinnen, der das Auslösen könnte.
<div>-Tags sind meiner Ansicht nach alle geschlossen.

Hast du da vll. sonst noch eine Idee? Schließlich versuche ich möglichst wenig von der Contenido-Standard-Seite abzuweichen (wie man sieht baue ich ja nur die Beispielseite etwas um).

Ich darf hier mal den CSS-Code posten der hier verwendet wird, vll. findet ja jemand etwas?

Layout - Standard

Code: Alles auswählen

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
	<title>Contenido Demo-Seite</title>
	<link href="css/style.css" rel="stylesheet" type="text/css">
	<link href="css/style_print.css" rel="stylesheet" type="text/css" media="print">
	<!--[if IE]>
		<style>
			#imagecolumn {
				width:170px;
			}
			#logo {
				margin-top:0;
			}
			#navipath {
				padding-top:2px;
			}
			.balken {
				background-position:0px 0px ;
			}				
			#additionalnavi {
				padding-top:2px;
			}
        </style>
	<![endif]-->
<script language="javascript" type="text/javascript" src="js/jsApi.js"></script>
</head>
<body>
<div id="outer"> 
	<div id="innerwrap"> 
		<div id="centrecontent"> 
			<div id="navipath">
				<container id="60" name="Navigationspfad" types="Navigation" mode="fixed" default="Navigationspfad">Navigationspfad</container>
			</div>
			<container id="10" name="Headline" types="Content" default="Headline (HTML)">Headline (HTML)</container>
			<container id="12" name="Text" types="Content" default="">Content 1</container>
			<container id="15" name="Text" types="Content" default="">Content 2</container>
			<container id="22" name="Text" types="Content" default="">Content 3</container>
			<container id="24" name="Text" types="Content" default="">Content 4</container>
			<container id="26" name="Text" types="Content" default="">Content 5</container>
			<container id="28" name="Text" types="Content" default="">Content 6</container>
			<br/><br/>
			<table width="100%" border="0" cellspacing="0" cellpadding="0"><tr><td style="background-color:rgb(191,69,79);"><img src="images/grey.gif" width="1" height="1" border="0" alt="" title=""/></td></tr></table>
			<div id="bottomnavi">
				<container id="30" name="BottomNavigation" types="Navigation" mode="fixed" default="BottomNavigation">BottomNavigation</container>
			</div>			
		</div>
		<div id="left"> 
			<container id="40" name="Hauptnavigation" types="Navigation" mode="fixed" default="Hauptnavigation">Hauptnavigation</container>
			<container id="44" name="Suche" types="Navigation" default="">Suche</container>
			<container id="48" name="Login" types="Navigation" default="">Login</container>
			<container id="49" name="Newsletter" types="Navigation" default="">Newsletter</container> </div>
	</div>
	<div id="right"></div>
	<div id="clearfooter"></div>
	<div id="header"> 
		<div id="additionalnavi"><container id="50" name="Hilfsnavigation" types="Navigation" mode="fixed" default="Hilfsnavigation">Hilfsnavigation</container></div>
		<div id="logo">
			<table width="780" border="0" cellspacing="0" cellpadding="0">
				<tr>
					<td><a href="front_content.php" title="Zur Homepage"><img src="images/toplogo.jpg" width="570" hspace="0" height="80" border="0" alt="Logo" title="Logo"/></a></td>
					<td align="right"><img src="images/blank.gif" width="10" height="1" border="0"/></td>
					<td align="right"><container id="80" name="Illustration" types="Content" default=""></container></td>
				</tr>
				<tr>
					<td colspan="3" class="balken"><img src="images/blank.gif" border="0" width="780" height="5" alt=""/></td>
				</tr>
			</table>
		</div>
	</div>
</div>
<div id="imagecolumn">
	<container id="70" name="Teaser_Rechts" types="Content" mode="optional">Teaser (Rechts)</container>
	<container id="72" name="Teaser_Rechts" types="Content" mode="optional">Teaser (Rechts)</container>
	<container id="74" name="Teaser_Rechts" types="Content" mode="optional">Teaser (Rechts)</container>
</div>
</body>
</html>

style.css - diese wird verwendet

Code: Alles auswählen

html, body { height:100%; }

body {
	padding:0;
	margin:0;
	text-align:left;
	min-width:780px;
	background-color:#FFFFFF;
	font-size:11px;
	font-family:Verdana,Tahoma,Arial,Helvetica,Sans-serif,sans-serif;
	color:rgb(0,0,0);
	background-image:url('../images/bg.jpg');
	background-repeat:repeat-y;
	background-position:0px 0px;
	overflow-x:hidden;
	overflow:-moz-scrollbars-vertical;
}

td {
	font-size:11px;
	font-family:Verdana,Tahoma,Arial,Helvetica,Sans-serif,sans-serif;
	color:rgb(191,69,79);
	margin-bottom:8px;
}

.input {
	font-size:11px;
	font-family:Verdana,Tahoma,Arial,Helvetica,Sans-serif,sans-serif;
	color:rgb(0,0,0);
	width:240px;
	margin-bottom:8px;
	border-top:1px solid #999999;
	border-right:1px solid #999999;
	border-bottom:1px solid #999999;
	border-left:1px solid #999999;
}

.label {
	font-size:11px;
	font-family:Verdana,Tahoma,Arial,Helvetica,Sans-serif,sans-serif;
	color:rgb(0,0,0);
}

.small {
	font-size:9px;
}

#outer{
	height:100%;
	min-height:100%;
	width:780px;
	color:#000000;
	text-align:left;
	position:relative;
}
 
html>body #outer{ height:auto; } 

#innerwrap {
	float:left;
	width:600px;
}

#header{
	position:absolute;
	top:0;
	left:-1px;
	width:781px;
	height:103px;
	color:#000000;
	background-color:#ffffff;
	background:url("../images/schraffur_rechts_oben.gif");
	background-repeat:repeat-x;
	background-position:0px 0px ;
	z-index:5;
}

#left {
	position:relative;
	width:180px;
	float:left;
	padding-top:120px;
	padding-bottom:20px;
}

#left p { padding-left:3px;padding-right:2px }

#right p { padding-left:4px;padding-right:2px }

#imagecolumn {
	margin-top:0px;
	position:absolute;
	top:20px;
	left:608px;
	width:148px;
	height:550px;
	z-index:10;
	padding-top:112px;
	padding-left:10px;
	padding-right:10px;
	color:rgb(191,69,79);
}

#imagecolumn a {
	padding:0;
	font-weight:normal;
	font-size:11px;
	color:rgb(190,190,190);
	margin:0;
}

#imagecolumn h1 {
	padding:0;
	font-weight:normal;
	font-size:11px;
	color:rgb(191,69,79);
	margin:0;
}

#right {
	position:relative;
	width:170px;
	float:right;
	margin-top:10px;
	padding-top:170px;
	padding-bottom:20px;
	background-color:#999999;
	background:url('../images/randbg.jpg');
	background-position:0px 0px;
	background-repeat:no-repeat;
	color:rgb(191,69,79);
}

div,p  { margin-top:0; }

#centrecontent {
	width:408px;
	float:right;
	padding-left:0px;
	padding-right:0px;
	padding-top:105px;
	padding-bottom:20px;
	color:rgb(191,69,79);
}

#centrecontent p { padding-left:3px:color:rgb(191,69,79); }

#clearfooter { width:100%;height:52px;clear:both; }

#bottomnavi {
	text-align:center;
	color:rgb(210,210,210);
}

#additionalnavi {
	float:right;
	background-color:#ffffff;
	margin-top:3px;
	padding-bottom:2px;
	padding-top:0px;
	margin-left:10px;
	text-align:center;
	width:170px;
	color:rgb(160,160,160);
}

#logo {
	width:780px;
	margin-top:18px;
}

#navipath {
	padding:0;
	padding-bottom:10px;
	background-color:#ffffff;
	color:rgb(99,99,99);
	width:388px;
}

.navi{
	width:180px;
	border-bottom:1px solid rgb(170,170,170);
	background-color:rgb(255,255,255);
}

h1 {
	padding-left:2px;
	font-weight:bold;
	font-size:13px;
	color:rgb(191,69,79);
	margin:0;
}

h1.content {
	margin-bottom:12px;
	padding:0;
}

hr { color:rgb(210,210,210); }

a { font-size:11px; color:rgb(50,50,50); text-decoration:none; }
a:hover { text-decoration:underline; }

a.newsheadline { font-weight:bold; } 

a.bottomnavi { color:rgb(160,160,160); font-size:9px; } 

a.additionalnavi { font-size:10px; color: rgb(50,50,50); }

a.navipath { font-size:10px; color: rgb(160,160,160); } 

a.navileft_passive {
	display:block;
	background-color:#E8E8EE;
	padding-top:3px;
	padding-bottom:3px;
	color:rgb(51,79,119);
} 

a.navileft_active {
	display:block;
	background-color:#ffffff;
	background:url("../images/navi_pfeil_rechts.gif") no-repeat;
	background-position:right;
	padding-top:3px;
	padding-bottom:3px;
	color:rgb(51,79,119);
} 

a.navileft_open {
	padding-left:10px;
	display:block;
	background:url("../images/navi_pfeil.gif") no-repeat;
	background-position:right;
	background-color:#E8E8EE;
	padding-top:3px;
	padding-bottom:3px;
	color:rgb(51,79,119);
} 

a.sitemap_level1 {
	display:block;
	border-bottom:1px solid #b4a8b4;
	color:rgb(217,104,28);
	font-weight:normal;
	padding-bottom:.4em;
	background:url("../images/navi_pfeil_rechts.gif") no-repeat;
	background-position:right;
}

a.sitemap_level2 {
	color:rgb(62,77,116);
	background:url("../images/navi_pfeil_rechts.gif") no-repeat;
	background-position:170px 4px;
	display:block;
}

a.sitemap_level3 {
	color:rgb(190,190,190);
}

.sitemap_level2_container {
	float:left;
	width:50%;
	padding-top:.3em;
}

.sitemap_level3_container {
	float:right;
	width:50%;
	padding-top:.3em;
}

.input_searchbox {
	width:65px;
	vertical-align:middle;
	font-size:11px;
	color: rgb(62,77,116);
}

.input_newsletterselect {
	width:80px;
	vertical-align:middle;
	font-size:11px;
	margin-right: 8px;
	color: rgb(62,77,116);
}

.label_searchbox {
	vertical-align:middle;
	color:#9d9ea2;
	position:relative;
	padding-left:10px;
	/*left:-65px;*/
}

#loginbox {
	background-color:#DFE0E5;
	border-top:1px solid #aeaeae;
	border-bottom:1px solid #aeaeae;
	padding-bottom:.6em;
	padding-top:.6em;
	padding-left:0em;
	padding-right:0em;
	margin-top:1.5em;
	margin-bottom:1.5em;
}

#searchbox {
	background-color:#DFE0E5;
	border-top:1px solid #aeaeae;
	border-bottom:1px solid #aeaeae;
	padding-bottom:.6em;
	padding-top:.6em;
	padding-left:0em;
	padding-right:0em;
	margin-top:1.5em;
	margin-bottom:1.5em;
}

#newsletterbox {
   background-color:#DFE0E5;
   border-top:1px solid #aeaeae;
   border-bottom:1px solid #aeaeae;
   padding-bottom:.6em;
   padding-top:.6em;
   padding-left:.5em;
   padding-right:.5em;
   margin-top:1.5em;
   margin-bottom:1.5em;
}

.hidden {
	display:none;
}

.balken {
	padding-left:0px;
	background-color:rgb(255,110,43);
	background-image:url('../images/bg2.jpg');
	background-repeat: repeat-x,repeat-y;
	background-position:2px 0px ;
}
Modul Bildergalerie von Timo A. Hummel - "Ausgabe"

Code: Alles auswählen

<?php
/***********************************************
* Bildergalerie Output
*
* Author      :     Timo A. Hummel
* Copyright   :     four for business AG
* Created     :     30-09-2005
************************************************/

cInclude("includes", "functions.api.images.php");

/* Gallery variables */
$bRecursive = false;

$sPath = "CMS_VALUE[5]";
if ($sPath=='') {
	$sPath = $cfgClient[$client]["path"]["frontend"] . $cfgClient[$client]["upl"]["frontendpath"] . "bildergalerie/";
} else {
	$sPath = $cfgClient[$client]["path"]["frontend"] . $cfgClient[$client]["upl"]["frontendpath"] . "CMS_VALUE[5]";
}

$iRows = "CMS_VALUE[3]";

if ($iRows == 0)
{
  $iRows = 2;
}

$iColumns = "CMS_VALUE[2]";

if ($iColumns == 0)
{
  $iColumns = 2;
}

if (isset($start))
{
  $iCurrentPage = $start;
} else {
  $iCurrentPage = 1;
}

$iWidth = "CMS_VALUE[0]";
$iHeight = "CMS_VALUE[1]";

if ($iWidth == 0)
{
  $iWidth = 300;
}

if ($iHeight == 0)
{
  $iHeight = 300;
}

$iDetailWidth = "CMS_VALUE[4]";

if ($iDetailWidth == 0)
{
  $iDetailWidth = 300;
}

$aValidExtensions = array("jpg", "jpeg", "gif", "png");

$iImagesPerPage = $iRows * $iColumns;

if ($_REQUEST['view']=='') {
	/* Read all gallery files */
	$aGalleryFiles = scanDirectory($sPath, $bRecursive);
	
         if (is_array($aGalleryFiles))
         {
	/* Filter out non-images */
	foreach ($aGalleryFiles as $key => $aGalleryFile)
	{
	  $sExtension = strtolower(getFileExtension($aGalleryFile));
	
	  if (!in_array($sExtension, $aValidExtensions))
	  {
	     unset($aGalleryFiles[$key]);
	  }
	}
	
	/* Calculate effective variables */
	$iFileCount = count($aGalleryFiles);
	$iPages = ceil($iFileCount / $iImagesPerPage);
	
	$aImagesToDisplay = array_slice($aGalleryFiles, ($iCurrentPage - 1) * $iImagesPerPage, $iImagesPerPage);
	
	$oImageTpl = new Template;
	$oGalleryTpl = new Template;
	$oEmptyImageTpl = new Template;
	
	$aRenderedImages = array();
	
	$iRow = 0;
	$iImagesRendered = 0;
	
	foreach ($aImagesToDisplay as $sImageToDisplay)
	{
	  /* Do Scaling */
	  $sScaledImage = cApiImgScale($sImageToDisplay, $iWidth, $iHeight);
	
	  $link = 'front_content.php?idcatart='.$idcatart.'&start='.$_REQUEST['start'].'&view='.urlencode(str_replace($cfgClient[$client]['path']['frontend'],'',$sImageToDisplay));

	  $description = ig_getImageDescription($sImageToDisplay);
	  if ($description=='') {
	  	$description = '&nbsp;';
	  }
	  
	  $download_link = str_replace($cfgClient[$client]['path']['frontend'],$cfgClient[$client]['path']['htmlpath'],$sImageToDisplay);

	  $download_size = ig_GetReadableFileSize($sImageToDisplay);
	  	  	
	  $oImageTpl->reset();
	  $oImageTpl->set("s", "FILE", $sScaledImage);
	  $oImageTpl->set("s", "WIDTH", $iWidth);
	  $oImageTpl->set("s", "HEIGHT", $iHeight);
	  $oImageTpl->set("s", "LINK", $link);
	  $oImageTpl->set("s", "DESCRIPTION", $description);
	  $oImageTpl->set("s", "DOWNLOAD_LINK", $download_link);
	  $oImageTpl->set("s", "DOWNLOAD_SIZE", $download_size);
	  $oImageTpl->set("s", "DOWNLOAD_CAPTION", mi18n("runter laden"));
	  $oImageTpl->set("s", "PREVIEW_CAPTION", mi18n("Bildvorschau"));
	  
	  $aRenderedImages[] = $oImageTpl->generate($cfgClient[$client]["path"]["frontend"] . "templates/gallery_image.html", true, false);
	
	  $iImagesRendered++;
	
	  if ($iImagesRendered == $iColumns)
	  {
	    $oGalleryTpl->set("d", "COLUMNS", implode("", $aRenderedImages));
	    $oGalleryTpl->next();
	    $iImagesRendered = 0;
	    $aRenderedImages = array();
	  }
	}
	
	if (count($aRenderedImages) < $iColumns && count($aRenderedImages) > 0)
	{
	  $iEmptyCells = $iColumns - count($aRenderedImages);
	
	  $oEmptyImageTpl->set("s", "WIDTH", $iWidth);
	  $oEmptyImageTpl->set("s", "HEIGHT", $iHeight);
	
	  $sEmptyCells = str_repeat($oEmptyImageTpl->generate($cfgClient[$client]["path"]["frontend"] . "templates/gallery_empty.html", true, false),$iEmptyCells);
	 
	  $oGalleryTpl->set("d", "COLUMNS", implode("", $aRenderedImages) . $sEmptyCells);
	  $oGalleryTpl->next();
	}
	
	$aLinks = array();
	
	if ($iCurrentPage > 1)
	{
	  $oPreviousTpl = new Template;
	  $oPreviousTpl->set("s", "LINK", $cfgClient[$client]["path"]["htmlpath"] . sprintf("front_content.php?idcatart=%s&start=%s", $idcatart, $iCurrentPage - 1));
	  $oPreviousTpl->set("s", "TITLE", mi18n("Zurück"));
	  $aLinks[] = $oPreviousTpl->generate($cfgClient[$client]["path"]["frontend"] . "templates/gallery_link.html", true, false);
	}
	
	if ($iCurrentPage < $iPages)
	{
	  $oNextTpl = new Template;
	  $oNextTpl->set("s", "LINK", $cfgClient[$client]["path"]["htmlpath"] . sprintf("front_content.php?idcatart=%s&start=%s", $idcatart, $iCurrentPage + 1));
	  $oNextTpl->set("s", "TITLE", mi18n("Vor"));
	  $aLinks[] = $oNextTpl->generate($cfgClient[$client]["path"]["frontend"] . "templates/gallery_link.html", true, false);
	}
	
	$oGalleryTpl->set("s", "NAVIGATION", implode("", $aLinks));
	
	$oGalleryTpl->generate($cfgClient[$client]["path"]["frontend"] . "templates/gallery.html", false, false);
    }
} else {
	$sImageToDisplay = $cfgClient[$client]['path']['frontend'].$_REQUEST['view'];
	$sScaledImage = cApiImgScale($sImageToDisplay, $iDetailWidth, 1000);

    $description = ig_getImageDescription($sImageToDisplay);
	if ($description=='') {
	  $description = '&nbsp;';
	}

    $download_link = str_replace($cfgClient[$client]['path']['frontend'],$cfgClient[$client]['path']['htmlpath'],$sImageToDisplay);

	$download_size = ig_GetReadableFileSize($sImageToDisplay);
	
	$oImageTpl = new Template;
	$oImageTpl->set("s", "IMG",$sScaledImage);
	$oImageTpl->set("s", "BACKLINK",'front_content.php?idcat='.$idcat.'&idart='.$idart.'&start='.$_REQUEST['start']);
	$oImageTpl->set("s", "BACKCAPTION",mi18n("Zurück"));
    $oImageTpl->set("s", "DESCRIPTION", $description);
    $oImageTpl->set("s", "DOWNLOAD_LINK", $download_link);
	$oImageTpl->set("s", "DOWNLOAD_SIZE", $download_size);
	$oImageTpl->set("s", "DOWNLOAD_CAPTION", mi18n("runter laden"));
	
	$oImageTpl->generate($cfgClient[$client]["path"]["frontend"] . "templates/gallery_detail.html", false, false);
}

function ig_getImageDescription($idupl){

	global $cfg, $cfgClient, $db, $client, $lang;
	
    $cApiClient = new cApiClient($client);
	$language_separator = $cApiClient->getProperty('language','separator');
	if(is_numeric($idupl)){
		//ID is a number 
		$query = "SELECT description FROM ".$cfg["tab"]["upl"]." WHERE idupl = ".$idupl;
	}else{
		//ID is a string
		$path_parts = pathinfo($idupl);
		$upload = $cfgClient[$client]['upl']['frontendpath'];
		$len = strlen($upload);
		$pos = strpos($idupl,$upload);
		$dirname = substr($path_parts['dirname'],$pos+$len).'/';
		$query = "SELECT description FROM ".$cfg["tab"]["upl"]." WHERE (dirname = '".$dirname."') AND (filename='".$path_parts['basename']."') AND (filetype='".$path_parts['extension']."')";
	}
	$db->query($query);
	if($db->next_record()){
		return htmlspecialchars(urldecode($db->f("description")));
	}else{
		return '';
	}
}

function ig_GetReadableFileSize($path) {
	$filesize = filesize($path);
	$unit = "bytes";
	
	if ($filesize > 1024) {
	$filesize = ($filesize / 1024);
	$unit = "kB"; }
	if ($filesize > 1024) {
	$filesize = ($filesize / 1024);
	$unit = "MB"; }
	if ($filesize > 1024) {
	$filesize = ($filesize / 1024);
	$unit = "GB"; }
	if ($filesize > 1024) {
	$filesize = ($filesize / 1024);
	$unit = "TB"; }
	
	$filesize = round($filesize, 0);
	return $filesize." ".$unit;
}
?>
Ein "geschulter" Blick sagt hier vielleicht mehr!? 8)

Danke schonmal!
Alle Zeiten sind UTC+01:00
Seite 1 von 1

Powered by phpBB® Forum Software © phpBB Limited

Deutsche Übersetzung durch phpBB.de