Page 1 of 1

HTML error

Posted: Thu Oct 03, 2013 8:58 am
by joesdomain
I downloaded a free html5 template for my website which is located at: http://www.joesdomain.ca

Using the HTML Validator, I Managed to clear up all html errors. However, if you look at the bottom of my webpage http://www.joesdomain.ca You will see the Facebook, Google and Twitter icons on the bottom right. There's words behind the cons that should not be there. Here's the code:


Line 144 <div class="grid_4">
Line 145 <ul class="list-services">
Line 146 <li><a class="item-1" href="https://www.facebook.com/mr.joe.robertson">Joe's on Facebook</a></li>
Line 147 <li><a class="item-2" href="https://twitter.com/joe_robertson_">Joe's on Twitter</a></li>
Line 148 <li><a class="item-3" href="https://www.google.com/intl/en/chrome/browser/">Try Google Chrome</a></li>
Line 149 <li><a class="item-4" href="http://www.youtube.com/channel/UCU8UkuIrqHYFruT5C_roynQ">Watch my Videos</a></li>

What am I doing wrong?

Joe

Re: HTML error

Posted: Thu Oct 03, 2013 1:21 pm
by Albert Wiersch
Hi Joe,

I took a quick look and it looks like those classes (class="item-1", etc) have background images attached that are incompatible with having normal text in the "a" element.

My initial though is that it is bad design. Those buttons should be "img" elements instead of background images, with appropriate "alt" text. If you don't want to address this, then you may just want to remove the text in the "a" elements and put it in a "title" attribute instead.

For example, instead of

Code: Select all

<li><a class="item-1" href="https://www.facebook.com/mr.joe.robertson">Joe's on Facebook</a></li>
Use this:

Code: Select all

<li><a class="item-1" href="https://www.facebook.com/mr.joe.robertson" title="Joe's on Facebook"> </a></li>
CSE HTML Validator will warn you about not having link text in the "a" element, a consequence of this questionable design of using background images instead of real buttons to click on.

Re: HTML error

Posted: Thu Oct 03, 2013 9:49 pm
by joesdomain
I replaced the code above with what you provided. That cured the background text. Now, when I run the HTML validator, I get the following:

Warning 146 message feedbackThe "a" element contains no link text. Although link text is not technically required, it is unusual not to have any. Should this element contain link text or another element like "img" with alt text?

<li><a class="item-1" href="https://www.facebook.com/mr.joe.robertson" title="Joe's on Facebook"> </a></li>



Warning 147 message feedbackThe "a" element contains no link text. Although link text is not technically required, it is unusual not to have any. Should this element contain link text or another element like "img" with alt text?

<li><a class="item-2" href="https://twitter.com/joe_robertson_" title="Joe's on Twitter"></a></li>

Warning 148 message feedbackThe "a" element contains no link text. Although link text is not technically required, it is unusual not to have any. Should this element contain link text or another element like "img" with alt text?

<li><a class="item-3" href="https://www.google.com/intl/en/chrome/browser/" title="Try Google Chrome"></a></li>

Warning 149 message feedbackThe "a" element contains no link text. Although link text is not technically required, it is unusual not to have any. Should this element contain link text or another element like "img" with alt text?

<li><a class="item-4" href="http://www.youtube.com/channel/UCU8UkuIrqHYFruT5C_roynQ" title="Watch my Videos"></a></li>

Re: HTML error

Posted: Thu Oct 03, 2013 10:45 pm
by Albert Wiersch
Yes, I don't think the template is a good design. You may want to fix that with real images as buttons (instead of the CSS background images that are used now) or just leave it as it is and accept the validator's warnings, or disable the warnings if you're using the desktop version by right-clicking on the message and disabling it.

Whether improving this design is worth the time and trouble is up to you. :D

Re: HTML error

Posted: Sun Oct 06, 2013 11:09 am
by joesdomain
I have found some actually images that I can use but am not sure of what code to type in. Any ideas

Thanks

Joe

Re: HTML error

Posted: Mon Oct 07, 2013 9:35 pm
by Albert Wiersch
joesdomain wrote:I have found some actually images that I can use but am not sure of what code to type in. Any ideas

Thanks

Joe
Hi Joe,

Instead of

Code: Select all

<li><a class="item-1" href="https://www.facebook.com/mr.joe.robertson">Joe's on Facebook</a></li>
Try something like this:

Code: Select all

<li><a href="https://www.facebook.com/mr.joe.robertson"><img src="(image)" alt="Joe's on Facebook"></a></li>
Some tweaking may* be required. :D

*And probably will be.