HTML/CSS REL tag not working

Henry Starcher
Henry Starcher used Ask the Experts™
on
I have the following html code.
<div class="gallery">
<a rel="lightbox" href="images/jail/original%20jail.jpg" title="The Original Jail">
	<img alt="original jail" src="images/jail/original%20jail_small.jpg" class="image-border" /></a>
<a href="images/jail/current 1.jpg" rel="lightbox" title="The Original Jail">
	<img alt="original jail" src="images/jail/current 1_small.jpg" class="image-border" /></a>
<a href="images/jail/current_2.jpg" rel="lightbox" title="The Original Jail">
	<img alt="original jail" src="images/jail/current 2_small.jpg" class="image-border" /></a>
<a href="images/jail/current_3.jpg" rel="lightbox" title="The Original Jail">
	<img alt="original jail" src="images/jail/current 3_small.jpg" class="image-border" /></a>
<a href="images/jail/current_4.jpg" rel="lightbox" title="The Original Jail">
	<img alt="original jail" src="images/jail/current 4_small.jpg" class="image-border" /></a>
</div>

Open in new window


At the top of my page between the <head></head> I have the following:
<link rel="stylesheet" type="text/css" href="styles/style.css" />
<link rel="stylesheet" type="text/css" href="styles/lightbox.css" media="screen" />
<script type="text/javascript" src="Scripts/lightbox.js"></script>

Open in new window


The rel tag isn't working...any input on what I need to do would be greatly appreciated!
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Henry StarcherConsultant

Author

Commented:
This HTML document is in the root folder. The lightbox.css stylesheet is in a styles folder which is located in the root folder. The page is pulling styles from the style.css sheet, just not the lightbox.css sheet.
Most Valuable Expert 2011
Top Expert 2016

Commented:
How do you know it's not getting the lightbox.css styles?  What is the signal that lets you see this?
Henry StarcherConsultant

Author

Commented:
Ray--

The lightbox css is supposed to have pictures open in an overlay with a description underneath. When clicking on the icon to get to the larger picture it just opens the photo in a different window.
Ensure you’re charging the right price for your IT

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

Henry StarcherConsultant

Author

Commented:
I can't tell if it's the CSS not doing what it should be doing or the JS. Both are referenced in the head. I didn't touch the coding for either from the original that was downloaded and it worked at that point so I'm confused as to why it's not working. I'm just assuming that I'm not referencing it correctly.
Most Valuable Expert 2011
Top Expert 2016

Commented:
Can you please give us a link to a URL where we can see the issue live?
Henry StarcherConsultant

Author

Commented:
http://bentoncomo.com/jail.html

I was able to get it to work locally, but now the live isn't working. :/
Consultant
Commented:
Nevermind. I finally was able to find it. My folder path had Scripts/lightbox.js instead of the lowercase scripts/lightbox.js...that was all it took to break it.

Seemed to get it working now.
Most Valuable Expert 2011
Top Expert 2016

Commented:
Going forward, you can usually catch something like that very quickly if you use Chrome Dev Tools.
https://www.codeschool.com/courses/discover-devtools

Best of luck with the project, ~Ray
Henry StarcherConsultant

Author

Commented:
Ray, thanks for that tool!
warsawtech,

I suppose, you have on your local computer Windows, where file and folder names are not case sensitive. Your web server has probably some version of Unix (or, closer, Linux), which are operating systems where file and folder (directory) names are case sensitive.

E.g, for file names:
in Windows: abc.txt = ABC.tXt = Abc.txT = ...
in Linux: abc.txt <> ABC.tXt ...
Henry StarcherConsultant

Author

Commented:
Typing errors are horrible...espically when you're reading tons of coding and miss one uppercase letter that should be lowercase.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial