1

I've got this piece of CSS/HTML code that works good on jsfiddle and when I do a test.html on my browser but when I try to use it on a wordpress page (style in style.css and html on the page) just does not work.

I checked all the possibilities I could, there is no overwriting from the style, no browser problem... little help?

This is the test site: http://manuscript.bugs3.com/

https://jsfiddle.net/1zeatcxp/

input#show, input#hide {
    display:none;
}

div#paragraph {
    display:none;
}
input#show:checked ~ div#paragraph {
  display:block;
}

input#hide:checked ~ div#paragraph {
    display:none;
}

.showthis {
 float: left;
 background-color:#9b2f00;
 border-style: solid black 1px;
 color: #f2e07b; 
 padding: 5px;
 box-shadow: 3px 3px 3px black;
 text-align: center;
 width: 80%;
}
.hidethis {
 float: right;
 background-color:#9b2f00;
 border-style: solid black 1px;
 color: #f2e07b; 
 padding: 5px;
 box-shadow: 3px 3px 3px black;
<label for="show">
 <div class="showthis">
    <span>[Show]</span></div></label><input type=radio id="show" name="group"><label for="hide"><div class="hidethis"><span>[Hide]</span></div></label>    
<input type=radio id="hide" name="group">
<div id="paragraph">Content</span>
Lipton
  • 49
  • 1
  • 6
  • There are a few errors in your HTML that you should try fixing first, see: http://validator.w3.org/check?uri=http%3A%2F%2Fmanuscript.bugs3.com%2F&charset=%28detect+automatically%29&doctype=Inline&group=0 – pschueller Mar 13 '15 at 00:32
  • Thanks for the link. I can see it gives me quite few errors but I don't know in which file they are. The only html in this post is the one I wrote, also firebug does not detect any

    tag, to say one

     – Lipton Mar 13 '15 at 00:59
  • Ok, I deleted all the errors in the post, I'm fixing the remaining but they should not be relevant. Seems like WP by default adds a lot of

    tag which you can't really see or control, so I added: at the beginning of my template php, cut-unformatted-pasted the code in the post again and voilà!, 10 errors are gone. The problem still persists though: no content showing and sidebar was moved down

     – Lipton Mar 13 '15 at 01:17
  • Try removing the script call on line 161, it seems to be causing problems. ` ` If you can't find it in your template, check your wordpress plugins. – pschueller Mar 13 '15 at 01:36
  • That script seems to be like an agreement from the server, so I didn't want to delete it in order not to break the terms and conditions. Instead, I added: php_value auto_append_file none in my .htaccess file, and now no errors anymore are detected, and this is awesome. *BUT* the code still does not work =( – Lipton Mar 13 '15 at 01:49

1 Answers1

0

It looks like your HTML is being mangled by the wordpress editor, this is what I see on your page:

<div class="showthis">[Show]</div>
<p><input id="show" name="group" type="radio"><label for="hide"><br>
</label></p>
<div class="hidethis">[Hide]</div>
<p><label for="hide"></label><br>
<input id="hide" name="group" type="radio"></p>
<div id="paragraph">
    <p>Content</p>
</div>

As you already discovered, remove_filter ('the_content', 'wpautop'); is the correct way to deal with this problem. You must make sure to place this in the functions.php file of your theme.

Edit:

Try it with the following HTML:

<label for="show"><span class="showthis">[Show]</span></label>
<input type=radio id="show" name="group">
<label for="hide"><span class="hidethis">[Hide]</span></label>    
<input type=radio id="hide" name="group">
<div id="paragraph">Content</div>

You should not be nesting block-level divs inside of label elements. It is not valid HTML, see https://stackoverflow.com/a/18609649/2126792.

Community
  • 1
  • 1
pschueller
  • 4,362
  • 2
  • 27
  • 50
  • Thanks for following me. I added it and cut-paste the code. Also tried opening another post (test03): the source code does not have any unnecessary

    tag anymore but still it does not do what it should.

     – Lipton Mar 13 '15 at 02:11
  • The paragraph tags are gone, but your labels are still nested incorrectly. Also try changing the divs inside of the labels to spans. Nesting divs inside of labels is not valid html. – pschueller Mar 13 '15 at 02:20
  • That was it, div inside the label! Now I changed it, works perfectly and I learned much through this mistake. My sincere thanks. – Lipton Mar 13 '15 at 02:48