Negative Positioning in IE7

[keithck73]

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:              '&lsaquo; Previous Photo',
					nextLinkText:              'Next Photo &rsaquo;',
					nextPageLinkText:          'Next &rsaquo;',
					prevPageLinkText:          '&lsaquo; 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  }?>

[RyanReese]

Given the fact you have invalid code which is probably messing with the browser, it appears that this span needs a staticp osition in order for it to show.

span.image-captiong{position:static!important}

[keithck73]

Great. That looks like it was the fix I was looking for. Thanks!

Given the fact you have invalid code which is probably messing with the browser, it appears that this span needs a staticp osition in order for it to show.

span.image-captiong{position:static!important}

[RyanReese]

You're welcome!