Jump to content

Attributes construct error: Validation Question


straightryder

Recommended Posts

My current Doc Type is:

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

 

 

The Validation errors im getting are:

 

 

Line 54, Column 80: attributes construct error

…media icons/twitter.png" width="42" height="41" border="0"alt="twitter" /></li>

Line 54, Column 80: Couldn't find end of Start Tag img line 54

…media icons/twitter.png" width="42" height="41" border="0"alt="twitter" /></li>

 

And so on because of the following:

 

<ul class="social-icons">

<li><a href="#"><img src="images/social media icons/facebook.png" width="42" height="41" border="0" alt="facebook" /></a></li>

<li><a href="#"><img src="images/social media icons/twitter.png" width="42" height="41" border="0" alt="twitter" /></a></li>

<li><a href="#"><img src="images/social media icons/stumble.png" width="42" height="41" border="0" alt="stumble" /></a></li>

<li><a href="#"><img src="images/social media icons/feedburner.png" width="42" height="41" border="0" alt="feedburner" /></a></li>

<li><a href="#"><img src="images/social media icons/vimeo.png" width="42" height="41" border="0" alt="vimeo" /></a></li>

<li><a href="#"><img src="images/social media icons/youtube.png" width="42" height="41"border="0" alt="youtube" /></a></li>

</ul>

 

What gives..... ??

 

If remove "width="42" height="41" border="0"" then a blue border appears around the icons in firefox or any other image that has an <a> attached to it.

Link to comment
Share on other sites

  • 1 year later...

Try this

 

<ul class="social-icons">

<li><a href="#"><img src="images/social media icons/facebook.png" width="42" height="41" alt="facebook" border="0" /></a></li>

<li><a href="#"><img src="images/social media icons/twitter.png" width="42" height="41" alt="twitter" border="0" /></a></li>

<li><a href="#"><img src="images/social media icons/stumble.png" width="42" height="41" alt="stumble" border="0" /></a></li>

<li><a href="#"><img src="images/social media icons/feedburner.png" width="42" height="41" alt="feedburner" border="0" /></a></li>

<li><a href="#"><img src="images/social media icons/vimeo.png" width="42" height="41" alt="vimeo" border="0" /></a></li>

<li><a href="#"><img src="images/social media icons/youtube.png" width="42" height="41 alt="youtube" "border="0" /></a></li>

</ul>[/code

 

Let me know. I just found this website looking for explanation about some warning validation :rolleyes: I just decided to register and help others.

Link to comment
Share on other sites

  • 3 weeks later...
  • 2 weeks later...

Kill the height=, width=, border= properties of your images in HTML and use CSS for them

 

a img {border: 0px; height: 41px; width: 42px;}

 

If that doesn't work, it may be because your file path for image contains spaces. This is a general no-no and you should rename the folder that contains them to not have spaces, i.e. /social-media-icons/

Edited by khanahk
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...