SitePoint Sponsor

User Tag List

Results 1 to 4 of 4

Hybrid View

  1. #1
    SitePoint Enthusiast
    Join Date
    Aug 2008
    Posts
    35
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Negative Positioning in IE7

    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:

    Code CSS:
    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;
    }

    Code PHP:
    <?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  }?>

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,593
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    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.
    Code:
    span.image-captiong{position:static!important}
    Always looking for web design/development work. Willing to do it cheap to build portfolio!

  3. #3
    SitePoint Enthusiast
    Join Date
    Aug 2008
    Posts
    35
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Great. That looks like it was the fix I was looking for. Thanks!

    Quote Originally Posted by RyanReese View Post
    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.
    Code:
    span.image-captiong{position:static!important}

  4. #4
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,593
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    You're welcome!
    Always looking for web design/development work. Willing to do it cheap to build portfolio!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •