Solved

Code validation assistance please

Posted on 2013-05-20
11
265 Views
Last Modified: 2013-05-23
I have a page at http://mauitradewinds.com/CheckValidation.htm  which W3C reports with six errors (report attached).  The error at line 158 is not of concern, but I would appreciate guidance on correcting the other errors.  This code appears to perform exactly as I had hoped, but I would also like it to validate.W3C-Validation-Errors.txt
0
Comment
Question by:ddantes
  • 6
  • 4
11 Comments
 
LVL 15

Expert Comment

by:Jagadishwor Dulal
ID: 39183467
First your document type is not supported in line 44, I suggest you to use html5 doctype which will be easy just replace

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html dir="ltr" xmlns="http://www.w3.org/1999/xhtml">

Open in new window


with
<!doctype html>

Open in new window


It will solve most of the errors and warnings if any more post here.
0
 

Author Comment

by:ddantes
ID: 39183601
Thank you for your comment.  However, after replacing the DOCTYPE declaration,  W3C validator reports 117 errors, as opposed to 6 errors with the original DOCTYPE.
0
 
LVL 26

Accepted Solution

by:
skullnobrains earned 500 total points
ID: 39183906
first 2 errors
jst remove the noscript tags : they are meaningless around a link tag
if you really need that css to be loaded only when js is disabled, lad the css and unload it through js. btw, noscript usage is long deprecated

3rd
some doctypes demand the script tags to be in the body and not the head. no idea about yours, and pretty useless to wonder. you can safely ignore this error, but you can also stick the style block in the body or an external css

the ul stuff is because a ul should contain at least ine li

----

additionnally, i think you dt does not allow for <link ... />
they should be old-fashioned unclosed tags as such <link ....>

it is likely that the complain about css in the header is actually an artefact produced by this

---

as for doctyptes, you will find a strict validation using html-strict. it can be good practice to debug using html-strict, and to use transitional when in production
0
 

Author Comment

by:ddantes
ID: 39185185
Thank you for your helpful instructions.  I've reduced the number of errors to 2.  Maybe that's as good as it can get.  

The ul can't contain any li in this case, or it breaks the style.  I'm not concerned with that error.

I moved the  <noscript> style link into the body, and it still generates an error that noscript can't contain "link".   I'll explain why I've nested that link in noscript, and maybe you can suggest a fix.

The style, "norollover.css" is loaded by default, and it is intended for mobile browsers.  The style "hover.css" is loaded by jQuery, and it is intended for non-mobile browsers.  The style "hover.css" also is loaded by noscript, intended for browsers without js.  I can't load "hover.css"  by default, because I don't want mobile browsers to apply that styling.
0
 

Author Comment

by:ddantes
ID: 39186536
I'm awarding points, because the majority of errors have been corrected.  Thanks to both experts for input!
0
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
LVL 26

Expert Comment

by:skullnobrains
ID: 39186990

The ul can't contain any li in this case, or it breaks the style.  I'm not concerned with that error.

you can rather safely ignore this error. the worst that may happen is that the ul may be removed altogether by some browsers while others will keep it. as long as it has no size when it is empty and you do not intend to populate it later through js, you're fine.


I moved the  <noscript> style link into the body, and it still generates an error that noscript can't contain "link".   I'll explain why I've nested that link in noscript, and maybe you can suggest a fix.

i already did. load that css of yours and unload it using js or load a separate stylesheet that overrides it using js so it gets overriden when the browser has js implemented. the css for mobile browsers could easily override it.

you can also handle this server side and only instruct the browser to load that css when needed

---

if you need more help or clarifications, feel free to post in this thread
0
 

Author Comment

by:ddantes
ID: 39188314
Thank you.  I'm inexperienced at this, so possibly not understanding how to implement your suggestion.  I am already loading "norollover.css" for mobile browsers, and then using js to override it with "hover.css" for desktop browsers.  Since I am using js to override the default style sheet, browsers with js disabled will not override the default, and will continue to load "norollover.css."  If I want browsers without js to load "hover.css"  I don't know how to do that, except with the noscript tag.  Can you clarify a way around that?
0
 
LVL 26

Expert Comment

by:skullnobrains
ID: 39188429
- load your hover.css all the time including for mobile browsers
- then override whatever does not apply to mobile users in the css you explicitely load for mobile users

basically if you want something different for browsers that do handle js, load something for everybody and override it by loading something different in js, not the contrary.
0
 

Author Comment

by:ddantes
ID: 39188479
That makes perfect sense.
0
 
LVL 26

Expert Comment

by:skullnobrains
ID: 39190228
your approach was good as well.

you're just unlucky the noscript tag was never intended for conditional loading of external css (though i would not be surprised to see it working in some browsers, namely ie6 and opera). btw, it is also both deprecated and unreliable. for example, the behavior on browsers that handle js but where the user deactivated the js is notoriously broken.

the above approach will also let you check for individual features. for example, if you want to open a js popup with specific features, you can have a regular link that opens a popup using a specific target, and override the behavior of that link in js. the js cancels the link's normal behavior if the popup was successfully open and not otherwise

happy coding
0
 

Author Comment

by:ddantes
ID: 39191523
Thanks again.  I'm happy to avoid the noscript tag, and have more flexibility.
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
SharePoint 2013 List with Ratings 6 36
Form with Modals 16 44
How to hide the rows in Table when the value is empty ? 4 19
Objects on Same Line 2 18
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …

920 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now