Duplicate Height & Width Attributes Causing HTML Validation Errors

  • Resolved meghant

    (@meghant)


    7 years, 9 months ago

    Hello,

    Meta Slider is producing the following W3C HTML Validation errors on my site for images inserted into the slider (FlexSlider):
    Duplicate attribute “height”
    Duplicate attribute “width”

    The errors are referenced for each of the images in the slider and are the result of both WordPress and Meta Slider inserting conflicting height and width attributes into the source code. I tried resolving the issue by leaving the height and width fields empty in the slider settings and instead setting the width via CSS; however, this doesn’t remove the height and width attributes from the code, it merely gives them blank values (height=””, width=””).

    The height and width attributes inserted by Meta Slider actually seem redundant in my case, since the values inserted by WordPress are the dimensions being rendered by the browser and the width set by Meta Slider on the parent li is used to contain the images within the set width (200px).

    Please let me know how I can remove the Meta Slider height and width attributes from my source code and resolve these errors.

    Thanks,
    Meghan

    ———————
    The issue can be found here: local development site
    The preview works: Yes
    It works with other themes: Yes
    It works when I disable all other plugins: Haven’t Tried
    Meta Slider version: 3.8.1
    ———————

    The page I need help with: [log in to see the link]

Viewing 8 replies - 1 through 8 (of 8 total)
  • Kevin Batdorf

    (@kbat82)

    7 years, 9 months ago

    Hi @meghant,

    Can you share a link to your website so I can see the issue? Also, what do you have set for cropping under Advanced Settings?

    Thread Starter meghant

    (@meghant)

    7 years, 9 months ago

    Hi,

    Image crop is disabled under the advanced settings.

    The site is in development and the staging site is on the web but not publicly accessible. Is there a way I can securely share the login information for a temporary preview account? For security reasons, I can only give you view-only permissions.

    Here’s a snippet from the beginning of the slider’s source code showing the duplicate height and width attributes:

    <div id="metaslider_container_792">
        <div id="metaslider_792">
            <ul class="slides">
                <li style="display: none; width: 100%;" class="slide-793 ms-image"><a href="https://ssa.gov" target="_blank"><img width="200" height="200" src="http://localhost/mmi/wp-content/uploads/2018/06/social-security-administration-logo.png" class="slider-792 slide-793" alt="social security administration logo" <strong>height="" width=""</strong> rel="" title="social security administration logo" srcset="http://localhost/mmi/wp-content/uploads/2018/06/social-security-administration-logo.png 200w, http://localhost/mmi/wp-content/uploads/2018/06/social-security-administration-logo-150x150.png 150w" sizes="(max-width: 200px) 100vw, 200px" /></a></li>
    Thread Starter meghant

    (@meghant)

    7 years, 9 months ago

    Note: Ignore the tags around the empty height/width attributes – I was trying to highlight them in my reply.

    Kevin Batdorf

    (@kbat82)

    7 years, 9 months ago

    Hi @meghant,

    Don’t share any type of login info on the WP forums. A moderator will likely reiterate this as well.

    Can you try to switch the cropping to see if there is a difference?

    I can’t reproduce this, so could you disable all other plugins and see if it’s still happening? If it’s not happening, enable them one at a time until you find the problem plugin, then I can try to see if there’s a way to resolve it.

    If the above doesn’t change anything, can you take screenshots of the html, like this: http://prntscr.com/krso3h

    Thread Starter meghant

    (@meghant)

    7 years, 9 months ago

    Hi,

    I didn’t have any intention of sharing credentials here – I was asking if there was a way to securely give you viewing access.

    Deactivating all plugins except Metaslider didn’t help; however, when I changed the image crop to “Smart Crop”, the issue was resolved and I am no longer getting the errors! Woohoo 🙂

    In case it’s helpful for your team, I’ve included details & screenshots below:

    The problem is seen in the source code (right click > view source), but not the rendered code displayed in the elements panel of the inspector. The validation error is thrown regardless of the rendered code being correct.

    Source Code: https://www.dropbox.com/s/v7wtll0aqnkxnci/slider%20source%20code.PNG?dl=0
    Rendered Code: https://www.dropbox.com/s/uy2kdwja00vlws5/slider%20inspector%20code.PNG?dl=0

    Kevin Batdorf

    (@kbat82)

    7 years, 9 months ago

    Hi @meghant,

    Thanks for the feedback and glad we found a solution. I’ll make a note to investigate why it’s happening when the cropping is disabled.

    squasher

    (@squasher)

    7 years, 7 months ago

    Hi,

    I’m having the same problem. Unfortunately only smart croppings works in my case. In other situations the images are not showing in a correct manner. But if I use it, it gives me about 30 errors in html validation. Which I don’t really like…

    I hoped upgrading to the latest version helped, but it didn’t… 🙁

    Any solutions coming for this?

    Thanks.

    Kevin Batdorf

    (@kbat82)

    7 years, 7 months ago

    Hi,

    Sorry for the delay. I’m adding a fix for this now, which will be in the next version.

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

The topic ‘Duplicate Height & Width Attributes Causing HTML Validation Errors’ is closed to new replies.