Link to home
Create AccountLog in
Avatar of Henry Starcher
Henry StarcherFlag for United States of America

asked on

HTML/CSS REL tag not working

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!
Avatar of Henry Starcher
Henry Starcher
Flag of United States of America image

ASKER

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.
How do you know it's not getting the lightbox.css styles?  What is the signal that lets you see this?
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.
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.
Can you please give us a link to a URL where we can see the issue live?
http://bentoncomo.com/jail.html

I was able to get it to work locally, but now the live isn't working. :/
ASKER CERTIFIED SOLUTION
Avatar of Henry Starcher
Henry Starcher
Flag of United States of America image

Link to home
membership
Create an account to see this answer
Signing up is free. No credit card required.
Create Account
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
Ray, thanks for that tool!
Avatar of brundo
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 ...
Typing errors are horrible...espically when you're reading tons of coding and miss one uppercase letter that should be lowercase.