Why won't my images work?, Please help :( I'm really stressing out. |
Why won't my images work?, Please help :( I'm really stressing out. |
alymarcotte |
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. |
alymarcotte |
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> |
Darin McGrew |
Jul 29 2010, 03:47 PM
Post
#3
|
WDG Member Group: Root Admin Posts: 8,365 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 |
alymarcotte |
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 ? 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 |
alymarcotte |
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.... |
Darin McGrew |
Jul 29 2010, 04:30 PM
Post
#6
|
WDG Member Group: Root Admin Posts: 8,365 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" /> |
alymarcotte |
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? 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 |
Jul 29 2010, 07:44 PM
Post
#8
|
WDG Member Group: Root Admin Posts: 8,365 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.
|
Lo-Fi Version | Time is now: 26th April 2024 - 02:38 PM |