chownsy Posted July 30, 2012 Share Posted July 30, 2012 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 More sharing options...
ShadowMage Posted July 30, 2012 Share Posted July 30, 2012 What is the error message the validator is giving? Which line is 62? Link to comment Share on other sites More sharing options...
Ingolme Posted July 30, 2012 Share Posted July 30, 2012 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 More sharing options...
chownsy Posted July 30, 2012 Author Share Posted July 30, 2012 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 websitehome.html style.css Link to comment Share on other sites More sharing options...
ShadowMage Posted July 30, 2012 Share Posted July 30, 2012 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 More sharing options...
chownsy Posted July 30, 2012 Author Share Posted July 30, 2012 there is JavaScript in the head for the marquee if you see, I'm confused now with that what would i need to do for html5 over what i have done now Link to comment Share on other sites More sharing options...
ShadowMage Posted July 30, 2012 Share Posted July 30, 2012 (edited) there is JavaScript in the head for the marquee if you see, I'm confused now with thatYou 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 nowGive 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 July 30, 2012 by ShadowMage Link to comment Share on other sites More sharing options...
chownsy Posted July 30, 2012 Author Share Posted July 30, 2012 If I change it to <!DOCTYPE html> then i get this error: Validation Output: 1 Error Line 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 More sharing options...
ShadowMage Posted July 30, 2012 Share Posted July 30, 2012 Apparently HTML 5 removes the ability to specify values for the width/height attribute in percentages. You can just define those with CSS or specify the value in pixels. Personally, I'd move it to CSS. Link to comment Share on other sites More sharing options...
chownsy Posted July 30, 2012 Author Share Posted July 30, 2012 to move it to CSS is it this: image-width:70%; Link to comment Share on other sites More sharing options...
ShadowMage Posted July 30, 2012 Share Posted July 30, 2012 Just width:width: 70%; Link to comment Share on other sites More sharing options...
chownsy Posted July 30, 2012 Author Share Posted July 30, 2012 the image is under the <h4> section and in CSS i already have that as width 90% the image is what I need to change. Do i need to write a new section in the CSS file, I have many different sizes of pictures on this website. Link to comment Share on other sites More sharing options...
ShadowMage Posted July 31, 2012 Share Posted July 31, 2012 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 More sharing options...
chownsy Posted August 1, 2012 Author Share Posted August 1, 2012 Thank youI have used both those pieces of code, I have the H4 img set to 70% and then <p> images with id tags It seems though I have messed up giving the image a id. I know this is wrong but whats wrong about it<a href="http://world.honda.com/HRC/" target="_blank"><img_id2 src="pictures/logo/hrc.png" alt="HRC"/></a> Link to comment Share on other sites More sharing options...
ShadowMage Posted August 1, 2012 Share Posted August 1, 2012 (edited) <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 August 1, 2012 by ShadowMage Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now