I am trying to create images hyperlinked to some URL's and hyperlinks donot seem to work.
I am using the code as given below at http://windchimes.co.in/index_w%20-%20Copy.html
Can you tell me why the hyperlinks to the icons are not workking?
<td width="29" style="padding-bottom: 42px;><img align="middle" title="blog" alt="blog" src="http://dl.dropbox.com/u/529534/windchimes/icon-blog.gif"></td><td width="29" style="padding-bottom: 42px;> <img align="middle" title="linkedin" alt="linkedin" src="http://dl.dropbox.com/u/529534/windchimes/icon-linkedin.gif"></td><td width="29" style="padding-bottom: 42px;> <img align="middle" title="facebook" alt="facebook" src="http://dl.dropbox.com/u/529534/windchimes/icon-facebook.gif"></td><td width="29" style="padding-bottom: 42px;> <img align="middle" title="twitter" alt="twitter" src="http://dl.dropbox.com/u/529534/windchimes/icon-twitter.gif"></td><td width="29" style="padding-bottom: 42px;> <img align="middle" title="Youtube" alt="Youtube" src="http://dl.dropbox.com/u/529534/windchimes/icon-youtube.gif"><td>
Don't know if there is more, but you're missing the closing quotes at:
<td width="29" style="padding-bottom: 42px;>
^^^
It is much easier to diagnose, maintain and adjust your web pages if you do the following.
Keep your concerns separated - your HTML should describe a document, not its style. Put your style rules into a cascading style sheet (CSS), which will also mean you'll satisfy the next rule
Don't repeat yourself. You had a width and style rule on all of these elements that was exactly the same. That means if you want to change the width to 30px, you'd have to find / replace each of these items (and if you automate your find and replace, you have to hope you don't accidentally replace something you didn't mean to.
Layout your code - by properly tabbing your HTML code, you will spot errors like missing closing tags as it will instantly look wrong to the eye.
Use validator.w3.org to make sure the code is correct - this will spot errors for you and will help you avoid the two problems in your code - a missing quote and a missing closing tag.
Here is a clean version of your code...
CSS:
td.myClass {
width: 29px;
padding-bottom: 42px;
text-align: center;
}
And HTML:
<td style="myClass">
<a href="http://windchimes.co.in/blog" target="_blank">
<img title="blog" alt="blog" src="http://dl.dropbox.com/u/529534/windchimes/icon-blog.gif">
</a>
</td>
<td style="myClass">
<a href="http://www.linkedin.com/groups?gid=120310" target="_blank">
<img title="linkedin" alt="linkedin" src="http://dl.dropbox.com/u/529534/windchimes/icon-linkedin.gif">
</a>
</td>
<td style="myClass">
<a href="http://www.facebook.com/group.php?gid=72425590275" target="_blank">
<img title="facebook" alt="facebook" src="http://dl.dropbox.com/u/529534/windchimes/icon-facebook.gif">
</a>
</td>
<td style="myClass">
<a href="http://twitter.com/windchimesindia" target="_blank">
<img title="twitter" alt="twitter" src="http://dl.dropbox.com/u/529534/windchimes/icon-twitter.gif">
</a>
</td>
<td style="myClass">
<a href="http://www.youtube.com/user/Windchimesindia" target="_blank">
<img title="Youtube" alt="Youtube" src="http://dl.dropbox.com/u/529534/windchimes/icon-youtube.gif">
</a>
</td>
A good idea is to run your code through the W3 Validator:
http://validator.w3.org/check?uri=http://windchimes.co.in/index_w%2520-%2520Copy.html
It will tell you in what ways your HTML is malformed.
Your last <td> tag isn't properly closed, either.
<td width="29" style="padding-bottom: 42px;>
...
<td>
should be </td> instead of <td> at the end.
Related
This question already has answers here:
How to remove underline from a link in HTML?
(8 answers)
Closed 2 years ago.
I am writing HTML5 specifically for emails. As such, I have to do all my CSS styling inline. I have a table with three images (all hosted on google drive) but this strange blue underscore is showing up?
Pictured:
https://imgur.com/a/F4Metod
Relevant HTML:
<table align="center" style="max-width: 400px">
<tr align="center">
<td>
<a href='https://www.twitter.com'>
<img src="http://drive.google.com/uc?export=view&id=1txAOBZTXT_J8RcM7fDaKXT-oO8hWV1fb" width="40" height="40"/>
</a>
<a href='https://www.facebook.com'>
<img style="margin:0px 10px" src="http://drive.google.com/uc?export=view&id=1nFoCmmlS1Kl3nKXkJk9eDaRqglpTeVP1" width="40" height="40"/>
</a>
<a href='https://www.instagram.com'>
<img src="http://drive.google.com/uc?export=view&id=1LcrU78sAidvlnnzL28TgdaIYBY9xcN7q" width="40" height="40"/>
</a>
</td>
</tr>
</table>
Looks like these are the default underlines of the anchor tags (<a>) so adding style="text-decoration: none" on them should fix it.
Most likely the underscore is a space Character within your link. Try to remove all spaces between your tags within the link-tag. And remove all linebreaks in your source document within the links too.
To remove this blue underline, add text-decoration: none; to the style of the <a> element.
Here is your code:
a {
text-decoration: none;
}
<table align="center" style="max-width: 400px">
<tr align="center">
<td>
<a href='https://www.twitter.com'>
<img src="http://drive.google.com/uc?export=view&id=1txAOBZTXT_J8RcM7fDaKXT-oO8hWV1fb" width="40" height="40"/>
</a>
<a href='https://www.facebook.com'>
<img style="margin:0px 10px" src="http://drive.google.com/uc?export=view&id=1nFoCmmlS1Kl3nKXkJk9eDaRqglpTeVP1" width="40" height="40"/>
</a>
<a href='https://www.instagram.com'>
<img src="http://drive.google.com/uc?export=view&id=1LcrU78sAidvlnnzL28TgdaIYBY9xcN7q" width="40" height="40"/>
</a>
</td>
</tr>
</table>
A living demo: https://codepen.io/marchmello/pen/PoPjgZE?editors=1100
so im designing a website using html, php, all that fun stuff & im trying to make facebook, twitter, youtube & instagram links that will open a new tab and take you to the website. but at the moment the URL is going to localhost/horizonphotography/www.facebook.com instead of opening the new tab and THEN going to www.facebook.com.
heres my HTML
<div class="social">
<a href="www.facebook.com" target="_blank">
<img border="0" alt="Facebook" src="img/facebook.png" width="50" height="50">
</a>
<a href="www.twitter.com" target="_blank">
<img border="0" alt="twitter" src="img/twitter.png" width="50" height="50">
</a>
<a href="www.youtube.com" target="_blank">
<img border="0" alt="youtube" src="img/youtube.png" width="50" height="50">
</a>
<a href="www.instagram.com" target="_blank">
<img border="0" alt="instagram" src="img/instagram.png" width="50" height="50">
</a>
</div>
and my css 'if' required.
.social {
position: fixed;
bottom: 0;
right: 7%;
width: 300px;
}
thanks in advance!
Try using a protocol like http:// or // to external links like this :
<a href="http://www.facebook.com" target="_blank">
<img border="0" alt="Facebook" src="img/facebook.png" width="50" height="50">
</a>
See this good answer on SO : https://stackoverflow.com/a/8951636/6028607
You need to specify the protocol, or put // at the start of the href attribute. For example:
http://www.youtube.com
Or
//www.youtube.com
Awesome, needed to identify the protocol as suggested. working well now! thanks everyone!
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 8 years ago.
Improve this question
End tag td seen, but there were open elements. I don't get it, what's wrong with this markup?
<td class="column-9">
<img src="http://4onlinecasinos.com/wp-content/uploads/2014/03/the-best-online-casinos-yes-transparent-good-e1395756650738.png" alt="This images tells that the option is positive" width="40" height="40" class="alignnone size-full wp-image-61" />
</td>
<td class="column-10">
<a href="http://4onlinecasinos.com/out/online-casinos-888casino" target="_blank">
<img src="http://4onlinecasinos.com/wp-content/uploads/2014/04/the-best-online-casinos-visit-button.png" alt="Visit this Online Casino" width="54" height="54" class="img-visit" />
</td>
<td class="column-11">
<a href="http://4onlinecasinos.com/out/online-casinos-888casino" target="_blank">
<img src="http://4onlinecasinos.com/wp-content/uploads/2014/04/the-best-online-casinos-info-sign-e1396351202753.png" alt="This gives you more specific information about the online casino offer" width="40" height="40" class="img-info" />
</td>
<td class="column-10">
Inside a TD
<a href="http://4onlinecasinos.com/out/online-casinos-888casino" target="_blank">
Inside an A inside a TD
<img src="http://4onlinecasinos.com/wp-content/uploads/2014/04/the-best-online-casinos-visit-button.png" alt="Visit this Online Casino" width="54" height="54" class="img-visit" />
An IMG. The element is self closing. Still inside an A inside a TD
</td>
Trying to close a TD but currently inside an A
You can't close the TD before you close the A, you are missing </a>.
you need to close your link <a> tag
<td class="column-9">
<img src="http://4onlinecasinos.com/wp-content/uploads/2014/03/the-best-online-casinos-yes-transparent-good-e1395756650738.png" alt="This images tells that the option is positive" width="40" height="40" class="alignnone size-full wp-image-61" /></a>
</td>
<td class="column-10">
<a href="http://4onlinecasinos.com/out/online-casinos-888casino" target="_blank">
<img src="http://4onlinecasinos.com/wp-content/uploads/2014/04/the-best-online-casinos-visit-button.png" alt="Visit this Online Casino" width="54" height="54" class="img-visit" /></a>
</td>
<td class="column-11">
<a href="http://4onlinecasinos.com/out/online-casinos-888casino" target="_blank">
<img src="http://4onlinecasinos.com/wp-content/uploads/2014/04/the-best-online-casinos-info-sign-e1396351202753.png" alt="This gives you more specific information about the online casino offer" width="40" height="40" class="img-info" /></a>
</td>
The only thing that is missing there is the </a>. And it would be making the HTML markup invalid.
It is totally invalid, you should enclose the elements as your open them.
Here is the markup that you can trust on:
<td class="column-9">
<img src="http://4onlinecasinos.com/wp-content/uploads/2014/03/the-best-online-casinos-yes-transparent-good-e1395756650738.png" alt="This images tells that the option is positive" width="40" height="40" class="alignnone size-full wp-image-61" />
</td>
<td class="column-10">
<a href="http://4onlinecasinos.com/out/online-casinos-888casino" target="_blank">
<img src="http://4onlinecasinos.com/wp-content/uploads/2014/04/the-best-online-casinos-visit-button.png" alt="Visit this Online Casino" width="54" height="54" class="img-visit" />
</a>
</td>
<td class="column-11">
<a href="http://4onlinecasinos.com/out/online-casinos-888casino" target="_blank">
<img src="http://4onlinecasinos.com/wp-content/uploads/2014/04/the-best-online-casinos-info-sign-e1396351202753.png" alt="This gives you more specific information about the online casino offer" width="40" height="40" class="img-info" />
</a>
</td>
Close <a>:
<a href="http://4onlinecasinos.com/out/online-casinos-888casino" target="_blank">
<img src="http://4onlinecasinos.com/wp-content/uploads/2014/04/the-best-online-casinos-visit-button.png" alt="Visit this Online Casino" width="54" height="54" class="img-visit" />
</a>
in this piece of html,
<div>
<a href="http://www.facebook.com/" target="_blank">
<img border="0" width="26" height="25" src="facebook.gif" alt="Facebook"/>
</a>
<a href="http://twitter.com/" target="_blank">
<img border="0" width="26" height="25" src="twitter.gif" alt="Twitter"/>
</a>
</div>
when it's displayed in the browser, there's a small mark next to the first image. Why does it appear and how can i remove it?
Here's an image to show it :
Just try setting the text-decoration: none for the two links above.
The problem you are facing is that the links are underlined by default, and there might be a line-break after the image that is causing a white-space characters, and the default text-decoration: underline; is showing an underline under that white-space character.
Remove the white-space between <img ...> and </a> like this:
<div>
<a href="http://www.facebook.com/" target="_blank">
<img border="0" width="26" height="25" src="facebook.gif" alt="Facebook"/></a>
<a href="http://twitter.com/" target="_blank">
<img border="0" width="26" height="25" src="twitter.gif" alt="Twitter"/></a>
</div>
I don't know the reason as I too have been struggling with this for a long time (something to do with white-space). However, what I have found is that if you set the display to inline-block, this problem goes away.
a { display: inline-block; }
See this fiddle: http://jsfiddle.net/mznMY/
You are using an a anchor which contains underline symbol
Put text-decoration: none to your a.
I made my first attempt here to create my own webpage.. But what can be the error in the code i wrote here?
<div align=center>
<img src="icons/twittergrey.png" alt="Twitter" name="Twitter" width="48" height="48" border="0" id="Twitter" />
<img src="icons/facebookgrey.png" alt="Facebook" name="Facebook" width="48" height="48" border="0" id="Facebook" />
<img src="icons/youtubegrey.png" alt="YouTube" name="YouTube" width="48" height="48" border="0" id="YouTube" />
<img src="icons/rssgrey.png" alt="RSS" name="RSS" width="48" height="48" border="0" id="RSS" />
<img src="icons/androidgrey.png" alt="Android Market" name="Android Market" width="48" height="48" border="0" id="Android Market" />
<a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Twitter','','icons/twitter.png',1)">
<a href="#" target="_blank" onmouseover="MM_swapImage('YouTube','','icons/youtube.png',1)" onmouseout="MM_swapImgRestore()">
Sorry i got this loong lines here.. Dunno how i could make it look like a list..
Well there's only two problems I can see, the first is that the center should be in speech marks, so it should look like ="center". Secondly you need to add </div> at the end... Should work then :D
After breaking your lines, a couple of your anchors are missing the </a> on them, which I'm sure is going to be causing some problems for you.
Also, align="center" is deprecated. Use style="text-align: center" instead.
P.S. You really shouldn't write your code all on one line like that (at least hopefully you aren't). All that will cause is problems like this.
You have an embedded anchor tag in an anchor tag (may cause problems) you also are missing two ending anchor tags and an ending div tag as noted by others.
Your markup is really confusing though XD
cleaned up (a little) version of your markup
http://jsfiddle.net/MZge2/1
You need to Close
<div align=center> with </div>
<div align=center> Should be <div align="center">