Bad Fetch Blog & Boozery
Bad Fetch Blog & Boozery
Bad Fetch Menu
Bad Fetch Blog & Boozery
Bad Fetch Blog & Boozery
 Bad Fetch Blog & Boozery
 The Other Nonsense
 
   
 Wicked Good Web

Tuesday, January 15, 2008

XHTML Validation Problems With The rel Tag

XHTML 1.0 Transitional validation is an obsession of mine. I must validate everything I touch. A coding anomaly came up this week which left me searching the Internets for an answer. I was getting a strange validation error on a project which was referencing the "ref" tag. All formatting looked correct and no other explanation came up on the W3C validation tools other than something about the doctype not supporting this attribute usage.

So, after much searching and testing... I came to an answer.
The rel attribute is not allowed inside an XHTML tag which contains an ending /> AND is inside the body of the page. The rel attribute is allowed inside a tag which is also in the header of the page (example: <link rel="badfetch" />).
The rel attribute MUST be inside a tag which has its own separate closing tag.

Examples:
Validates: <a rel="badfetch" href=" http://www.badfetch.com">link</a>
Does Not Validate: <img rel="badfetch" src="logo.png" width="100" height="100" alt="logo" name="logo" id="logo" />

Found this out when using some DHTML to accommodate a flyout menu on mouseover for a menu item. The DHTML reference uses the rel and id tags to talk to the links, images, and divs for proper display, timing, and location of the flyout. The code looked like the following:

<a href="/faqs/" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('n7','','images/splash_05n7o.png',1)"><img src="images/splash_05n7.png" alt="FAQs" name="n7" width="141" height="18" border="0" id="n7" rel="subcontent" /></a><div id="subcontent" style="position:absolute; visibility: hidden; width: 200; margin-top: -18px; padding: 0;">[display item]</div>

However, this does not validate in W3C for XHTML 1.0 Transitional because of the location of the rel attribute. In order for this to work properly, I had to move not only the rel attribute, but the id attribute too. Simply moving them to the anchor tag did the trick.

<a href="/faqs/" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('n7','','images/splash_05n7o.png',1)" id="n7" rel="subcontent"><img src="images/splash_05n7.png" alt="FAQs" name="n7" width="141" height="18" border="0" /></a><div id="subcontent" style="position:absolute; visibility: hidden; width: 200; margin-top: -18px; padding: 0;">[display item]</div>

Now it all validates correctly. I hope this helps someone out there as the research I did on it came up empty, with only clues as to where the problem might be.

0 Comments:

Post a Comment

<< Home