Title: Button styling error
Last modified: August 30, 2016

---

# Button styling error

 *  [lauratraveler](https://wordpress.org/support/users/lauratraveler/)
 * (@lauratraveler)
 * [10 years, 7 months ago](https://wordpress.org/support/topic/button-styling-error/)
 * Hey,
 * I get the following HTML error:
 * > Element style not allowed as child of element p in this context.
 * for `<style type="text/css" media="screen">#kadbtn43:hover{background: !important;
   color:#FFF !important}</style>` in the w3 validator. This happens when I place
   a button inside blog post. Each button has a different number, like #kadbtn43
   or #kadbtn46.
 * I wonder what might be causing this and how to fix it. I guess it’s a button 
   styling problem?…
 * Thanks!

Viewing 9 replies - 1 through 9 (of 9 total)

 *  Thread Starter [lauratraveler](https://wordpress.org/support/users/lauratraveler/)
 * (@lauratraveler)
 * [10 years, 7 months ago](https://wordpress.org/support/topic/button-styling-error/#post-6751675)
 * I also get the following CSS error for each button:
 * > #kadbtn26:hover Value Error : background Parse Error !important
   >  Value Error:
   > background-color Parse Error :
 *  [Ben Ritner – Kadence WP](https://wordpress.org/support/users/britner/)
 * (@britner)
 * [10 years, 6 months ago](https://wordpress.org/support/topic/button-styling-error/#post-6751860)
 * Hey,
    This just has to do with the paragraph tag surrounding your button. You
   can surround the button in a div which will make validator feel better. It’s 
   really pretty silly though. It won’t have any effect on the output.
 * `<div>[shortcode]</div>`
 * For the second part can you post a link?
 * Kadence Themes
 *  Thread Starter [lauratraveler](https://wordpress.org/support/users/lauratraveler/)
 * (@lauratraveler)
 * [10 years, 6 months ago](https://wordpress.org/support/topic/button-styling-error/#post-6751862)
 * Hey,
 * Changing the <p> surrounding the button with a <div> doesn’t seem to change anything.
 * Here’s the link – travelersuniverse.com/best-christmas-markets-in-europe
 * Many thanks.
 *  [Ben Ritner – Kadence WP](https://wordpress.org/support/users/britner/)
 * (@britner)
 * [10 years, 6 months ago](https://wordpress.org/support/topic/button-styling-error/#post-6751892)
 * Hey,
    Looked at your site, you actual errors (validator is only a tool and it’s“
   errors” don’t actually have effect on your ranking or performance, although they
   can, the ones you mention above don’t). Your javascript is not loading correctly.
   Looks like you might be trying to defer or move where jquery is loaded.. because
   you have this error: Uncaught ReferenceError: jQuery is not defined. That can
   effect how your site looks and works and I suggest fixing your minify settings.
 * As for the shortcode validator doesn’t want style in a div either… I’ll update
   the toolkit plugin, add a little code that should make the validator leave alone
   and not show as error so there is no needless confusion.
 * Kadence Themes
 *  Thread Starter [lauratraveler](https://wordpress.org/support/users/lauratraveler/)
 * (@lauratraveler)
 * [10 years, 6 months ago](https://wordpress.org/support/topic/button-styling-error/#post-6751901)
 * Thanks! Can you please tell me how you got the
 * > error: Uncaught ReferenceError: jQuery is not defined.
 *  error? Just so that I can check whether I managed to fix it or not.
 * Also, I’m a bit confused as of which jQuery is causing the error. I have a jquery.
   js?ver=1.11.3 that hasn’t been minified, so I guess this isn’t the problem. I
   also have a jquery-migrate embedded in the <head> and a jquery.form.min.js embedded
   in <body> and they are both minified. Any idea which one is causing the trouble?
   Many thanks!
 *  Thread Starter [lauratraveler](https://wordpress.org/support/users/lauratraveler/)
 * (@lauratraveler)
 * [10 years, 6 months ago](https://wordpress.org/support/topic/button-styling-error/#post-6751902)
 * OK, so I figured it out where to look. I took the jquery-migrate out of the list
   of minified files and the error disappeared. As I said, it used to be minified
   and embedded in the <head> with async. Is it possible to minify this file again
   and embed it somewhere else?
    I still have this ‘Uncaught SyntaxError: Unexpected
   token ;’. Can this be fixed as well? Thanks!
 *  [Ben Ritner – Kadence WP](https://wordpress.org/support/users/britner/)
 * (@britner)
 * [10 years, 6 months ago](https://wordpress.org/support/topic/button-styling-error/#post-6751919)
 * Hey,
    You just need to make sure jQuery is the first javascript loaded on the
   page. Right now you have all the minified JS loading higher then your jQuery,
   it’s working only because your using async loading but I would suggest still 
   moving all your js after the header so it’s loaded after jQuery. I also suggest
   doing tests on your site load time (not some speed ranking score but the actual
   time it take to load the site). I find that if you load your js in the footer(
   again not jQuery, jQuery in your header) it’s often faster then using async and
   you can get better results with certain plugins.
 * as for the syntaxError thats coming from your newsletter plugin, I don’t know
   if thats an error caused by the plugin settings, they way your loading the JS
   or just something broken in the plugin. I suggest contacting the plugin author
   though.
 * Kadence Themes
 *  Thread Starter [lauratraveler](https://wordpress.org/support/users/lauratraveler/)
 * (@lauratraveler)
 * [10 years, 6 months ago](https://wordpress.org/support/topic/button-styling-error/#post-6751925)
 * Hey,
 * Thanks for the tips. I moved the js from the <header> before the </body> so I
   would have only one minified file that is deferred. Is this a good idea?
 * You mention to test my site’s load time. Do you mean like with pingdom? Or can
   you suggest other site? I still have the feeling that my site could load faster.
 * Many thanks!
    Laura
 *  [Ben Ritner – Kadence WP](https://wordpress.org/support/users/britner/)
 * (@britner)
 * [10 years, 6 months ago](https://wordpress.org/support/topic/button-styling-error/#post-6751932)
 * Pingdom is good, just do test from different servers there to get a good idea
   of how your sites doing and what is your best options in terms of loading javascript.
 * Kadence Themes

Viewing 9 replies - 1 through 9 (of 9 total)

The topic ‘Button styling error’ is closed to new replies.

 * ![](https://i0.wp.com/themes.svn.wordpress.org/pinnacle/1.8.10/screenshot.png)
 * Pinnacle
 * [Support Threads](https://wordpress.org/support/theme/pinnacle/)
 * [Active Topics](https://wordpress.org/support/theme/pinnacle/active/)
 * [Unresolved Topics](https://wordpress.org/support/theme/pinnacle/unresolved/)
 * [Reviews](https://wordpress.org/support/theme/pinnacle/reviews/)

 * 9 replies
 * 2 participants
 * Last reply from: [Ben Ritner – Kadence WP](https://wordpress.org/support/users/britner/)
 * Last activity: [10 years, 6 months ago](https://wordpress.org/support/topic/button-styling-error/#post-6751932)
 * Status: not resolved