In Chrome image and the text link is aligned properly. However, when I check it on IE8, I noticed that image and text link is not align properly.
Here is the code I use. this is a code I use in Wordpress wpfilebase templates.
<td style="width:350px;padding-left:20px;">
<a href="%file_url%">
<img align="top" src="%file_icon_url%" alt="%file_display_name%" height="40" />
</a>
<span style="width:200px;float:right;vertical-align:text-top;">
%file_display_name%</span>
</td>
Chrome renders properly, but not IE. How to fix this? If I need to use conditional CSS for IE, what is the correct code for IE?
Your 'span' tag closes before you close your 'a' tag. Corrected Code:
<td style="width:350px;padding-left:20px;">
<a href="%file_url%">
<img align="top" src="%file_icon_url%" alt="%file_display_name%" height="40" />
</a>
<span style="width:200px;float:right;vertical-align:text-top;">
%file_display_name%
</span>
</td>
Try this,
<td style="width:350px;padding-left:20px;" valign="top"><!--use valign top here -->
<a href="%file_url%">
<img align="top" src="%file_icon_url%" alt="%file_display_name%" height="40" alt="img" />
</a>
<span style="width:200px;padding-left:10px;vertical-align:text-top;"> <!--remove float and add padding here-->
%file_display_name%<!--anchor tag should be closed here-->
</span>
</td>
Use padding-left in span element and remove float property from it.
Using div tag instead of span, solved my issue.
<td style="width:350px;padding-left:20px;" valign="top"><!--use valign top here -->
<div style="float:left;"><a href="%file_url%">
<img align="top" src="%file_icon_url%" alt="%file_display_name%" height="40" alt="img" />
</a></div>
<div style="max-width:200px;padding-left:10px;vertical-align:text-top;"> <!--remove float and add padding here-->
%file_display_name%<!--anchor tag should be closed here-->
</div>
</td>
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
php
<a href='.$row5['url'].'"><img src="../asset/view-as-pdf.jpg"
width="94" height="94" /></a>
html
<center>
<a href="http://tools.com/com/fli7ppdf/K171/157/Kap157_E/files/kap157_en.pdf"">
<img src="asset/view-as-pdf.jpg" height="94" width="94" />
</a>
</center>
after click image, it not open url, but view image. how to fix it
<center><a
href="http://kstools.com/com/flippdf/K11/15/Kap15_E/files/kap15_en.pdf""><a
target="_blank" href="asset/view-as-pdf.jpg"><img
src="asset/view-as-pdf.jpg" height="94" width="94"></a></a></center>
Here you are closing a twice.
Your code should like this ,
<center><img src="asset/view-as-pdf.jpg" height="94" width="94"></center>
HTML
<center>
<a href="http://kstools.com/com/flippdf/K11/15/Kap15_E/files/kap15_en.pdf"">
<img src="asset/view-as-pdf.jpg" height="94" width="94" />
</a>
</center>
Remove anchor tag which has link of the image.
I have the following code.
I cannot understand why after the image (videoCmera_icon.png) it puts and underscore.
I find that this happens only when I have
style="display:inline;
Here is the code:
<div id='HomeVideo1' style="display:inline;">
<a href="#">
<img src="images/videoCamera_icon.png" border="0">
</a>
<a href="#" style="text-decoration: none">
<span class="text3">View Video</span>
</a>
</div>
Inline elements will respect whitespace between their child elements. So the whitespace between the <img> and the closing </a> tag shows up as a space (with an underline because it's part of a link).
Removing the whitespace between the <img> and its <a> tags helps:
<div id='HomeVideo1' style="display:inline;">
<img src="images/videoCamera_icon.png" border="0" />
<span class="text3">View Video</span>
</div>
http://jsfiddle.net/5abbx/
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 am trying to put two banners on top of a navigation bar with everything nicely centered. I can get the two banners to nicely sit by one another but when I make the browser window smaller the first banner goes on top of the second!
Is there a code where I can prevent this? If so please let me know.
This is what I have so far:
<center>
<a href="loanworkout.org">
<img width="200" height="60" src="header-2.gif">
</a>
<a href="htpp://www.modifyloan.net">
<img width="660" height="60" src="loansafe_728x90.gif">
</a>
<BR>
You can set a min-width on the container of the banners.
Edit based on your comment:
<center> <!-- *shudder* -->
<div style="min-width: 860px;"> <!-- inline only for example purposes -->
<a href="loanworkout.org">
<img width="200" height="60" src="header-2.gif">
</a>
<a href="htpp://www.modifyloan.net">
<img width="660" height="60" src="loansafe_728x90.gif">
</a>
</div> <!-- ditch the BR -->
...
</center>