I have a caption in an image gallery that is not displaying in IE7. Here is the page:
http://www.westhartfordfence.com/products/gates/
In Safari, Firefox and IE8 you should see “Specrail Berkshire Gate” right above the large photo in the gallery. This is not appearing in IE7. I think I’ve narrowed this down to the negative positioning of this element but I don’t know how to fix it.
I am using the Gallerific image gallery within a Concrete5 CMS. The original layout has the caption underneath the photo. I want it up top and that’s why I have the negative value.
Here’s the CSS and the PHP used for layout:
div.containerg {
padding: 10px;
}
div.navigationg{
padding-top:21px;
padding-right:20px;
}
div.contentg {
/* The display of content is enabled using jQuery so that the slideshow content won't display unless javascript is enabled. */
display: none;
float: left;
width: 510px;
}
div.contentg a, div.navigationg a {
text-decoration: none;
color: #777;
}
div.contentg a:focus, div.contentg a:hover, div.contentg a:active {
text-decoration: underline;
}
div.controlsg {
margin-top: 5px;
height: 23px;
}
div.controlsg a {
padding: 5px;
}
div.ss-controlsg {
float: left;
}
div.nav-controlsg {
float: right;
}
div.slideshow-containerg {
position: relative;
clear: both;
height: 402px; /* This should be set to be at least the height of the largest image in the slideshow */
}
div.loaderg {
position: absolute;
top: 0;
left: 0;
background-image: url('loader.gif');
background-repeat: no-repeat;
background-position: center;
width: 450px;
height: 402px; /* This should be set to be at least the height of the largest image in the slideshow */
}
div.slideshowg {
}
div.slideshowg span.image-wrapperg {
display: block;
position: absolute;
top: 0;
left: 0;
}
div.slideshowg a.advance-linkg {
display: block;
width: 525px;
height: 700px; /* This should be set to be at least the height of the largest image in the slideshow */
/* line-height: 402px; /* This should be set to be at least the height of the largest image in the slideshow */
text-align: left;
}
div.slideshowg a.advance-linkg:hover, div.slideshowg a.advance-linkg:active, div.slideshowg a.advance-linkg:visited {
text-decoration: none;
}
div.slideshowg img {
vertical-align: middle;
background: #fff;
border: 4px solid #fff;
position: relative;
top: 30px;
}
div.downloadg {
float: right;
}
div.caption-containerg {
position: relative;
clear: left;
height: 75px;
}
span.image-captiong {
display: block;
position: absolute;
width: 510px;
top: 0;
left: 0;
}
div.captiong {
padding: 3px;
position: relative;
top: -400px;
}
div.image-titleg {
font-weight: normal;
font-size: 1.0em;
}
div.image-descg {
line-height: 1.3em;
padding-top: 12px;
}
div.navigationg {
/* The navigation style is set using jQuery so that the javascript specific styles won't be applied unless javascript is enabled. */
}
ul.thumbsg {
clear: both;
margin: 0;
padding: 0;
}
ul.thumbsg li {
float: left;
padding: 0;
margin: 5px 10px 5px 0;
list-style: none;
}
a.thumbg {
padding: 2px;
display: block;
background: #fff;
border: 1px solid #fff;
}
ul.thumbsg li.selected a.thumbg {
background: #40527f;
border: 1px solid #40527f;
}
a.thumb:focus {
outline: none;
}
ul.thumbsg img {
border: none;
display: block;
}
div.paginationg {
clear: both;
font-size: 10px;
}
div.navigationg div.topg {
margin-bottom: 12px;
height: 11px;
}
div.navigationg div.bottomg {
margin-top: 12px;
}
div.paginationg a, div.paginationg span.currentg, div.paginationg span.ellipsisg{
display: block;
float: left;
margin-right: 2px;
padding: 2px 6px 2px 6px;
border: 1px solid #fff;
background-color: #666;
color: #fff;
}
div.paginationg a:hover {
background-color: #000;
text-decoration: none;
}
div.paginationg span.currentg {
font-weight: bold;
background-color: #000;
border-color: #000;
color: #fff;
}
div.paginationg span.ellipsisg {
border: none;
padding: 5px 0 3px 2px;
}
<?php defined('C5_EXECUTE') or die(_("Access Denied.")); ?>
<?php
$c = Page::getCurrentPage();
$vWidth=425;
$vHeight=344;
if ($c->isEditMode()) { ?>
<div class="ccm-edit-mode-disabled-item" style="width:<?php echo $vWidth; ?>px; height:<?php echo $vHeight; ?>px;">
<div style="padding:8px 0px; padding-top: <?php echo round($vHeight/2)-10; ?>px;"><?php echo t('Content disabled in edit mode.'); ?></div>
</div>
<?php } else {
//$ih = Loader::helper('image');
$ih = Loader::helper('imageresizer', 'jb_gallerific');
$thumbfak = false;
if ($thumbnailAttributeKeyID > 0) {
Loader::model('attribute/categories/file');
$thumbfak = FileAttributeKey::getByID($thumbnailAttributeKeyID);
}
?>
<!-- We only want the thunbnails to display when javascript is disabled -->
<script type="text/javascript">
document.write('<style>.noscript { display: none; }</style>');
</script>
<div id="containerg-<?php echo $bID;?>" class="containerg">
<div id="thumbs-<?php echo $bID;?>" class="navigationg">
<ul class="thumbsg noscript">
<?php for($i=0;$i<count($images);$i++){ ?>
<?php
$imgInfo = $images[$i];
$f = File::getByID($imgInfo['fID']);
if ($f){
$thumbf = false;
$caption = array_key_exists('caption', $imgInfo) ? $imgInfo['caption'] : $f->getTitle();
$fv = $f->getApprovedVersion();
//$imgInfo['caption'].='<br>';
//load caption attributes
$shownData=array();
if($type=='FILESET'){
$shownAttributesArray=explode(',',$shownAttributes);
}else{
if( strlen(trim($imgInfo['caption'])) ) $shownData[]=$imgInfo['caption'];
$shownAttributesArray=explode(',',$imgInfo['shownAttributes']);
}
if( count($shownAttributesArray) ){
if( in_array('title',$shownAttributesArray) )
$shownData[]=$fv->getTitle();
if( in_array('filename',$shownAttributesArray) )
$shownData[]=$fv->getFileName();
if( in_array('description',$shownAttributesArray) )
$shownData[]=$fv->getDescription();
if( in_array('tags',$shownAttributesArray) )
$shownData[]=$fv->getTags();
if( in_array('date',$shownAttributesArray) )
$shownData[]=date('M d, Y g:ia', strtotime($f->getDateAdded()));
foreach($shownAttributesArray as $attr){
if( substr($attr,0,4)=='fak_' ){
$fakID=intval(substr($attr,4));
$fak=FileAttributeKey::get($fakID);
if( strlen($fak->akHandle) ){
$attVal=$fv->getAttribute( $fak->akHandle ,true );
if( strlen($attVal) ) $shownData[]=$attVal;
}
}
}
$imgInfo['caption']=join('<br>',$shownData);
}
if (is_object($thumbfak)) {
$thumbf = $f->getAttribute($thumbfak->getAttributeKeyHandle());
}
if (!is_object($thumbf)) {
$thumbf = $f;
}
?>
<li>
<a class="thumbg" href="<?php $ih->outputThumbnail2($thumbf,600,400,''); ?>" title="<?php echo $fv->getTitle();?>">
<img src="<?php $ih->outputThumbnail1($thumbf,75,75,''); ?>" width="75" height="75" border="0" />
</a>
<div class="captiong">
<!-- <div class="downloadg">
<a href="<?php echo $thumbf->getRelativePath()?>">Download Original</a>
</div>-->
<?php
if(isset($shownData[0]) && !isset($shownData[1])){
echo '<div class="image-titleg">' . $shownData[0] . '</div>';
}
elseif(isset($shownData[0]) && isset($shownData[1]) && !isset($shownData[2])){
echo '<div class="image-titleg">' . $shownData[0] . '</div>';
echo '<div class="image-descg">' . $shownData[1] . '</div>';
}
elseif (isset($shownData[0]) && isset($shownData[1]) && isset($shownData[2])){
echo '<div class="image-titleg">' . $shownData[0] . '</div>';
echo '<div class="image-descg">' . $shownData[0];
if (isset($shownData[2])){
echo '<BR>'. $shownData[2];
}
if (isset($shownData[3])){
echo '<BR>'. $shownData[3];
}
if (isset($shownData[4])){
echo '<BR>'. $shownData[4];
}
echo '</div>';
}
?>
</div>
</li>
<?php }
}
?>
</ul>
</div>
<div id="gallery" class="contentg contentg<?php echo $bID;?>">
<?php if($playlink=="TOP"){?>
<!-- <div id="controls-<?php echo $bID;?>" class="controlsg"></div>-->
<?php }?>
<div class="slideshow-containerg">
<div id="loading-<?php echo $bID;?>" class="loaderg"></div>
<div id="slideshow-<?php echo $bID;?>" class="slideshowg"></div>
</div>
<?php if($playlink!="TOP"){?>
<div id="controls-<?php echo $bID;?>" class="controlsg"></div>
<?php }?>
<div id="captiong-<?php echo $bID;?>" class="caption-containerg"></div>
</div>
</div>
<script type="text/javascript">
jQuery(document).ready(function($) {
// We only want these styles applied when javascript is enabled
$('#thumbs-<?php echo $bID;?>').css({'width' : '550px', 'float' : 'left'});
$('div.contentg<?php echo $bID;?>').css('display', 'block');
// Initially set opacity on thumbs and add
// additional styling for hover effect on thumbs
var onMouseOutOpacity = 0.67;
$('#thumbs-<?php echo $bID;?> ul.thumbs li').opacityrollover({
mouseOutOpacity: onMouseOutOpacity,
mouseOverOpacity: 1.0,
fadeSpeed: 'fast',
exemptionSelector: '.selected'
});
// Initialize Advanced Galleriffic Gallery
var gallery = $('#thumbs-<?php echo $bID;?>').galleriffic({
delay: 2500,
numThumbs: <?php echo $playback;?>,
preloadAhead: 10,
enableTopPager: false,
enableBottomPager: true,
maxPagesToShow: 7,
imageContainerSel: '#slideshow-<?php echo $bID;?>',
controlsContainerSel: '#controls-<?php echo $bID;?>',
captionContainerSel: '#captiong-<?php echo $bID;?>',
loadingContainerSel: '#loading-<?php echo $bID;?>',
renderSSControls: true,
renderNavControls: true,
playLinkText: 'Play Slideshow',
pauseLinkText: 'Pause Slideshow',
prevLinkText: '‹ Previous Photo',
nextLinkText: 'Next Photo ›',
nextPageLinkText: 'Next ›',
prevPageLinkText: '‹ Prev',
enableHistory: false,
autoStart: false,
syncTransitions: true,
defaultTransitionDuration: 900,
onSlideChange: function(prevIndex, nextIndex) {
// 'this' refers to the gallery, which is an extension of $('#thumbs')
this.find('ul.thumbs').children()
.eq(prevIndex).fadeTo('fast', onMouseOutOpacity).end()
.eq(nextIndex).fadeTo('fast', 1.0);
},
onPageTransitionOut: function(callback) {
this.fadeTo('fast', 0.0, callback);
},
onPageTransitionIn: function() {
this.fadeTo('fast', 1.0);
}
});
});
</script>
<div style='clear:both;'></div>
<?php }?>