Re: Line 680, Column 274: Duplicate ID menu-item-39.

2013-04-16 20:47, rich ẃrote:

> /Line 680
> <http://validator.w3.org/check?uri=http%3A%2F%2Fecoventi.co.uk%2F&charset=%28detect+automatically%29&doctype=Inline&ss=1&outline=1&group=0&No200=1&verbose=1&user-agent=W3C_Validator%2F1.3+http%3A%2F%2Fvalidator.w3.org%2Fservices#line-680>,
>  Column 274/: Duplicate ID menu-item-39.
>
> |…post_type menu-item-object-page alpha"*>*<a
> href="http://ecoventi.co.uk/home/"><…|

It seems that the id attribute has been changed from "menu-item-39" to 
"follow".

The id attribute value must be unique in a document. This derives 
directly from its purpose: to uniquely identify an element.

You need to change one of the id values to another value, or to use 
class attribute instead of id. In the latter case, you may need to put 
the class name into an existing class attribute. Note that you already 
have a "follow" class on other elements. This is valid but may cause 
confusion.

In both cases, you need to revise the CSS and JavaScript code, decide 
whether a #follow construct should refer to one of the elements or both, 
and modify the code accordingly.

If the "menu-item-39" was not actually used for anything before it was 
changed to "follow", the id attributes could simply be removed.

> I am totally new to all this but have been able to fix 5 errors so
> far but now im a bit lost plaese help me

In addition to the duplicate ID issue, there seem to be just 5 errors 
left. They are all of the same type and simple in principle: an alt 
attribute is missing. The codes are like

<h5><a href="http://ecoventi.co.uk/products-page/sale-items/">Sale 
Items</a></h5>
<a href="http://ecoventi.co.uk/products-page/sale-items/" >
<img 
src='http://ecoventi.co.uk/wp-content/uploads/wpsc/category_images/newyearsale.png' 
width='114' height='87' /></a>

That means two links to the same page. This is valid, though not good 
for usability and accessibility; lack of alt is not valid.

The simplest fix is to copy the text of the first link, here "Sales 
Items", into an alt attribute value. However, this would mean that when 
images are disabled, the user sees two identical links. This is better 
than a normal link and an enigmatic link with no text, though. The best 
approach is to combine the links into one link, and then the alt 
attribute should be alt="".

Using HTML5, you can actually put both the heading and the image inside 
a link:

<a href="http://ecoventi.co.uk/products-page/sale-items/"><h5>Sale 
Items</a></h5>
<img 
src='http://ecoventi.co.uk/wp-content/uploads/wpsc/category_images/newyearsale.png' 
width='114' height='87' /></a>

This may change the visual appearance, due to different element 
structure, so check out whether this is so and whether it can be fixed 
by modifying the CSS code, before making all the changes.

Yucca

Received on Thursday, 18 April 2013 06:43:47 UTC