Code element not saving HTML code...

Hi.

I'm moving along well now, but still have a ton to learn. I've added a "code" element to a section on the CAHDental page. In that section, I've added a span, a link, and two images. With CSS, I've styled the images to act like a "rollover". I save the HTML and CSS without error and no syntax validations in the editor window. While I'm on the page, the rollover picture is there and works flawlessly. I save the editor code and save the "site" with the save button on the left.

I then can go to edit another page. When I come back to the dental page, my HTML, and thus my rollover, is gone! Oddly enough, the CSS is saved.

Here's my HTML code:

<span id="CAH22">

<img src="http://www.clarksburganimalhospital.com/wptest/wp-content/uploads/2016/05/canine_before.jpg">
<img src="http://www.clarksburganimalhospital.com/wptest/wp-content/uploads/2016/05/canine_after.jpg">

</span>

Any help you can provide is greatly appreciated. I've also enabled support access to the site.

PS: The rollover was found searching the wordpress support forum. I could only wish to be that smart.

  • Nithin

    Hi Dewey,

    Hope you are doing good today.

    There CSS provided are missing semicolons, and this might not render properly in your browser, please try the following code:

    /* Your styles here */
    img.nohover {
    border:0;
    }
    img.hover {
    border:0;
    display:none;
    }
    a:hover img.hover {
    display:inline;
    }
    a:hover img.nohover {
    display:none;
    }
    
    #CAH22 {
        display:table;
        margin:0 auto;
    }

    Since the hover effect is implemented using a class "hover", you'll have to make changes to your html code by adding those classes to make it work.

    <span id="CAH22">
       <a href="#">
           <img class="nohover" src="http://www.clarksburganimalhospital.com/wptest/wp-content/uploads/2016/05/canine_before.jpg">
           <img class="hover" src="http://www.clarksburganimalhospital.com/wptest/wp-content/uploads/2016/05/canine_after.jpg">
       </a>
    </span>

    Glad to know your interest in HTML and CSS, if you are looking to brush up your skills, you can find many online tutorials. If you find yourself stuck at any point, we would be happy to get it sorted.

    I hope this helps. Have nice day.

    Kind Regards,
    Nithin

  • Dewey

    Thank you for the quick response!

    I'm not saying that the HTML & CSS doesn't work. The last CSS tag in the list doesn't require a semicolon as its directly followed by a closing brace. The HTML and CSS does work exactly as expected with the above code. Further, the "validator" in the editor doesn't flag the CSS as having issues.

    The actual issue is with saving the HTML and code. I can add the code through the editor and click save. I get the little grey window dropping in from the top of the page saying the changes were saved. The rollover works fine.

    However if I go on to edit another page, then come back to edit this page, the images no longer display and the HTML is NOT saved and does not appear in the editor.

  • Nithin

    Hi Dewey,

    As you are right in mentioning that a semi colon is not need if it's a last rule, I suggested to add those to make sure, we don't rule out if there is an error from the CSS side. I believe this is the page we are talking about, I just added the above mentioned code, and tried to follow your directions by editing another page and coming back, but now the page works fine and images display properly with html codes. Please advise if I'm missing out anything here. Possibly a screenshot would be easy to point things out.

    Have a nice day.

    Kind Regards,
    Nithin