WordPress.org

Ready to get started?Download WordPress

Forums

Decode
[resolved] Lots of W3C HTML Validation errors (52 posts)

  1. sparky672
    Member
    Posted 8 months ago #

    I love this theme and I am using it straight out of the box without any modifications so far. However, I noticed that this theme is generating upwards of almost 50 HTML Validation errors depending on the page. Some of the errors originated in my widgets and my postings but those have been fixed. The vast majority of errors are coming from this theme.

    I'm not here to be critical of the developer as I'm grateful for his hard work in creating something that looks this nice.

    I plan on fixing many of the validation errors with a child theme.

    However, there are a couple of validation errors that should be addressed by the developer:

    - Duplicate ID primary. <div id="primary" class="widget-area" role="complementary">

    - End tag svg did not match the name of the current open element (image). </svg>

    Thank-you!

  2. sparky672
    Member
    Posted 8 months ago #

    Regarding this error: End tag svg did not match the name of the current open element (image). </svg>

    In the header.php file, this can easily be fixed by "self-closing" all of the <image> tags for the social icons by adding the slash at the end, /> .

    Example: <image src="<?php echo get_template_directory_uri() ?>/images/Twitter.png" />

    However, I cannot find where <image/> is a valid HTML5 tag. I think it's supposed to be <img/>. However, after correcting the tag to be <img/>, I get a duplicate of the corresponding image. Perhaps the developer can explain what's happening here.

    See: http://dev.w3.org/html5/markup/img.html

  3. sparky672
    Member
    Posted 8 months ago #

    Regarding this error: Duplicate ID primary. <div id="primary" class="widget-area" role="complementary">

    In the sidebar.php file, this can easily be fixed by changing the id from primary to something else. I don't see #primary being referenced in the CSS so I don't believe this fix breaks anything, but I'll let the developer be the final judge of that.

  4. sparky672
    Member
    Posted 8 months ago #

    There's also an issue with the Social Icons. You have all of them inside of an unordered list, <ul></ul>. However, only <li></li> elements are allowed to be immediate child elements of ul.

    This can be fixed by wrapping each item within a set of <li></li> tags.

    However, this CSS is also required to preserve the inline format:


    .sociallinks ul li {
    display: inline;
    }

  5. Scott Smith
    Member
    Theme Author

    Posted 8 months ago #

    With the image tags, 1) Self closing tags like <image/> are not proper.
    2) I'm using this SVG fallback technique.

    For the #primary ID, I'll remove it in the next version. (Same with the invalid Rectangle 1, 2, etc. IDs which I'll just remove.)

    For the header, I'm not going to bloat the social link markup more, but I might switch to using something other than <ul>.

    Thanks for your feedback. Now I must ask, is there a reason that you need this to validate perfectly?

  6. sparky672
    Member
    Posted 8 months ago #

    After a little research, I found that the <image> tag is a fallback for when <svg> is not supported.

    http://css-tricks.com/svg-fallbacks/

    However, it's only a fallback for Android 2.3 and IE 8 & below.

    The problem here is that the <image/> tag fallbacks are not compliant....

    - not self-closed with a />
    - missing the width & height attributes
    - missing the href attribute

    Also, I noticed this theme is really screwed up bad in IE 8, which makes me ask the question, is this "fallback" image really necessary?

    On the other hand, we're only talking about a handful of static icons which are not scaling up/down, is SVG really necessary?

    IMO, we have three options:

    1. Fix the <image/> tag fallbacks so they are HTML compliant.
    2. Remove the <image/> tag fallbacks since we may not care about older browsers support.
    3. Dump the SVG as it appears to be overkill here. Replace them with HTML <img/> links - we know these will work in all browsers.

    I'm leaning towards doing #3, unless I'm missing something here... the <img/> renders the exact same size as the <svg> version in both desktop and mobile versions.

  7. sparky672
    Member
    Posted 8 months ago #

    Sorry, I posted my last reply without seeing yours first.

    Thanks for your feedback. Now I must ask, is there a reason that you need this to validate perfectly?

    1. When HTML is not valid, it's totally unpredictable. A new browser version may come out tomorrow and choke on improperly constructed unordered lists. Following the agreed upon set of "standards" reduces these issues.

    2. I'm a professional programmer and I'd like the code running my own website to be valid. We all have different tastes when it comes to design but you've either programmed it correctly or you haven't... I don't believe there's much of a gray area here.

    3. Removing a duplicate id has nothing to do with perfectionism. JavaScript will not play nice when there are multiple instances of an id.

  8. Scott Smith
    Member
    Theme Author

    Posted 8 months ago #

    I'm open to killing the fallback if it isn't necessary, but SVGs are vital because users can alter the colors of their social icons. Note that I'm using Inline SVGs here which have lower browser support. And I only target IE 9 and greater, IE 7 and 8 should be readable but little more—this is a lightweight theme that uses modern techniques.

  9. Scott Smith
    Member
    Theme Author

    Posted 8 months ago #

    Like I said, I'll fix the duplicate IDs. Those definitely shouldn't be there. The <image> tag hackyness is up in the air at this point, I really wouldn't mind killing it off but the issue is that this would render social icons completely useless in IE 8 and lower.

  10. sparky672
    Member
    Posted 8 months ago #

    Good point on the dynamic color changing of the icons. I may pick my option #1 or #2 then and keep the SVG.

  11. sparky672
    Member
    Posted 8 months ago #

    There's no reason why you can't fix the <image/> fallbacks so they're compliant. We just need...

    1. an xlink:href attribute
    2. to self-close the tag
    3. the width and height attributes

    EDIT: I spoke too soon. It doesn't seem possible to validate the <image/> tag. One error always remains.

  12. Scott Smith
    Member
    Theme Author

    Posted 8 months ago #

    Is width="auto" height="auto" href="" valid? I really don't need to use these properties. (But I want to make the HTML valid)

  13. sparky672
    Member
    Posted 8 months ago #

    width="auto" height="auto" is good.

    /> is good.

    href="" is no good.

    xlink:href="#" is a bit better...

    one error remains...

    "Attribute src not allowed on element image at this point."

    As per the link I posted above, it's looking for a .svg file at the xlink:href attribute. I'll have to research some more but it might not be possible to validate the <image/> fallback. Although, at least the number of errors on each icon has been reduced by 75%.

  14. Scott Smith
    Member
    Theme Author

    Posted 8 months ago #

    Yes, an improvement at the very least. I can wrap up all the other validation issues too.

  15. sparky672
    Member
    Posted 8 months ago #

    I have a 100% compliant version already but only because I've tentatively dumped the <image/> fallbacks.

    So basically the site looks like hell in IE 8 anyway and since IE 8 usage is dropping fast, I may not support it at all. I display a nice "site will not render properly - upgrade your browser" message via a jQuery plugin. It's tied to a cookie so it only nags the user once.

  16. Scott Smith
    Member
    Theme Author

    Posted 8 months ago #

    I'm more interested in Android 2.3 support. If I drop support, I'll make that a version bump of its own so users wanting support can head back and get the previous version.

  17. Scott Smith
    Member
    Theme Author

    Posted 8 months ago #

    What did you replace the<ul> element with? I'm looking for the most semantic alternative available.

  18. sparky672
    Member
    Posted 8 months ago #

    This is a tough one. If you cannot validate the HTML because you cannot drop support for Android 2.3, then you're stuck.

    I may just stick with my custom version of your theme and forgo the future automatic upgrades... (just manually update once in a great while)

  19. sparky672
    Member
    Posted 8 months ago #

    What did you replace the <ul> element with? I'm looking for the most semantic alternative available.

    I kept the <ul> because it's already the most semantic way to do this. Much discussion over on Stack Overflow about this, but the row of icons is no different than the horizontal menu which is also constructed with ul.

    All I did was add the missing <li> and </li> tags.

    <?php if ( get_theme_mod( 'twitter_username', '' ) !== '' ) : ?>
    <li>
    <a><?php if ( get_theme_mod( 'open_links_in_new_tab', false ) == true ) echo 'target="_blank"'; ?> rel="me">
    <svg width="200px" height="200px" viewBox="0 0 200 200" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <title>Twitter</title>
    <g fill-rule="evenodd"><path class="SocialIconFill" d="..." id="Twitter" fill="#444444"></path></g>
    </svg>
    </a>
    </li>
    <?php endif; ?>

  20. Scott Smith
    Member
    Theme Author

    Posted 8 months ago #

    Haha. That comment broke the page. (It was that awesome)
    I may go this route since it implies the most meaning, but I hate it too because it nests everything even more.

  21. sparky672
    Member
    Posted 8 months ago #

    I tried the <code></code> tags but wow this site did not like that!

    I had to go back and back-tick every single line.

  22. Scott Smith
    Member
    Theme Author

    Posted 8 months ago #

    I may also bite the bullet and use Modernizer to load the SVG fallbacks.

  23. sparky672
    Member
    Posted 8 months ago #

    Will Modernizer take care of the Android 2.3 issue as well as not get involved when the browser is compliant?

    I've tended to avoid it since every time I've tried it, I had issues with my jQuery plugins. Maybe I need to give it another chance.

  24. Scott Smith
    Member
    Theme Author

    Posted 8 months ago #

    It will just add a CSS class if there is compatibility .no-svg if there isn't support. I can write the CSS to take it from there.

  25. sparky672
    Member
    Posted 8 months ago #

    That sounds like a nice solution then.

  26. Scott Smith
    Member
    Theme Author

    Posted 8 months ago #

    Ah but I realized that the solution I had in mind will still download the images (the fallbacks were to be hidden with display: none;) I'll look for a JavaScript alternative.

  27. sparky672
    Member
    Posted 8 months ago #

    I was mistaken about my assumptions before. I realize now that the SVG icons in this theme also scale down to ensure they fit in a single row. I'm definitely keeping them, even if I end up dumping the fallback images.

  28. Scott Smith
    Member
    Theme Author

    Posted 8 months ago #

    Ha! I just checked IE 8 and while I used to have Decode working responsively via Respond.js, it's just dead now. Something with it not being able to nest or apply styles to semantic (HTML 5) elements.

  29. sparky672
    Member
    Posted 8 months ago #

    The icons are so incredibly small... less than 4 KB each... how much of a bandwidth issue could this be?

  30. sparky672
    Member
    Posted 8 months ago #

    You mean you killed it by making it compliant?

Reply »

You must log in to post.

About this Theme

About this Topic