Why won't my images work here:
http://www.djcarchitect.com/portfolio/museums.html
the nav bar images work, but the main image isn't showing up.. i'm very confused and stressed about this. Thank you.
Full Version: Why won't my images work?
this is the source, and it's supposed to be behaving like this site: http://monc.se/kitchen/stew/gallery/
!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=iso-8859-1" />
<title>Untitled Document</title>
</head>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta http-equiv="imagetoolbar" content="false">
<meta name="description" content="">
<meta name="keywords" content="">
<style media="screen,projection" type="text/css">
/* general styling for this example */
* { margin: 0; padding: 0; }
body { padding: 0px; }
/* begin gallery styling */
#jgal { list-style: none; width: 150px; height:337px; overflow:auto;}
#jgal li { opacity: .5; float: right; display: block; width: 50px; height: 50px; background-position: 50% 50%; cursor: pointer; border: 3px solid #fff; outline: 1px solid #ddd; margin-right: 6px; margin-bottom: 6px; }
#jgal li img { position: absolute; top: 0px; left: 160px; 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; width: 500px; height:337px; display: block; }
#gallery li { float: left; margin: 0 0px 0px 0; }
</style>
<!--[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]-->
<script type="text/javascript">document.write("<style type='text/css'> #gallery { display: none; } </style>");</script>
<!--[if lt IE 6]><style media="screen,projection" type="text/css">#gallery { display: block; }</style><![endif]-->
<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].style.backgroundRepeat = 'no-repeat';
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>
</head>
<body>
<ul id="gallery">
<li><img src="../../images/Flash Photos/First Natios University of Canada/f1.jpg" width="506" height="337"></li>
<li><img src="../../images/Flash Photos/First Natios University of Canada/f2.jpg" width="506" height="337"></li>
<li><img src="../../images/Flash Photos/First Natios University of Canada/f3.jpg" width="506" height="337"></li>
<li><img src="../../images/Flash Photos/First Natios University of Canada/f4.jpg" width="506" height="337"></li>
<li><img src="../../images/Flash Photos/First Natios University of Canada/f5.jpg" width="506" height="337"></li>
<li><img src="../../images/Flash Photos/First Natios University of Canada/f6.jpg" width="506" height="337"></li>
<li><img src="../../images/Flash Photos/First Natios University of Canada/f7.jpg" width="506" height="337"></li>
<li><img src="../../images/Flash Photos/First Natios University of Canada/f8.jpg" width="506" height="337"></li>
</ul>
</body>
</html>
<body>
</body>
</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=iso-8859-1" />
<title>Untitled Document</title>
</head>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta http-equiv="imagetoolbar" content="false">
<meta name="description" content="">
<meta name="keywords" content="">
<style media="screen,projection" type="text/css">
/* general styling for this example */
* { margin: 0; padding: 0; }
body { padding: 0px; }
/* begin gallery styling */
#jgal { list-style: none; width: 150px; height:337px; overflow:auto;}
#jgal li { opacity: .5; float: right; display: block; width: 50px; height: 50px; background-position: 50% 50%; cursor: pointer; border: 3px solid #fff; outline: 1px solid #ddd; margin-right: 6px; margin-bottom: 6px; }
#jgal li img { position: absolute; top: 0px; left: 160px; 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; width: 500px; height:337px; display: block; }
#gallery li { float: left; margin: 0 0px 0px 0; }
</style>
<!--[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]-->
<script type="text/javascript">document.write("<style type='text/css'> #gallery { display: none; } </style>");</script>
<!--[if lt IE 6]><style media="screen,projection" type="text/css">#gallery { display: block; }</style><![endif]-->
<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].style.backgroundRepeat = 'no-repeat';
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>
</head>
<body>
<ul id="gallery">
<li><img src="../../images/Flash Photos/First Natios University of Canada/f1.jpg" width="506" height="337"></li>
<li><img src="../../images/Flash Photos/First Natios University of Canada/f2.jpg" width="506" height="337"></li>
<li><img src="../../images/Flash Photos/First Natios University of Canada/f3.jpg" width="506" height="337"></li>
<li><img src="../../images/Flash Photos/First Natios University of Canada/f4.jpg" width="506" height="337"></li>
<li><img src="../../images/Flash Photos/First Natios University of Canada/f5.jpg" width="506" height="337"></li>
<li><img src="../../images/Flash Photos/First Natios University of Canada/f6.jpg" width="506" height="337"></li>
<li><img src="../../images/Flash Photos/First Natios University of Canada/f7.jpg" width="506" height="337"></li>
<li><img src="../../images/Flash Photos/First Natios University of Canada/f8.jpg" width="506" height="337"></li>
</ul>
</body>
</html>
<body>
</body>
</html>
Interesting. With JavaScript disabled, FF and Opera show the main image but not the thumbnails. With JavaScript enabled, FF and Opera show only the thumbnails. Chrome and Safari show both the thumbnails and the main image.
Your site lacks a doctype, which throws browsers into quirks mode:
http://hsivonen.iki.fi/doctype/
Our online validator reports markup errors:
http://htmlhelp.com/cgi-bin/validate.cgi?u...mp;warnings=yes
The FF JavaScript console reports errors:
Security Error: Content at http://www.djcarchitect.com/portfolio/museums.html may not load or link to file:///G|/PROMOTIONAL/CSS/a_tag_effects.css.
Warning: The stylesheet http://www.djcarchitect.com/CSS/a_tag_effects.css was loaded as CSS even though its MIME type, "text/plain", is not "text/css".
Source File: http://www.djcarchitect.com/portfolio/museums.html
Line: 0
Error: delay_hide is not defined
Source File: http://www.djcarchitect.com/portfolio/museums.html
Line: 212
Your site lacks a doctype, which throws browsers into quirks mode:
http://hsivonen.iki.fi/doctype/
Our online validator reports markup errors:
http://htmlhelp.com/cgi-bin/validate.cgi?u...mp;warnings=yes
The FF JavaScript console reports errors:
Security Error: Content at http://www.djcarchitect.com/portfolio/museums.html may not load or link to file:///G|/PROMOTIONAL/CSS/a_tag_effects.css.
Warning: The stylesheet http://www.djcarchitect.com/CSS/a_tag_effects.css was loaded as CSS even though its MIME type, "text/plain", is not "text/css".
Source File: http://www.djcarchitect.com/portfolio/museums.html
Line: 0
Error: delay_hide is not defined
Source File: http://www.djcarchitect.com/portfolio/museums.html
Line: 212
thank you for your reply.would any of these errors be causing it not to work? I am so utterly confused about why it isn't working.
http://www.djcarchitect.com/portfolio/page...onalimages.html
This is the page itself. the problem is with this part of the page, that's clearly where it lies, but i can't figure out what it is. when it's being plopped into the frame on the main page, it already has the problem. i will add a doctype, but that won't change this other page, will it ?
Interesting. With JavaScript disabled, FF and Opera show the main image but not the thumbnails. With JavaScript enabled, FF and Opera show only the thumbnails. Chrome and Safari show both the thumbnails and the main image.
Your site lacks a doctype, which throws browsers into quirks mode:
http://hsivonen.iki.fi/doctype/
Our online validator reports markup errors:
http://htmlhelp.com/cgi-bin/validate.cgi?u...mp;warnings=yes
The FF JavaScript console reports errors:
Security Error: Content at http://www.djcarchitect.com/portfolio/museums.html may not load or link to file:///G|/PROMOTIONAL/CSS/a_tag_effects.css.
Warning: The stylesheet http://www.djcarchitect.com/CSS/a_tag_effects.css was loaded as CSS even though its MIME type, "text/plain", is not "text/css".
Source File: http://www.djcarchitect.com/portfolio/museums.html
Line: 0
Error: delay_hide is not defined
Source File: http://www.djcarchitect.com/portfolio/museums.html
Line: 212
http://www.djcarchitect.com/portfolio/page...onalimages.html
This is the page itself. the problem is with this part of the page, that's clearly where it lies, but i can't figure out what it is. when it's being plopped into the frame on the main page, it already has the problem. i will add a doctype, but that won't change this other page, will it ?
QUOTE(Darin McGrew @ Jul 29 2010, 04:47 PM) 
Interesting. With JavaScript disabled, FF and Opera show the main image but not the thumbnails. With JavaScript enabled, FF and Opera show only the thumbnails. Chrome and Safari show both the thumbnails and the main image.
Your site lacks a doctype, which throws browsers into quirks mode:
http://hsivonen.iki.fi/doctype/
Our online validator reports markup errors:
http://htmlhelp.com/cgi-bin/validate.cgi?u...mp;warnings=yes
The FF JavaScript console reports errors:
Security Error: Content at http://www.djcarchitect.com/portfolio/museums.html may not load or link to file:///G|/PROMOTIONAL/CSS/a_tag_effects.css.
Warning: The stylesheet http://www.djcarchitect.com/CSS/a_tag_effects.css was loaded as CSS even though its MIME type, "text/plain", is not "text/css".
Source File: http://www.djcarchitect.com/portfolio/museums.html
Line: 0
Error: delay_hide is not defined
Source File: http://www.djcarchitect.com/portfolio/museums.html
Line: 212
ok if i swap out the first part of the html of the template with mine, it works better. so where is my problem ?
this is the template html:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Lightweight Image Gallery</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta http-equiv="imagetoolbar" content="false">
<meta name="description" content="">
<meta name="keywords" content="">
<style media="screen,projection" type="text/css">
/* general styling for this example */
* { margin: 0; padding: 0; }
body { padding: 20px; }
/* 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: absolute; top: 20px; left: 220px; 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; }
This 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=iso-8859-1" />
<title>Untitled Document</title>
</head>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta http-equiv="imagetoolbar" content="false">
<meta name="description" content="">
<meta name="keywords" content="">
<style media="screen,projection" type="text/css">
/* general styling for this example */
* { margin: 0; padding: 0; }
body { padding: 0px; }
/* begin gallery styling */
#jgal { list-style: none; width: 150px; height:337px; overflow:auto;}
#jgal li { opacity: .5; float: right; display: block; width: 50px; height: 50px; background-position: 50% 50%; cursor: pointer; border: 3px solid #fff; outline: 1px solid #ddd; margin-right: 6px; margin-bottom: 6px; }
#jgal li img { position: absolute; top: 0px; left: 160px; 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; width: 500px; height:337px; display: block; }
#gallery li { float: left; margin: 0 0px 0px 0; }
there seems to be something within this part that is different and causing the problem....
this is the template html:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Lightweight Image Gallery</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta http-equiv="imagetoolbar" content="false">
<meta name="description" content="">
<meta name="keywords" content="">
<style media="screen,projection" type="text/css">
/* general styling for this example */
* { margin: 0; padding: 0; }
body { padding: 20px; }
/* 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: absolute; top: 20px; left: 220px; 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; }
This 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=iso-8859-1" />
<title>Untitled Document</title>
</head>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta http-equiv="imagetoolbar" content="false">
<meta name="description" content="">
<meta name="keywords" content="">
<style media="screen,projection" type="text/css">
/* general styling for this example */
* { margin: 0; padding: 0; }
body { padding: 0px; }
/* begin gallery styling */
#jgal { list-style: none; width: 150px; height:337px; overflow:auto;}
#jgal li { opacity: .5; float: right; display: block; width: 50px; height: 50px; background-position: 50% 50%; cursor: pointer; border: 3px solid #fff; outline: 1px solid #ddd; margin-right: 6px; margin-bottom: 6px; }
#jgal li img { position: absolute; top: 0px; left: 160px; 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; width: 500px; height:337px; display: block; }
#gallery li { float: left; margin: 0 0px 0px 0; }
there seems to be something within this part that is different and causing the problem....
One way to narrow down a problem like this is to start with the version that works, and change it to the version that doesn't work one change at a time. Check whether it still works after each change. When it no longer works, that will show you one of the key changes that breaks it.
BTW, you don't specify a background color for the page.
Style sheets should contain just the CSS. Your a_tag_effects.css includes a log of extraneous markup that should be removed.
Some of your style sheet paths are broken. This one refers to a file on your local filesystem, which will not be available to anyone else:
<link href="file:///G|/PROMOTIONAL/CSS/a_tag_effects.css" rel="stylesheet" type="text/css" />
This one returns 404 Not Found:
<link href="../../Templates/public_html/CSS/a_tag_effects.css" rel="stylesheet" type="text/css" />
BTW, you don't specify a background color for the page.
Style sheets should contain just the CSS. Your a_tag_effects.css includes a log of extraneous markup that should be removed.
Some of your style sheet paths are broken. This one refers to a file on your local filesystem, which will not be available to anyone else:
<link href="file:///G|/PROMOTIONAL/CSS/a_tag_effects.css" rel="stylesheet" type="text/css" />
This one returns 404 Not Found:
<link href="../../Templates/public_html/CSS/a_tag_effects.css" rel="stylesheet" type="text/css" />
Thanks for all of the help.
I surprisingly identified the problem using that method. It's the line where I added in the overflow: auto - for some reason, it's not liking that.
So i have that changed, and i went to upload the changes, and it's deleting everything. like zero source code. why would this happen?
here's an example of the page I just updated and fixed, then uploaded and it comes up blank:
http://www.djcarchitect.com/portfolio/page...s/AGimages.html
is this because i'm working away from my office maybe?
One way to narrow down a problem like this is to start with the version that works, and change it to the version that doesn't work one change at a time. Check whether it still works after each change. When it no longer works, that will show you one of the key changes that breaks it.
BTW, you don't specify a background color for the page.
Style sheets should contain just the CSS. Your a_tag_effects.css includes a log of extraneous markup that should be removed.
Some of your style sheet paths are broken. This one refers to a file on your local filesystem, which will not be available to anyone else:
<link href="file:///G|/PROMOTIONAL/CSS/a_tag_effects.css" rel="stylesheet" type="text/css" />
This one returns 404 Not Found:
<link href="../../Templates/public_html/CSS/a_tag_effects.css" rel="stylesheet" type="text/css" />
I surprisingly identified the problem using that method. It's the line where I added in the overflow: auto - for some reason, it's not liking that.
So i have that changed, and i went to upload the changes, and it's deleting everything. like zero source code. why would this happen?
here's an example of the page I just updated and fixed, then uploaded and it comes up blank:
http://www.djcarchitect.com/portfolio/page...s/AGimages.html
is this because i'm working away from my office maybe?
QUOTE(Darin McGrew @ Jul 29 2010, 05:30 PM)
One way to narrow down a problem like this is to start with the version that works, and change it to the version that doesn't work one change at a time. Check whether it still works after each change. When it no longer works, that will show you one of the key changes that breaks it.
BTW, you don't specify a background color for the page.
Style sheets should contain just the CSS. Your a_tag_effects.css includes a log of extraneous markup that should be removed.
Some of your style sheet paths are broken. This one refers to a file on your local filesystem, which will not be available to anyone else:
<link href="file:///G|/PROMOTIONAL/CSS/a_tag_effects.css" rel="stylesheet" type="text/css" />
This one returns 404 Not Found:
<link href="../../Templates/public_html/CSS/a_tag_effects.css" rel="stylesheet" type="text/css" />
Something went wrong with your upload. The server is sending a "Content-Length: 0" file.
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.