Jump to content
Stef's Coding Community
straightryder

Attributes construct error: Validation Question

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.

Share this post


Link to post
Share on other sites

I'm pretty sure you aren't supposed to have 'border="0"' on your images (and you don't have a space between the " and the start of "border" on at least one of your images.)

 

Remove the borders, and add "a img { border:0; }" to your CSS instead.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

try the following in your external css rather than coding atts in the HTML:

 

.social-icons * img { width:42px; height:41px;... }

 

im not positive on this but im thinking that error is because your values do not have expressed units of measure. ie. pt, px, etc

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
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...