Button styling error

  • lauratraveler

    (@lauratraveler)


    9 years ago

    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

    (@lauratraveler)

    I also get the following CSS error for each button:

    #kadbtn26:hover Value Error : background Parse Error !important
    Value Error : background-color Parse Error :

    Theme Author Ben Ritner – Kadence WP

    (@britner)

    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

    (@lauratraveler)

    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.

    Theme Author Ben Ritner – Kadence WP

    (@britner)

    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

    (@lauratraveler)

    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

    (@lauratraveler)

    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!

    Theme Author Ben Ritner – Kadence WP

    (@britner)

    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

    (@lauratraveler)

    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

    Theme Author Ben Ritner – Kadence WP

    (@britner)

    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.