Web Standards Code Review of RCO Portals
Notes for All Pages
Lines 34, 36 and 57 - Unnecessary use of Inline CSS
Problem
...
<div id="security_timer_alert" style="display: none">
...
<div style="display:none" id="security_log">
CSS DOs and DON'Ts (Page 10): Avoid using inline CSS styling in your markup. This is simply an impractical and cumbersome method for styling your markup.
Fix
In this case, each DIVs with inline CSS has their own ID. So, we can get rid of the inline CSS and use the ID selectors to style the DIVs.
<div id="security_timer_overlay">...
<div id="security_timer_alert">
...
<div id="security_log">
where
#security_timer_overlay, #security_timer_alert, #security_log { display: none; }
Line 45 - Unnecessary use of CSS Class
Problem
CSS DOs and DON'Ts (Page 12): DO NOT overuse classes and ID's. The overuse of classes/ ID's can not only clutter up and add to the document size of your style sheet, but are unnecessary. Use descendant selectors instead.
Suggestion
In this case, the DIV with class BUTTON is inside a wrapper DIV with an ID. So we can take advantage of this and use descendant selectors instead.
<div id="security_timer_message">...
<div class="button large">
...
</div>
where
#security_timer_message .button { margin-top: 10px; }
Line 48 - Unnecessary use of CSS Classes
Problem
CSS DOs and DON'Ts (Page 12): DO NOT overuse classes and ID's. The overuse of classes/ ID's can not only clutter up and add to the document size of your style sheet, but are unnecessary. Use descendant selectors instead.
Suggestion
In this case, the DIV has too many unnecessary classes. One class would have been enough. So if we create a new class, we can have:
<div class="sign_out_link">where
.sign_out_link { float: left; margin: 20px 0 0 5px; }
Line 50 - Title attribute missing on link
Problem
XHTML DOs and DON'Ts (Page 9): Always use the title attribute to add descriptive text to links.
Suggestion
Line 164 (number may vary per page) - ID or Class for important tags
Problem
Things to Consider (Page 24): Every important tag or section should have an ID. IDs are unique and should not be repeated more than once per page.
Suggestion
Because we already have an ID content for the DIV, we should create unique class names instead.
<div id="content" class="{RCO_MODULE_CLASS}"">where
{RCO_MODULE_CLASS} = {RCO_MODULE_ID_NAME} + {UNDERSCORE} + {SETTINGS}
This equation should produce unique class names for each page. With these unique classes, we will be able to style each and every page the way we want. So:
If page is Resource Center, then the class name should be something like this:resource_center_settings
Lines 177, 183 and 189 (numbers may vary per page) - Unnecessary use of Inline CSS
Problem
<div id="fail" class="message_console fail" style="display: none">
...
<div id="info" class="message_console info" style="display: none">
...
<div id="info" class="message_console attention" style="display:none">
...
</div>
CSS DOs and DON'Ts (Page 10): Avoid using inline CSS styling in your markup. This is simply an impractical and cumbersome method for styling your markup.
Fix
In this case, each DIV with inline CSS share the same class: message_console. Noticed these DIVs are also wrapped by another DIV. So if we add an ID to the wrapper DIV, we can get rid of the inline CSS and use the class as descendant selector to style the DIVs.
<div id="alert_messages_box"><div id="fail" class="message_console fail">
...
<div id="info" class="message_console info">
...
<div id="attention" class="message_console attention">
...
</div>
where
#alert_messages_box .message_console { display: none; }
Line 306 (Number may vary per page) - Unnecessary use of CSS Classes
Problem
<ul class="footer_nav">..</ul>
</div>
CSS DOs and DON'Ts (Page 12): DO NOT overuse classes and ID's. The overuse of classes/ ID's can not only clutter up and add to the document size of your style sheet, but are unnecessary. Use descendant selectors instead.
Suggestion
In this case, the UL tag is wrapped by a DIV with the same class as the UL. Therefore, there's no need to repeat the class again for the UL tag. Use descendant selectors instead.
<div class="footer_nav"><ul>..</ul>
</div>
where
div.footer_nav ul { ... }
Notes for Members Welcome Page
Line 196 - RCO Standard H1 wrapper is missing
Problem
Fix
By no means this is an error. This is more an RCO Standard and its being used in other pages. The H1 wrapper allows us to style these headers more accurately. So we should add a wrapper DIV with class name: h1_container.
<div class="h1_container"><h1>Welcome John Sample</h1>
...
</div>
Lines 199 and 240 - Avoid Comments on HTML Documents
Problem
Things to Consider (Page 26): You should never use comments on your documents for privacy reasons.
Line 224 - Title attribute missing on link
Problem
XHTML DOs and DON'Ts (Page 9): Always use the title attribute to add descriptive text to links.
Suggestion
Line 235 - Title attribute missing on link
Problem
XHTML DOs and DON'Ts (Page 9): Always use the title attribute to add descriptive text to links.
Suggestion
Line 248 - ID or Class for important tags
Problem
Things to Consider (Page 24): Every important tag or section should have an ID. IDs are unique and should not be repeated more than once per page.
Suggestion
In this case, an ID is not really necessary so we can use a class instead. Still the rule is the same: we should have IDs or Classes in all important tags. One carrier may not need the element to be styled, but there may be a carrier that will. Another possible solution is to add a wrapper div with a class or id and put the UL and its content inside the wrap. To keep it simple, just adding the class to the UL is enough.
<ul class="welcome_bullets">Line 248 - Avoid unnecessary use of tags
Problem
<li>
<p>...</p>
</li>
...
</ul>
Things to Consider (Page 24): Tagging is not an easy thing and there is no perfect rule to tag your entries. There's no real guideline for tagging, except this one: don't overdo it!
Suggestion
In this case, we have to decide if we want to display the content as paragraphs or as a list of items. Regardless, there's no need to have both LI and P tags to present the content in this case. You either have all LI tags... or all P tags.
If you decide to use LI tags, then you get rid of the P tags:
<ul class="welcome_bullets">
<li>...</li>
...
</ul>
If you decide to use P tags, then you get rid of the UL and LI tags:
<p>...</p>
...
Lines 251, 257, 263, 269, 279 and 285 - Title attribute missing on link
Problem
...
<a href="http://www.nationwide.com/employee-benefit-services.jsp">Other offerings</a>
XHTML DOs and DON'Ts (Page 9): Always use the title attribute to add descriptive text to links.
Suggestion
In this case, because there are on the same section or wrapper I listed them together... so please make sure you fix all of them.
<a href="http://www.nationwide.com/employee-benefits-life-add.jsp" title="Life with AD&D">Life with AD&D</a>...
<a href="http://www.nationwide.com/employee-benefit-services.jsp" title="Other offerings">Other offerings</a>
Line 298 - There should be no class name: GHOST.
Problem
Class name: ghost is a class I created a long time ago that I used to hide content on my local files. But there is class name: display_none that does the same and is in our standard.css. So please don't use class name: ghost.
Suggestion
In this case, we should replace the class name: ghost with class name: display_none
<p class="display_none">Line 298 - Avoid unnecessary use of tags
Problem
Things to Consider (Page 24): Tagging is not an easy thing and there is no perfect rule to tag your entries. There's no real guideline for tagging, except this one: don't overdo it!
Suggestion
There's really no use for this paragragh. It has no content, and it's been hidden by the class. If that's the case, then we should remove this P tag completely.
Notes for Members Coverage Info
Lines 252 - Unnecessary use of Inline CSS
Problem
CSS DOs and DON'Ts (Page 10): Avoid using inline CSS styling in your markup. This is simply an impractical and cumbersome method for styling your markup.
Fix
In this case, the DIV has both class and ID names. By taking advantage of this, we get rid of the inline CSS and style either the ID or class in the CSS document.
<div id="coverage_tab_0" class="tab_content">where
.tab_content { display: none; }
Line 253 - Unnecessary use of Inline CSS
Problem
CSS DOs and DON'Ts (Page 10): Avoid using inline CSS styling in your markup. This is simply an impractical and cumbersome method for styling your markup.
Fix
In this case, the DIV has both class and ID names. By taking advantage of this, we get rid of the inline CSS and style either the ID or class in the CSS document.
<div class="ajax_processor width_350px margin_15px_top" id="coverage_processor">where
#coverage_processor { display: none; }
Line 270 - Missing Table attributes
Problem
TABLES DOs and DON'Ts (Page 10): For maximum cross-browser compatibility, always use cellspacing, cellpadding and border on tables.
Fix
Line 313 - Missing Table attributes
Problem
TABLES DOs and DON'Ts (Page 10): For maximum cross-browser compatibility, always use cellspacing, cellpadding and border on tables.
Fix
Line 376 - Missing Table attributes
Problem
TABLES DOs and DON'Ts (Page 10): For maximum cross-browser compatibility, always use cellspacing, cellpadding and border on tables.
Fix
Line 418 - No LABEL tag associated with FORM element
Problem
...
FORMS DOs and DON'Ts (Page 10): Always use the label tag and associate it with form elements.
Fix
In this case, the INPUT tags are HIDDEN types. Regardless we should add a label and associate it with the INPUT. If we don't want to show the LABEL at all, then we add the class name: display_none.
<label for="dtlcase_selector" class="display_none"></label><input type="hidden" name="dtlcase_selector" id="product_selector" value="" />
...
Notes for Members Profile Settings
Line 227 - Unnecessary use of Inline CSS
Problem
CSS DOs and DON'Ts (Page 10): Avoid using inline CSS styling in your markup. This is simply an impractical and cumbersome method for styling your markup.
Fix
In this case, the DIV has both class and ID names. By taking advantage of this, we get rid of the inline CSS and style either the ID or class in the CSS document.
<div class="tab_content" id="data_container">where
.tab_content { display: none; }
Line 268 - No LABEL tag associated with FORM element
Problem
...
FORMS DOs and DON'Ts (Page 10): Always use the label tag and associate it with form elements.
Fix
In this case, the INPUT tags are HIDDEN types. Regardless we should add a label and associate it with the INPUT. If we don't want to show the LABEL at all, then we add the class name: display_none.
<label for="w1" class="display_none"></label><input type="hidden" name="w1" id="w1" value="UserCTL/ProfileMaintenanceCTL" />
...
Line 323 - Unnecessary use of Inline CSS
Problem
CSS DOs and DON'Ts (Page 10): Avoid using inline CSS styling in your markup. This is simply an impractical and cumbersome method for styling your markup.
Fix
In this case, the DIV has both class and ID names. By taking advantage of this, we get rid of the inline CSS and style either the ID or class in the CSS document.
<div class="ajax_processor width_350px margin_15px_top" id="wait_container">where
#wait_container { display: none; }
Notes for Members Resource Center
Lines 355, 363, 371, 378, 387, 395, 403, 411, 419 and 427 - Title attribute missing on link
Problem
...
<a href="user-docs/005520_EE_-_HIPAA_Notice_of_Privacy_Practices-NH-0524-G-0809-MedBen.pdf" target="_blank">Nationwide HIPAA Notice</a>
XHTML DOs and DON'Ts (Page 9): Always use the title attribute to add descriptive text to links.
Suggestion
In this case, because links in question are al on same TABLE, I listed them together... so please make sure you fix all of them.
<a href="user-docs/005529_NSHEB_2850_(08-10)_Absolute_Assignment.pdf" title="Absolute Assignment Form" target="_blank">Absolute Assignment Form</a>...
<a href="user-docs/005520_EE_-_HIPAA_Notice_of_Privacy_Practices-NH-0524-G-0809-MedBen.pdf" title="Nationwide HIPAA Notice" target="_blank">Nationwide HIPAA Notice</a>
Notes for Members Billing History (Freelancers)
Lines 394, 415, 435 and 455 - Title attribute missing on link
Problem
XHTML DOs and DON'Ts (Page 9): Always use the title attribute to add descriptive text to links.
Suggestion
In this case, because links in question are all on same TABLE, I listed them together... so please make sure you fix all of them.
<a href="/index.php?w1=BillingCTL/BillingDetailsCTL&run_num=1&run_date=2010-12-03&period=2011-01-01" title="01/01/2011">01/01/2011</a>Notes for Members Billing Details (Freelancers)
Lines 305, 308 and 311 - Title attribute missing on link
Problem
...
<a href="/index.php?w1=BillingCTL/BillingVaultCTL">Manage EFT Accounts</a>
XHTML DOs and DON'Ts (Page 9): Always use the title attribute to add descriptive text to links.
Suggestion
In this case, because links in question are al on same TABLE, I listed them together... so please make sure you fix all of them.
<a href="/index.php?w1=BillingCTL/SchedulePaymentCTL" title="Schedule a Payment">Schedule a Payment</a>...
<a href="/index.php?w1=BillingCTL/BillingVaultCTL" title="Manage EFT Accounts">Manage EFT Accounts</a>
Line 523 - Unnecessary use of Inline CSS
Problem
CSS DOs and DON'Ts (Page 10): Avoid using inline CSS styling in your markup. This is simply an impractical and cumbersome method for styling your markup.
Fix
In this case, the DIV has both class and ID names. By taking advantage of this, we get rid of the inline CSS and style either the ID or class in the CSS document.
<div class="wait_container float_right clear_both" id="wait_container">where
#wait_container { display: none; }
Lines 564, 567, 570, 578 and 581 - Title attribute missing on link
Problem
...
<a href="http://www.freelancersunion.org/about/privacy-policy.html">Privacy Policy</a>
XHTML DOs and DON'Ts (Page 9): Always use the title attribute to add descriptive text to links.
Suggestion
In this case, because links in question are al on same TABLE, I listed them together... so please make sure you fix all of them.
<a href="http://www.freelancersunion.org/about/index.html" title="About Us">About Us</a>...
<a href="http://www.freelancersunion.org/about/privacy-policy.html" title="Privacy Policy">Privacy Policy</a>
Notes for Brokers Welcome Page
Line 175 - RCO Standard H1 wrapper is missing
Problem
Fix
By no means this is an error. This is more an RCO Standard and its being used in other pages. The H1 wrapper allows us to style these headers more accurately. So we should add a wrapper DIV with class name: h1_container.
<div class="h1_container"><h1>Welcome ACME Company</h1>
...
</div>
Line 232 - Title attribute missing on link
Problem
...
XHTML DOs and DON'Ts (Page 9): Always use the title attribute to add descriptive text to links.
Suggestion
...
Lines 178 and 237 - Avoid Comments on HTML Documents
Problem
Things to Consider (Page 26): You should never use comments on your documents for privacy reasons.
Notes for Brokers All Cases
Line 174 - RCO Standard H1 wrapper is missing
Problem
Fix
By no means this is an error. This is more an RCO Standard and its being used in other pages. The H1 wrapper allows us to style these headers more accurately. So we should add a wrapper DIV with class name: h1_container.
<div class="h1_container"><h1>Active Case List</h1>
...
</div>
Lines 185, 189, 194 and 197 - Title attribute missing on link
Problem
...
XHTML DOs and DON'Ts (Page 9): Always use the title attribute to add descriptive text to links.
Suggestion
...
Line 213 - No LABEL tag associated with FORM element
Problem
...
FORMS DOs and DON'Ts (Page 10): Always use the label tag and associate it with form elements.
Fix
In this case, the INPUT tags are HIDDEN types. Regardless we should add a label and associate it with the INPUT. If we don't want to show the LABEL at all, then we add the class name: display_none.
<label for="task" class="display_none"></label><input type="hidden" name="task" id="task" value="search_cases" />
...
Validation Report for All pages
Typo - Line 26, Column 16: No attribute "typs"
Error
Fix
Semantic Error - Line 31, Column 27 - Document type does not allow element "div" here
Error
...
<div id="security_timer>...</div>
...
</head>
No block or inline elements should be in the <head> section.
Suggestion
URL Error - Everywhere
Error Example
These errors are everywhere when the link contains &. I'm just pointing the error out but apparently we will have to ignore this error unless somebody has a solution for this. I am not sure if we can use & for links. If we can, that should fix the majority if not all of the issues.
Semantic Error - Line 68, Column 10 - Document type does not allow element "img" here
Error
Inline elements such as link, span or images need to be inside a block-level element. In this case, the image should be wrapped with a div.
Fix
<img src="images/nw_logo.gif" alt="Nationwide logo for Print only" class="logo_for_print" />
</div>
Additional Suggestions
If you are using SCRIPTS inside body tag, I suggest to move all the SCRIPTS at the end of document, before closing the body tag. It is cleaner, easier to find and modify, etc.
Validation Report for Members Welcome Page
Markup Error - Line 93, Column 41 - Missing closing tag
Error
In XHTML Strict all tags must be closed.
Fix
Semantic Error - Line 242, Column 10 - Document type does not allow element "p" here
Error
<p>With health care expenses continuing to rise... </p>
...
</p>
This is a simple nesting error. P tag is being used as a container. In consequence, we now have P and UL tags inside a P tag... causing a validation error.
Suggestion
Get rid of the P that is acting as a wrapper. Or replace this P with a DIV.
<div>
<p>With health care expenses continuing to rise... </p>
...
</div>
Validation Report for Coverage Info
Markup Error - Line 180, Column 28 - Invalid ID
Error
ID and name attributes must begin with a letter, not a digit.
Suggestion
Markup Error - Line 209, Column 21 - Invalid Character
Error
Cannot use & by itself. The correct way to write & is &
Fix
Markup error - Line 285, Column 18: No attribute "name"
Error
The document type FORM does not support that attribute for this element.
Semantic Error - Line 286, Column 88 - Document type does not allow element "input" here.
Error
...
<input type="hidden" name="ilb_cim_num" id="ilb_cim_num" value="05723336" />
We should always use FIELDSET on every form we have. If for some reason there's no need for it, then all form elements should be contained inside a block type element such as a DIV.
Fix
<input type="hidden" name="dtlcase_selector" id="product_selector" value="" />
...
<input type="hidden" name="ilb_cim_num" id="ilb_cim_num" value="05723336" />
</div>
Validation Report for Resource Center
Semantic Error - Line 153, Column 7: Document type does not allow element "p" here
Error
<p>Use the Resource Center to view, download or print documents</p>
...
</p>
This is a simple nesting error. P tag is being used as a container. In consequence, we now have P tags inside a P tag... causing several validation errors.
Suggestion
Get rid of the P that is acting as a wrapper. Or replace this P with a DIV.
<div class="header_paragraph">
<p>Use the Resource Center to view, download or print documents</p>
...
</div>
Semantic Error - Line 173, Column 7: Document type does not allow element "p" here
Error
<p>A PDF is a Portable Document Format developed by Adobe Systems.</p>
...
</p>
This is a simple nesting error. P tag is being used as a container. In consequence, we now have P tags inside a P tag... causing several validation errors.
Suggestion
Get rid of the P that is acting as a wrapper. Or replace this P with a DIV.
<div>
<p>A PDF is a Portable Document Format developed by Adobe Systems.</p>
...
</div>
Markup Error - Line 287, Column 134 Invalid Character
Error
Cannot use & by itself. The correct way to write & is &
Fix
Validation Report for Profile Settings
Semantic Error - Line 156, Column 7: Document type does not allow element "p" here
Error
Please complete the following fields to reset your password or select a new password hint.
<p>Select the Secret Question tab to modify your secret question or answer.</p>
</p>
In this case the P tag was not properly closed, causing a nesting problem.
Fix
<p>Select the Secret Question tab to modify your secret question or answer.</p>
Markup Error - Line 191, Column 54: Invalid Character
Error
Cannot use < or > as just text. You should escape them as < for < and > for >
Fix
Semantic Error - Line 199, Column 18: there is no attribute "name"
Error
Validation Report for Billing History (Freelancers)
Markup Error - Line 479, Column 8 & Line 480, Column 8: end tag for element "div" which is not open
Error
</div>
There are two extra closing DIVs that are not needed. Get rid of both will fix problem.
Validation Report for Billing Details (Freelancers)
Markup Error - Line 517, Column 8 & Line 518, Column 8: end tag for element "div" which is not open
Error
</div>
There are two extra closing DIVs that are not needed. Get rid of both will fix problem.
Validation Report for Brokers Welcome Page
Semantic Error - Line 208, Column 7: document type does not allow element "p" here
Error
<p>Your pending cases are listed below.</p>
...
</p>
This is a simple nesting error. P tag is being used as a container. In consequence, we now have P tags inside a P tag... causing several validation errors.
Suggestion
Get rid of the P that is acting as a wrapper. Or replace this P with a DIV.
<div >
<p>Your pending cases are listed below.</p>
...
</div>
Markup Error - Line 226, Column 15: required attribute "type" not specified
Error
In XHTML document types the "type" attribute is required on the "script" element.
Fix
Validation Report for All Cases (Active, Pending, Renewing, Terminated)
Semantic Error - Line 135, Column 7: document type does not allow element "p" here
Error
<p>Your active cases are listed here. Sort by Case Number...</p>
...
</p>
This is a simple nesting error. P tag is being used as a container. In consequence, we now have P tags inside a P tag... causing several validation errors.
Suggestion
Get rid of the P that is acting as a wrapper. Or replace this P with a DIV.
<div class="details">
<p>Your active cases are listed here. Sort by Case Number...</p>
...
</div>
Semantic Error - Line 141, Column 18: there is no attribute "name"
Error
Semantic Error - Line 142, Column 70: document type does not allow element "input" here
Error
<fieldset>
In this case, the input is outside the fieldset and it is not wrapped inside a block level element.
Suggestion
<input type="hidden" name="task" id="task" value="search_cases" />
Markup Error - Line 153, Column 108: end tag for "input" omitted
Error
In XHTML Strict all tags must be closed, including empty elements such as inputs.
Suggestion
Validation Report for Brokers Profile Settings
Semantic Error - Line 123, Column 7: document type does not allow element "p" here
Error
Please complete the following fields to reset your password or select a new password hint.
<p>Select the Secret Question tab to modify your secret question or answer.</p>
</p>
In this case the P tag was not properly closed, causing a nesting problem.
Fix
<p>Select the Secret Question tab to modify your secret question or answer.</p>
Semantic Error - Line 164, Column 18: there is no attribute "name"
Error
Validation Report for Brokers Resource Center
Semantic Error - Line 120, Column 7: document type does not allow element "p" here
Error
<p>Use the Resource Center to view, download or print documents.</p>
...
</p>
This is a simple nesting error. P tag is being used as a container. In consequence, we now have P tags inside a P tag... causing several validation errors.
Suggestion
Get rid of the P that is acting as a wrapper. Or replace this P with a DIV.
<div class="header_paragraph">
<p>Use the Resource Center to view, download or print documents.</p>
...
</div>
Semantic Error - Line 139, Column 7: document type does not allow element "p" here
Error
<p>A PDF is a Portable Document Format developed by Adobe Systems.</p>
...
</p>
This is a simple nesting error. P tag is being used as a container. In consequence, we now have P tags inside a P tag... causing several validation errors.
Suggestion
Get rid of the P that is acting as a wrapper. Or replace this P with a DIV.
<div>
<p>A PDF is a Portable Document Format developed by Adobe Systems.</p>
...
</div>
Markup Error - Line 258, Column 134 Invalid Character
Error
Cannot use & by itself. The correct way to write & is &