asked on HTML/CSS REL tag not working
I have the following html code.
At the top of my page between the <head></head> I have the following:
The rel tag isn't working...any input on what I need to do would be greatly appreciated!
<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>
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>
The rel tag isn't working...any input on what I need to do would be greatly appreciated!
HTMLCSSImages and Photos
Last Comment
Henry Starcher
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?
ASKER
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.
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.
ASKER
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?
ASKER
http://bentoncomo.com/jail.html
I was able to get it to work locally, but now the live isn't working. :/
I was able to get it to work locally, but now the live isn't working. :/
ASKER CERTIFIED SOLUTION
THIS SOLUTION ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
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
https://www.codeschool.com/courses/discover-devtools
Best of luck with the project, ~Ray
ASKER
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:
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 ...
ASKER
Typing errors are horrible...espically when you're reading tons of coding and miss one uppercase letter that should be lowercase.