My ID is not being applied

Question

I am working on a project and I basically copied and pasted some code I had made before that I know worked. The only difference is that now, the index.html and index.css is in a different folder. The CSS is being applied but the ID's at the bottom are not for some reason. Still, if you preview it on this website, it is completely fine.

/*
font-family: 'Dosis', sans-serif;
font-family: 'Chewy', cursive;

HEX: #fff2df
HEX: #d9ad7c
HEX: #a2836e
HEX: #674d3c
*/

body {
  font-family: 'Dosis', sans-serif;
  background: #fff2df;
}


/* Matan's Website */

h1 {
  font-family: 'Chewy', cursive;
  font-size: 65px;
  text-align: center;
}


/* Line */

hr {
  width: 600px;
  border-style: solid;
  margin-top: -15px;
}


/* All Boxes */

ul {
  overflow: hidden;
  text-align: center;
}

li {
  float: center;
  text-align: center;
  display: inline-block;
}

a {
  background-color: #000;
  border-radius: 20px;
  z-index: 100;
}

.buttons {
  list-style-type: none;
  margin: 0;
  padding: 0;
  text-align: center;
  width: 100%;
}

.links {
  font-size: 37.5px;
  text-decoration: none;
  display: inline-block;
  text-align: center;
}


/* Individual Boxes */

#word {
  background-image: url('Pictures/word.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%;
  padding: 162.75px 119.25px;
  margin: 65px 75px 0px 0px;
  color: #fff;
  transition: all 0.5s ease-out;
}

#word:hover {
  padding: 189.875px 139.125px;
  transition: all 0.5s ease-out;
  opacity: 0.8;
  margin-right: 63.4px;
  margin-left: -28.125px;
  margin-top: 37.875px;
}

#pwpoint {
  background-image: url('Pictures/powerpoint.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 162.75px 69.75px;
  margin: 65px 75px 0px 0px;
  color: #fff;
  transition: all 0.5s ease-out;
}

#pwpoint:hover {
  padding: 189.875px 81.375px;
  transition: all 0.5s ease-out;
  opacity: 0.8;
  margin-right: 63.275px;
  margin-left: -11.5px;
  margin-top: 37.875px;
}

#ptshop {
  background-image: url('../Pictures/photoshop.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 162.75px 99px;
  margin: 65px 0px 0px 0px;
  color: #fff;
  transition: all 0.5s ease-out;
}

#ptshop:hover {
  padding: 189.875px 115.5px;
  transition: all 0.5s ease-out;
  opacity: 0.8;
  margin-right: -28.125px;
  margin-left: -4.9px;
  margin-top: 37.875px;
}

<!DOCTYPE html>
<html>

<head>
  <title>Portfolio</title>
  <link rel="stylesheet" type="text/css" href="../index.css">
  <link href="https://fonts.googleapis.com/css?family=Chewy|Dosis" rel="stylesheet">
</head>

<body>
  <h1>My Portfolio</h1>
  <hr>
  <div class="allbuttons">
    <ul class="buttons">
      <li><a class="links" id="word" href="Word/index.html">Word</a></li>
      <li><a class="links" id="pwpoint" href="Powerpoint/index.html">Powerpoint</a></li>
      <li><a class="links" id="ptshop" href="Photoshop/index.html">Photoshop</a></li>
      <li><a class="links" id="other" href="Other/index.html">Other</a></li>
    </ul>
  </div>
</body>

</html>

None of the IDs work, but the CSS file is linked correctly and displayed correctly. Any ideas why this might be?

@Swellar I know. This is why I am so confused. Any ideas why? — Matan Berkovsky, Jun 16 '17 at 02:27
Is it possible that another stylesheet is interfering with your result on your production server? — Fred Gandt, Jun 16 '17 at 02:28
@FredGandt maybe. I have tons of index.css named files but they are all in different folders. this index.html file has the correctly linked css file. Its very weird that only the ID's are not getting applied. — Matan Berkovsky, Jun 16 '17 at 02:33
Have you tried a hard refresh yet? It's a good suggestion to start off with. — Fred Gandt, Jun 16 '17 at 02:34
OK, now try using an absolute URL to the CSS - starting with `http(s)`. — Fred Gandt, Jun 16 '17 at 02:38
@FredGandt I am using a file on my computer. This is not live on the web yet. — Matan Berkovsky, Jun 16 '17 at 02:42
I highly recommend installing and using a localhost server for development work. I use [XAMPP](https://www.apachefriends.org/download.html) (free and nice). But for now, just make the path to the file complete, to eliminate the possibility of that being an error (as you say, you have lots of other files by the same name). — Fred Gandt, Jun 16 '17 at 02:44
@FredGandt still nothing. also, if the path to the file was not complete the rest of the css wouldn't show up. the problem is every css selector but the ids show up. very weird. — Matan Berkovsky, Jun 16 '17 at 02:47
"if the path to the file was not complete the rest of the css wouldn't show up" unless the rules are being picked up from the file you copied this one from. I am just trying to eliminate the possible issues we here cannot see, but that might exist. As the snippet shows, there is no reason for the `id`s to not have the rules applied, so it *must* be a configuration issue. — Fred Gandt, Jun 16 '17 at 02:51
@FredGandt that solved my problem. thank you very much for your help. — Matan Berkovsky, Jun 16 '17 at 02:56
If you have any comments in the file on your computer, make sure they're closed correctly. I know this seems obvious, but I've wasted hours looking for solutions when all that was missing was a semi-colon or comma (these things happen). — Fred Gandt, Jun 16 '17 at 02:57
@FredGandt yep. I know what you mean. I checked everything through and I just needed to add a folder to the css link on the html. thank you. — Matan Berkovsky, Jun 16 '17 at 03:00
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/146920/discussion-between-matan-berkovsky-and-fred-gandt). — Matan Berkovsky, Jun 17 '17 at 04:07

score 1 · Answer 1 · answered Jun 16 '17 at 03:12

"Eliminate all other factors, and the one which remains must be the truth."

As Sherlock Holmes frequently pointed out, when searching for the truth (in this case, a solution) we must first eliminate the clutter.

Relative vs. Absolute URLs are convenient when accurate, but prone to error for a variety of reasons.

A tidy workspace is invaluable; when coding any project, create and maintain a controlled and suitable space to help with avoiding and diagnosing problems that might crop up.

...

Other mildly patronising platitudes are available on request ;-)

My ID is not being applied

1 Answers1

"Eliminate all other factors, and the one which remains must be the truth."