Forums

Wes

Alright so my gallery is at this link http://www.wesascolese.com/portfolio.php
I was not aware that it had any errors (except in IE)
but apparently others are not being able to view it correctly

so I went to http://browsershots.org

and got these
http://i14.photobucket.com/albums/a309/ ... ws-xp-.png
for Safari on Windows XP

and
http://i14.photobucket.com/albums/a309/ ... dows-x.png

for Firefox on Windows XP

http://i14.photobucket.com/albums/a309/ ... -os-x-.png
Firefox on a Mac

and
http://i14.photobucket.com/albums/a309/ ... -os-x-.png
Safari for Mac

I haven't put up IE pics because thats a whole different matter that I can actually see

here is my html

<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">
<html xmlns=\"http://www.w3.org/1999/xhtml\">
<head>
	<meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\" />
	<title>Wes Ascolese- Portfolio</title>
    <link rel=\"icon\" href=\"favicon.ico\" type=\"image/x-icon\">
    <link rel=\"stylesheet\" type=\"text/css\" href=\"style.css\" />
    <script type=\"text/javascript\" src=\"js/prototype.js\"></script>
	<script type=\"text/javascript\" src=\"js/scriptaculous.js?load=effects,builder\"></script>
	<script type=\"text/javascript\" src=\"js/lightbox.js\"></script>
    <link rel=\"stylesheet\" href=\"css/lightbox.css\" type=\"text/css\" media=\"screen\" />
 
	<script type=\"text/javascript\">
		var gal = {
			init : function() {
			if (!document.getElementById || !document.createElement || !document.appendChild) return false;
			if (document.getElementById('gallery')) document.getElementById('gallery').id = 'jgal';
			var li = document.getElementById('jgal').getElementsByTagName('li');
			li[0].className = 'active';
			for (i=0; i<li.length; i++) {
				li[i].style.backgroundImage = 'url(' + li[i].getElementsByTagName('img')[0].src + ')';
				li[i].title = li[i].getElementsByTagName('img')[0].alt;
				gal.addEvent(li[i],'click',function() {
					var im = document.getElementById('jgal').getElementsByTagName('li');
					for (j=0; j<im.length; j++) {
						im[j].className = '';
					}
					this.className = 'active';
				});
			}
		},
		addEvent : function(obj, type, fn) {
			if (obj.addEventListener) {
				obj.addEventListener(type, fn, false);
			}
			else if (obj.attachEvent) {
				obj[\"e\"+type+fn] = fn;
				obj[type+fn] = function() { obj[\"e\"+type+fn]( window.event ); }
				obj.attachEvent(\"on\"+type, obj[type+fn]);
			}
		}
	}
	gal.addEvent(window,'load', function() {
		gal.init();
	});
	
	</script>
    <script type=\"text/javascript\">document.write(\"<style type='text/css'> #gallery { display: none; } </style>\");</script>
</head>

<body>
<div id=\"header\">
    
    	<ul>
        	<li><a href=\"index.php\">Home</a></li>
        	<li><a href=\"portfolio.php\">Portfolio</a></li>
            <li><a href=\"about.php\">About</a></li>
            <li><a href=\"contact.php\">Contact</a></li>
    	</ul>
     
    </div>
    <!-- End Header -->

<div id=\"page-wrap\">
	
    
   <div id=\"main\">
    	<ul id=\"gallery\">
    		<li><a href=\"images/gallery/Claustrophobic.jpg\" rel=\"lightbox[gallery]\"><img src=\"images/gallery/Claustrophobic.jpg\" alt=\"New Media Assignment\" width=\"300\" height=\"388\" /></a></li>
            <li><a href=\"images/gallery/Abstract.jpg\" rel=\"lightbox[gallery]\"><img src=\"images/gallery/Abstract.jpg\" alt=\"New Media Assignment\" width=\"300\" height=\"450\" /></a></li>
            <li><a href=\"images/gallery/DM3.jpg\" rel=\"lightbox[gallery]\"><img src=\"images/gallery/DM3.jpg\" alt=\"Digital Mutilation v3\" width=\"300\" height=\"225\" /></a></li>
            <li><a href=\"images/gallery/DM5.jpg\" rel=\"lightbox[gallery]\"><img src=\"images/gallery/DM5.jpg\" alt=\"Digital Mutilation v5\" width=\"300\" height=\"431\" /></a></li>
            <li><a href=\"images/gallery/Earfood.jpg\" rel=\"lightbox[gallery]\"><img src=\"images/gallery/Earfood.jpg\" alt=\"Ear Food\" width=\"300\" height=\"367\" /></a></li>
            <li><a href=\"images/gallery/NSL4.jpg\" rel=\"lightbox[gallery]\"><img src=\"images/gallery/NSL4.jpg\" alt=\"New Sights Learning\" width=\"300\" height=\"328\" /></a></li>
            <li><a href=\"images/gallery/Pow.jpg\" rel=\"lightbox[gallery]\"><img src=\"images/gallery/Pow.jpg\" alt=\"Pow\" width=\"300\" height=\"300\" /></a></li>
            <li><a href=\"images/gallery/VKTR.jpg\" rel=\"lightbox[gallery]\"><img src=\"images/gallery/VKTR.jpg\" alt=\"Video Killed the Radio\" width=\"300\" height=\"293\" /></a></li>
    	</ul>
        <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> <br /><br /><br /><br />
   </div>
  
    
    
</div>
<!-- End Page-Wrap -->
<div id=\"footer\">
    <p>&copy; Copyright WesAscolese.com All Rights Reserve</p>
    </div>
    <!-- End footer -->

</body>
</html>

and here is my CSS

body
{ 
	background:url(images/bg.jpg);
	font-family:Verdana, Geneva, sans-serif;
	font-size:68.5%;
}

h2 
{ 
	font-size:1.6em);
	color:#827857;
	text-transform:uppercase;
}

h3
{ 
	font-size:1.4em);
	color:#827857;
	text-transform:uppercase;
}

h4
{ 
	font-size:1.2em);
	color:#827857;
	text-transform:uppercase;
}
#page-wrap
{
	
	width:800px;
	margin: 0 auto;
	background:url(images/main-bg.jpg) repeat-y;
}

#header
{
	margin:0 auto;
	background:url(images/banner.jpg);
	width:800px;
	height:155px;
	
}

	#header ul
		{
			margin:0 auto;
			list-style:none;
			font-family:Arial, Helvetica, sans-serif;
			font-size:2.0em;
			font-weight:bold;
			margin-left:195px;
			
		}
	
		#header ul li a
		{
			display:block;
			width:100px;
			float:left;
			color:#fff;
			margin:100px 0 5px 0;
			text-decoration:none;
			text-align:center;
		}
		
		#header ul li a:hover
		{
			color:#e8e4d8;
		}

#main
{
	padding: 5px 170px 30px 170px;
}

#main p
{
	color:#827857;
}



#footer
{
	margin:0 auto;
	background:url(images/footer.jpg);
	width:800px;
	height:191px;
}
	#footer p
	{
		text-align:center;
		padding-top:30px;
		color:#FFF;
		font-size:0.8em;
		text-transform:uppercase;
	}


/* general styling for this example */
* { margin: 0; padding: 0; }
/* begin gallery styling */
#jgal { list-style: none; width: 200px; }
#jgal li { opacity: .5; float: left; display: block; width: 60px; height: 60px; background-position: 50% 50%; cursor: pointer; border: 3px solid #fff; outline: 1px solid #ddd; margin-right: 14px; margin-bottom: 14px; }
#jgal li img { position:fixed; top: 160px; left: 720px; display: none;}
#jgal li.active img { display: block; }
#jgal li.active, #jgal li:hover { outline-color: #bbb; opacity: .99 /* safari bug */ }

/* styling without javascript */
#gallery { list-style: none; display: block; }
#gallery li { float: left; margin: 0 10px 10px 0; }

<!--[if lt IE 8]>
<style media=\"screen,projection\" type=\"text/css\">
#jgal li { filter: alpha(opacity=50); }
#jgal li.active, #jgal li:hover { filter: alpha(opacity=100); }
</style>
<![endif]-->

TheDoc

It's because of this line:

#jgal li img { position:fixed; top: 160px; left: 720px; display: none;}

1. It should not be in a "fixed" position, I think you're looking for "absolute".

2. Why is there even a set position at all? This should be coded differently, preferably simply floating the image to the right.

Wes

Well I changed the line to

#jgal li img { float:right; display: none;}

this is just a gallery that I picked up from the web that is becoming a tad ridiculous and I am getting way to frustrated

now there is an error that I can see

treehouse : what would you like to learn today?

Forums

Error with my gallery in certain browsers