Menu
I’m having problems with a scroll element when using Safari (on Mac and PC). FF and IE show the following page correctly:
[url]http://www.lupadigitalpanama.com/print/example1.html
At the bottom of the page a ‘NEWER POSTS’ and ‘OLD POSTS’ should be viewable but they don’t show up using Safari (I am using version 4.0.3 on a PC for testing but its not working on Macs either). I’ve been at this for about half a day and have had no luck so I’m not sure if its a javascript issue or a CSS issue, but I welcome any bit of advice. IN any event if the ‘NEWER POSTS’ and ‘OLD POSTS’ are viewable they are suppose to slide the center page elements up or down. I think the slide part is working but if I was only able to figure out how they could be viewable with Safari I think I will have it working 100%. Your help is appreciated.
my CSS code for the element in question is:
#content2 .main2 .maininfo .outer_gallery .gallists #gallerypages {
background-image:url(‘../common/fotos/bg_bif’);
background-repeat:repeat-x;
text-align:right;
height:20px;
width: 592px;
margin-left: 1px;
visibility: visible;
padding: 0px;
}
#content2 .main2 .maininfo .outer_gallery .gallists #gallerypages a {
display:block;
height:20px;
border-left:1px solid #1a1a1a;
float:right;
font-size:11px;
font-weight:bold;
padding:0px 10px;
color:#C03;
background-repeat:no-repeat;
line-height:20px; line-height:18px;
text-decoration:none;
}
#content2 .main2 .maininfo .outer_gallery .gallists #gallerypages .newer {
background-image:url(‘../common/fotos/arrow_left_on.gif’); background-position:left center;
padding-left:15px;
}
#content2 .main2 .maininfo .outer_gallery .gallists #gallerypages .older {
background-image:url(‘../common/fotos/arrow_right_on.gif’); background-position:right center;
padding-right:15px;
}
#content2 .main2 .maininfo .outer_gallery .gallists #gallerypages .newerOff { background-image:url(‘../common/fotos/arrow_left_off.gif’); color:#C03;
}
#content2 .main2 .maininfo .outer_gallery .gallists #gallerypages .olderOff { background-image:url(‘../common/fotos/arrow_right_off.gif’); color:#C03;
}
And the HTML is just a div near the end of the page called ‘gallerypages’:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “
<html xmlns=”
<head profile=”
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″ />
<title>Lupa Digital | Photography: Collections Gallery</title>
<meta name=”keywords” content=”Lupa Digital Photography Site”/>
<meta name=”description” content=”Lupa Digital Photography”/>
<script src=”../js/example1.js” type=”text/javascript”></script>
<link rel=”stylesheet” href=”../CSS/example1.css” type=”text/css” media=”screen” />
</head>
<body>
<div>
<div id=”content2″>
<div class=”main2″>
<script type=”text/javascript”>
<!–
//globals
var feature = “feature”;
var page = 1;
var featureMatches = 1;
// –>
</script>
<script type=”text/javascript”>
var tabs = new Array(
‘feature’);
var tabCounts = new Array(
’10’);
var gallery_relativityolder = ‘Older Posts’;
var gallery_relativitynewer = ‘Newer Posts’;
</script>
<div class=”maininfo”>
<div class=”outer_gallery”>
<div id=”bcframegaly”>
<div id=”bgbcframegaly”>
<div id=”topbcframegaly”>
<ul>
<li class=”tltbcframegaly”></li>
<li class=”trtbcframegaly”> </li>
</ul>
</div>
<div class=”topbcframetopmargaly”></div>
<div class=”gallists”>
<div class=”ribbon”><p class=”ribbon”></p></div>
<div id=”gallery_relativity”>
<div class=”gallery_relativityitem” id=”featureFilter”></div>
</div>
<div class=”gallery_listing”>
<div id=”features_featureThingDiv” class=”gallery_catagories”>
<div class=”gallery_focus”> <img src=”BLA BLA BLA” alt=”BLA BLA BLA” />
<p class=”gallery_feat”>BLA BLA BLA <sup>BLA</sup></p>
<p class=”gallery_desc”> <b>BLA BLA BLA</b>BLA BLA BLA<br />
<span class=”categoryLink”><a href=”BLA BLA BLA” onclick=”return showGallery(true,this.href);”>BLA BLA BLA</a><span class=”gallery_desc”> / </span></span><span class=”categoryLink”><a href=”BLA BLA BLA”>BLA BLA BLA</a></span></p>
</div>
<div class=”gallery_focus”> <img src=”BLA BLA BLA” alt=”BLA BLA BLA” />
<p class=”gallery_feat”>BLA BLA BLA <sup>BLA</sup></p>
<p class=”gallery_desc”> <b>BLA BLA BLA</b>BLA BLA BLA<br />
<span class=”categoryLink”><a href=”BLA BLA BLA” onclick=”return showGallery(true,this.href);”>BLA BLA BLA</a><span class=”gallery_desc”> / </span></span><span class=”categoryLink”><a href=”BLA BLA BLA”>BLA BLA BLA</a></span></p>
</div>
<div class=”gallery_focus”> <img src=”BLA BLA BLA” alt=”BLA BLA BLA” />
<p class=”gallery_feat”>BLA BLA BLA <sup>BLA</sup></p>
<p class=”gallery_desc”> <b>BLA BLA BLA</b>BLA BLA BLA<br />
<span class=”categoryLink”><a href=”BLA BLA BLA” onclick=”return showGallery(true,this.href);”>BLA BLA BLA</a><span class=”gallery_desc”> / </span></span><span class=”categoryLink”><a href=”BLA BLA BLA”>BLA BLA BLA</a></span></p>
</div>
<div class=”gallery_focus”> <img src=”BLA BLA BLA” alt=”BLA BLA BLA” />
<p class=”gallery_feat”>BLA BLA BLA <sup>BLA</sup></p>
<p class=”gallery_desc”> <b>BLA BLA BLA</b>BLA BLA BLA<br />
<span class=”categoryLink”><a href=”BLA BLA BLA” onclick=”return showGallery(true,this.href);”>BLA BLA BLA</a><span class=”gallery_desc”> / </span></span><span class=”categoryLink”><a href=”BLA BLA BLA”>BLA BLA BLA</a></span></p>
</div>
</div>
</div>
<div id=”gallerypages”></div>
</div>
</div>
</div>
</div>
<!– end outer_gallery –>
</div>
<!– end maininfo div –>
<!– end maincol –>
</div><!– end main2 –>
<!–<div class=”column2″>
<div class=”topbanner”> </div>
</div>–>
<!– end column2 –>
</div>
</div>
<script type=”text/javascript”>
<!–
function callNewTrackEvent(filter){
}
//delete shadow img
var imgs = document.body.getElementsByTagName(“img”);
for (var i = 0; i < imgs.length; i++) {
if (imgs[i].src == “../common/fotos/searchbar_dropshadow.gif”) imgs[i].style.display = “none”;
}
//init features
initFilter();
//var pageSize = this.getPageSize();
//var objOverlay = this.doc.getElementById(‘lbOverlay’);
//var objBody = this.doc.getElementsByTagName(“body”).item(0);
//objOverlay.style.height = pageSize[1] + “px”;
//objOverlay.style.display = ”;
function showGallery( show, src ){
var blanket = document.getElementById(“blanket”);
var gallery = document.getElementById(“gallery”);
var galleryframe = document.getElementById(“galleryframe”);
if( show ){
galleryframe.src = src;
gallery.style.top = document.documentElement.scrollTop + 80 + ‘px’;
blanket.style.visibility = ‘visible’;
gallery.style.visibility = ‘visible’;
}
else{
gallery.style.visibility = ‘hidden’;
galleryframe.src = ‘about:blank’;
blanket.style.visibility = ‘hidden’;
}
return false;
}
// –>
</script>
<!– end main –><div id=”blanket”></div>
<div id=”gallery”>
<a href=”#close” onclick=”return showGallery(false);”>
[ CLOSE ] </a>
<iframe id=”galleryframe” frameborder=”0″ scrolling=”no”> </iframe>
</div>
</body>
</html>
I can post the javascript if needed, I’m just not all that sure anyone wants to have all of it to stare at, but if you are interested in seeing it included here I will gladly paste it.
Thanks for having a look!