Jump to content

Validation for "_blank" attribute


chownsy
 Share

Recommended Posts

Hi I have been coding for only a few months on and off and been working on my website from previously coded website that I had help off here getting the template sorted. I have also been using the guides on the site to help but I am confused at the validation on my website, It says that line 62 column 44 is at fault for the below code but I cannot see why only 1 of the picture attributes is incorrect. Can someone help me clarify what is wrong. RegardsRichard <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><link rel="stylesheet" type="text/css" href="style.css" /><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="Description" content="Restoration of my VFR400 NC24 from a wreck to a beautiful Repsol replica Honda VFR400 NC24" /><meta name="Keywords" content="REPSOL, HONDA, VFR, 400, NC24, VFR400, 400RR, Replica, VFR400RR, MTC EXHAUSTS, MOTAD, GPI RACING, CUSTOM, REBUILD" /><title>Restoration of Honda VFR400 NC24</title> <script type="text/javascript"><!--//window.onload=function(){parent_elem = document.getElementById("marquee")child_elem = parent_elem.getElementsByTagName("h2"); current_innerH = child_elem[0].innerHTML; child_elem[0].innerHTML="<marquee>"+current_innerH+"</marquee>";}//--></script> </head> <body> <div id="container" style="width:100%"> <div id="header"> <h1> Repsol Honda VFR400 NC24 restoration project </h1> </div> <div id="marquee"><h2>Over the last two years I have taken a lot of effort to restore my Honda VFR400 NC24 into some of its former glory with a modern Repsol Honda paint scheme. Here you will find all about the restoration and ride out photos!</h2></div> <div id="menu" style="width:250px;float:left;"> <ul><li><a href="home.html" title="Go to Home Page">Home</a></li><li><a href="about.html" title="Information in the project">About the project</a></li><li><a href="restoration.html" title="Restoration guide">Restoration</a></li><li><a href="restoration-gallery.html" title="Restoration gallery"> Restoration Gallery</a></li><li><a href="ride-out-gallery.html" title="Ride out gallery"> Ride out Gallery</a></li><li><a href="supporters.html" title="Supporting companies and suppliers of items for the project">Companies used</a></li><li><a href="contact.html" title="Use our contact form">Contact form</a></li></ul> <h3> <a href="http://www.dynatekuk.com/" target="_blank"><img src="pictures/logo/dynatek-logo.png" alt="Dynatek coils"/></a> </h3> <h3> <a href="http://www.worcesterpowdercoating.co.uk/" target="_blank"><img src="pictures/logo/powder-coating-logo.png" alt="Worcester Powder Coaters"/></a> </h3> <h3> <a href="http://stores.ebay.co.uk/Kinetic-Movements" target="_blank"><img src="pictures/logo/kinetic-Movements.png" alt="DZUS fastener supplier"/></a> </h3> </div> <div id="Supporters" style="width:250px;float:right;"> <h3> <a href="http://www.wemoto.co.uk" target="_blank"><img src="pictures/logo/wemoto.png" alt="Wemoto Parts"/></a> </h3> <h3> <a href="http://www.motad.co.uk" target="_blank"><img src="pictures/logo/motad.png" alt="Motad Exhausts"/></a> </h3> <h3> <a href="http://www.davidsilverspares.co.uk/" target="_blank"><img src="pictures/logo/david-silver-spares.png" alt="David Silver Spares"/></a> </h3> <h3> <a href="http://www.gpimotocross.com" target="_blank"><img src="pictures/logo/gpi-racing.png" alt="GPI Racing"/></a> </h3> <h3> <a href="http://stores.ebay.co.uk/MTC-Motorcycle-Exhausts" target="_blank"><img src="pictures/logo/mtc-exhausts.png" alt="MTC Exhausts"/></a> </h3> <h3> <a href="http://stores.ebay.co.uk/NeedforMotos" target="_blank"><img src="pictures/logo/needformotos.png" alt="China Fairings"/></a> </h3> <h3> <a href="http://www.thetoolcentre.co.uk/" target="_blank"><img src="pictures/logo/the-tool-centre.png" alt="The Tool Centre"/></a> </h3> </div> <div id="content"> <h4><img src="pictures/logo/main.png" width="70%" alt="Completed Respsol VFR400 NC24"/> <br/> Here is the complete bike as she stands now. There are a few more little changes<br/>to do to the bike, these are just minor things like a repaint of the tank to complete<br/>the look fully. This will be done in the coming weeks.<br/> </h4> </div> <div id="footer" style="width:50%;margin-left:auto;margin-right:auto;"> <h5>Designed and coded by Chownsy 2012</h5> </div> </div> </body> </html>

Link to comment
Share on other sites

The target attribute is deprecated in HTML 4.01 / XHTML Strict and there's no real substitute. <marquee> isn't a valid tag either so printing it with Javascript is cheating the validator. Change your DOCTYPE to a Transitional one to accept the target attribute. No DOCTYPE supports <marquee> though.

Link to comment
Share on other sites

I have attached the css and homepage file to the post so you can validate it and see the error yourself but it says:

Line 62, Column 44

:

there is no attribute "target"

…ef="http://www.dynatekuk.com/" target="_blank"><img src="pictures/logo/dynatek…

[/left]

You have used the attribute named above in your document, but the document type you are using does not support that attribute for this element. This error is often caused by incorrect use of the "Strict" document type with a document that uses frames (e.g. you must use the "Transitional" document type to get the "target" attribute), or by using vendor proprietary extensions such as "marginheight" (this is usually fixed by using CSS to achieve the desired effect instead).This error may also result if the element itself is not supported in the document type you are using, as an undefined element will have no supported attributes; in this case, see the element-undefined error message for further information.How to fix: check the spelling and case of the element and attribute, (Remember XHTML is all lower-case) and/or check that they are both allowed in the chosen document type, and/or use CSS instead of this attribute. If you received this error when using the <embed> element to incorporate flash media in a Web page, see the

FAQ item on valid flash.

[/left]

how do i do a marquee then if that is not right? I really want a marquee scrolling across the website

home.html

style.css

Link to comment
Share on other sites

As Ingolme mentioned, the target attribute is deprecated in (X)HTML strict. You can either use a transitional or HTML 5 doctype. As for the marquee, you'll need to use JavaScript to animate the left/right or margin properties of the element. Google should be able to help you find some examples or tutorials.

Link to comment
Share on other sites

there is JavaScript in the head for the marquee if you see, I'm confused now with that
You have JavaScript which creates a <marquee> element, not a JavaScript powered marquee. The marquee element is deprecated and should not be used. You can use JavaScript to create a marquee using standard elements (like a div or span). Something like this:http://blog.wardelld...script-marquee/
what would i need to do for html5 over what i have done now
Give it the HTML 5 doctype instead of the strict XHTML doctype. The HTML 5 doctype looks like this:<!DOCTYPE html> EDIT:You could also use CSS 3 transitions and animations to create a marquee, but you'll sacrifice compatibility since older browsers (most notably IE 8 and below) do not support them. Edited by ShadowMage
Link to comment
Share on other sites

If I change it to <!DOCTYPE html> then i get this error:

Validation Output: 1 Error
  • error.pngLine 132, Column 84: Bad value 70% for attribute width on element img: Expected a digit but saw % instead. …pictures/logo/main.png" width="70%" alt="Completed Respsol VFR400 NC24"/> <br/> Syntax of non-negative integer: One or more digits (0–9). For example: 42 and 0 are valid, but -273 is not.

Link to comment
Share on other sites

You can either give the image an id and target it in CSS that way or you can target it using the general descendant selector from the h4: #image_id { ... } h4 img { ... } Be aware that the first one is specific to a single img element, while the second will target all img elements that are descendants of h4 elements. Since you say you have a lot of different image sizes, you're probably going to want the first. You may also be able to just use inline styling:<img ... style='width: 70%;' />though you'll be compromising a bit of maintainability by doing so.

Link to comment
Share on other sites

<a href="http://world.honda.com/HRC/" target="_blank"><img_id2 src="pictures/logo/hrc.png" alt="HRC"/></a> Use the id attribute to give an img (or any other element) an id. The tag names never change. EDIT:If you were basing your attempt on the example in my previous post:#image_id { ... } The '#' is the CSS id selector and 'image_id' would be the id to select. That selector would select the element with an id equal to 'image_id'. You would replace 'image_id' with whatever id you want to give your image as long as the id in the CSS selector matches the id on the element you want to select.

Edited by ShadowMage
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...