HTML5 W3C Markup Validation Service...
Hi all -
I just added an image in the section 'Visionary' in my page using code:
<p><a href="http://gblcg.org/register"><img src="http://gblcg.org/images/home/gblcg-worried-business-woman-home.png" width="250" height="135" alt="gblcg.org-entrepreneur-girl-image" title="gblcg.org-entrepreneur-girl-image" border="0" align="middle" /></a></p>
When checking the validity of my work with the product's inbuilt 'HTML Validator' I receive an error code pertaining to this image stating invalid HTML5 markups:
"Line 237, Column 256: The align attribute on the img element is obsolete. Use CSS instead. {.. title="gblcg.org-entrepreneur-girl-image" border="0" align="middle" /></a></p>}
and
Line 237, Column 256: The border attribute is obsolete. Consider specifying img { border: 0; } in CSS instead. {..… title="gblcg.org-entrepreneur-girl-image" border="0" align="middle" /></a></p>}
What to do to make this code compliant?
Thanks heaps in advance for your advice/suggestions/assistance -
Raymond
I just added an image in the section 'Visionary' in my page using code:
<p><a href="http://gblcg.org/register"><img src="http://gblcg.org/images/home/gblcg-worried-business-woman-home.png" width="250" height="135" alt="gblcg.org-entrepreneur-girl-image" title="gblcg.org-entrepreneur-girl-image" border="0" align="middle" /></a></p>
When checking the validity of my work with the product's inbuilt 'HTML Validator' I receive an error code pertaining to this image stating invalid HTML5 markups:
"Line 237, Column 256: The align attribute on the img element is obsolete. Use CSS instead. {.. title="gblcg.org-entrepreneur-girl-image" border="0" align="middle" /></a></p>}
and
Line 237, Column 256: The border attribute is obsolete. Consider specifying img { border: 0; } in CSS instead. {..… title="gblcg.org-entrepreneur-girl-image" border="0" align="middle" /></a></p>}
What to do to make this code compliant?
Thanks heaps in advance for your advice/suggestions/assistance -
Raymond
How it's aligned and if it has borders or not should be specified in the CSS rather than in-line.
So create classes for your images...
Something like:
You can also add rounded corners, shadows.
Then in your HTML:
<img class="home" src="http://gblcg.org/images/home/gblcg-worried-business-woman-home.png" width="250" height="135" alt="gblcg.org-entrepreneur-girl-image" title="gblcg.org-entrepreneur-girl-image" >
So create classes for your images...
Something like:
img.home {
margin: 0 auto 0 auto;
border: 0
vertical-align: middle; (or whatever you need)
other attributes: ;
}
margin: 0 auto 0 auto;
border: 0
vertical-align: middle; (or whatever you need)
other attributes: ;
}
You can also add rounded corners, shadows.
Then in your HTML:
<img class="home" src="http://gblcg.org/images/home/gblcg-worried-business-woman-home.png" width="250" height="135" alt="gblcg.org-entrepreneur-girl-image" title="gblcg.org-entrepreneur-girl-image" >
I love deadlines. I like the whooshing sound they make as they fly by. (Douglas Adams)
https://www.callendales.com
https://www.callendales.com
paintbrush wrote:
How it's aligned and if it has borders or not should be specified in the CSS rather than in-line.
So create classes for your images...
Something like:
You can also add rounded corners, shadows.
Then in your HTML:
<img class="home" src="http://gblcg.org/images/home/gblcg-worried-business-woman-home.png" width="250" height="135" alt="gblcg.org-entrepreneur-girl-image" title="gblcg.org-entrepreneur-girl-image" >
How it's aligned and if it has borders or not should be specified in the CSS rather than in-line.
So create classes for your images...
Something like:
img.home {
margin: 0 auto 0 auto;
border: none;
vertical-align: middle; (or whatever you need)
other attributes: ;
}
margin: 0 auto 0 auto;
border: none;
vertical-align: middle; (or whatever you need)
other attributes: ;
}
You can also add rounded corners, shadows.
Then in your HTML:
<img class="home" src="http://gblcg.org/images/home/gblcg-worried-business-woman-home.png" width="250" height="135" alt="gblcg.org-entrepreneur-girl-image" title="gblcg.org-entrepreneur-girl-image" >
Just a correction above that the border property should be set to "none" rather than "0" and not to forget the semi-colon after that line too


I usually leave borders out completely, only specifying them as or if needed.
I love deadlines. I like the whooshing sound they make as they fly by. (Douglas Adams)
https://www.callendales.com
https://www.callendales.com
hehe yeah same here

Paintbrush, Jo Ann - you both totally, completely and utterly ROCK!
Thanks for that rapid response; corrections in my code now seem to work!
Loads of thanks to both of you...
Raymond
Thanks for that rapid response; corrections in my code now seem to work!
Loads of thanks to both of you...
Raymond
haha you're quite welcome Raymond, glad it worked for ya, more thanks to Paintbrush though as she did most of the work. Enjoy your new toy

It's good to feel validated

I love deadlines. I like the whooshing sound they make as they fly by. (Douglas Adams)
https://www.callendales.com
https://www.callendales.com
"Validated" is not the same as "vindicated."
halfnium -AT- alum.mit.edu
Yes, I looked just like that in 1962.
Yes, I looked just like that in 1962.




Validated and Vindicated
I love deadlines. I like the whooshing sound they make as they fly by. (Douglas Adams)
https://www.callendales.com
https://www.callendales.com
Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.