problems implementing css on website

Question

I am trying to implement some BASIC css onto my website - it is a simple tree type menu.

Here is the test page I have created for it: http://www.worldheritagetrip.com/1309-2/

Here is the working jsfiddle: https://jsfiddle.net/fadmrdbm/

and the code:

<ul class="collapsibleList">
 <li>
  <label for="mylist-node1">Click to open list 1</label>
  <input type="checkbox" id="mylist-node1" />
  <ul>
   <li>Item 1</li>
   <li>Item 2</li>
   <li>Item 3</li>
  </ul>
 </li>
 <li>
  <label for="mylist-node2">Click to open list 2</label>
  <input type="checkbox" id="mylist-node2" />
  <ul>
   <li>Item 1</li>
   <li>Item 2</li>
   <li>Item 3</li>
  </ul>
 </li>
</ul>

and the css:

.collapsibleList li > input + * {
 display: none;
}

.collapsibleList li > input:checked + * {
 display: block;
}

.collapsibleList label {
 cursor: pointer;
}

I have copied the html and css EXACTLY to my wordpress page and it fails :(

Can someone spot the problem?

Answer 1

How are you implementing your CSS? In your HTML with or in a seperate file? If it is seperate, you need to link your CSS file with <link href="CSSFILE.css" rel="stylesheet" type="text/css"> . It will also need to be in the same directory.

Answer 2

The problem is that Wordpress has added extra tags to your HTML in order to try and help with the output.

Take a look at this jsfiddle - in it, the HTML from your site for the element in question is directly added from the rendered wordpress output and the same problem exhibits itself. Wordpress has added a p tag,

The declaration .collapsibleList li > input + * hits any tag, regardless of type, that is directly following an input. In your original jsfiddle, you used the HTML you pasted into WordPress, without the extra added tags, so the ul was directly after the input. With Wordpresses added p tag, the ul is now not directly following the input.

You can even see this in your page, the list is appearing when it shouldn't, but the click is also acting on the p tag and that is showing and hiding itself and creating the extra whitespace that you can see there.

Select the p tag in the inspector. You'll see the margin-bottom that is making the whitespace changes and you'll also see the css selector above applied to it. Also in the inspector you can just delete the p tag (and don't refresh the page) then see that your list works as expected as it falls back into the css selector defined.

You can get rid of erroneous WordPress tags by making sure you leave no white-space in the HTML, or you could look at a JavaScript solution that would probably be more robust.

For the record, JSFiddle takes the contents of your boxes and ensures they load, so you can drop something in their and see it working in an isolated sense but it won't direct you towards issues with external libraries, wordpress processing or missing definitions.