The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

> Why won't my images work?, Please help :( I'm really stressing out.
alymarcotte
post Jul 29 2010, 02:53 PM
Post #1


Newbie
*

Group: Members
Posts: 11
Joined: 3-September 08
Member No.: 6,579



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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
 
Reply to this topicStart new topic
Replies(1 - 7)
alymarcotte
post Jul 29 2010, 03:41 PM
Post #2


Newbie
*

Group: Members
Posts: 11
Joined: 3-September 08
Member No.: 6,579



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>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Darin McGrew
post Jul 29 2010, 03:47 PM
Post #3


WDG Member
********

Group: Root Admin
Posts: 8,017
Joined: 4-August 06
From: Mountain View, CA
Member No.: 3



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


--------------------
Darin McGrew
WDG Member since 1998
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
alymarcotte
post Jul 29 2010, 03:59 PM
Post #4


Newbie
*

Group: Members
Posts: 11
Joined: 3-September 08
Member No.: 6,579



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 ?


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

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
alymarcotte
post Jul 29 2010, 04:02 PM
Post #5


Newbie
*

Group: Members
Posts: 11
Joined: 3-September 08
Member No.: 6,579



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....
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Darin McGrew
post Jul 29 2010, 04:30 PM
Post #6


WDG Member
********

Group: Root Admin
Posts: 8,017
Joined: 4-August 06
From: Mountain View, CA
Member No.: 3



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" />


--------------------
Darin McGrew
WDG Member since 1998
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
alymarcotte
post Jul 29 2010, 04:34 PM
Post #7


Newbie
*

Group: Members
Posts: 11
Joined: 3-September 08
Member No.: 6,579



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?


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" />

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Darin McGrew
post Jul 29 2010, 07:44 PM
Post #8


WDG Member
********

Group: Root Admin
Posts: 8,017
Joined: 4-August 06
From: Mountain View, CA
Member No.: 3



Something went wrong with your upload. The server is sending a "Content-Length: 0" file.


--------------------
Darin McGrew
WDG Member since 1998
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 22nd October 2014 - 10:01 PM