I got a small problem with html img tags.
I got a lot of banners on my website, but for some reason firefox only shows the gif's and not the jpg's.
I have tried changing to source to the files but that didn't help much.
anyone out here knows what to do ?
JsFiddle example of the images
<!-- i didnt use the original links to the website and banners since they are
adult websites. -->
<!-- This one will work since its a gif -->
<p style="text-align: center;"><img border="0" width="468" height="60" src="http://fakesite.com/Upload/Banners/banner1.jpg" />
<!-- This one doesnt -->
<p style="text-align: center;"><img border="0" width="468" height="60" src="http://fakesite.com/Upload/Banners/banner2.gif" />
Going into safe mode, then restarting normally, the jpg's were showing like they're supposed to. thanks #j08691
Related
<body style="background-color:#23272A;" <img src="https://drive.google.com/uc?id=1wzC2IUozmJdeX6WlL3hP40e2V5xRm3AH" alt="Bling logo"
width="190" height="120">
<hr>
<h1>bert is corn</h1>
<hr>
With the code I am trying to display a logo to represent the website. The code here only involves the logo. Please help if you can. Thanks
You have two problems.
First, a typo. You forgot to end the <body start tag with a >.
Second: The value of the src attribute has to be a URL pointing to an image.
The URL you are using points to an HTML document.
Google Drive is a file storage service, not a web hosting service. It isn't designed for your purposes. Find somewhere else to store your image files.
this is a very basic error, you forgot to close the tag.
<body style="background-color:#23272A;"> <img ......
---------------------------------------↑
You have not closed the <body> tag
<body style="background-color:#23272A;">
<img src="https://drive.google.com/uc?id=1wzC2IUozmJdeX6WlL3hP40e2V5xRm3AH" alt="Bling logo"
width="190" height="120">
<hr>
<h1>bert is corn</h1>
<hr>
I know, I should use something like Bulletproof Email Buttons service for such purposes, but I have a case, where I need to use an image wrapped with an <a> tag to represent a link in my email template. I ran a test with testi.at and it appears to be represented correctly for almost 100% of clients (up to Outlook 2007). I cannot check if such image link is 100% clickable though. My question is if there are any known issues with this approach?
<tr>
<td style="text-align: center;">
<a href="http://example.com">
<img src="https://some-image-src.png" width="100" height="50" alt="Sample image" />
</a>
</td>
</tr>
This is a very common practice and there is no downside that I can think of. One recommandation I'd make is to add the following styles on your image element:
vertical-align:middle; This prevents a small gap to appear below images in email clients using an HTML5 doctype.
border:none; This prevents a blue outline to appear on older email clients running on Internet Explorer’s rendering engine (like Outlook 2003 for example).
Also, be careful, there's a typo in your code (scr instead of src).
I haven't tested this on all versions of IE but I have a problem that when I go to this site: http://www.yourwhiteknight.com/manufactured/ and click on one of the image links in the navigation menu (Home, Manufacted Homes, or Real Estate) it just opens the image of the button in the same window. It doesn't do this in Chrome or Firefox (it goes to the link as it should). Has anyone seen this before or does anyone know a solution?
Here is the HTML:
<div class="textwidget">
<a href="http://yourwhiteknight.com/">
<img src="http://yourwhiteknight.com/wp-content/uploads/2012/10/home.button.png" class="icon">
</a>
<a href="http://yourwhiteknight.com/manufactured/">
<img width="233" height="38" src="http://yourwhiteknight.com/wp-content/uploads/2012/11/m.homes-tab.png" class="homes">
</a>
<a href="http://realestate.yourwhiteknight.com">
<img src="http://yourwhiteknight.com/wp-content/uploads/2012/11/real-estate-tab.png" class="real">
</a>
</div>
Thanks in advance for your help!
UPDATE:
I did just notice that when I inspect the element in IE it shows the code for an image as this:
<img width="233" height="38" class="homes" src="http://yourwhiteknight.com/wp-content/uploads/2012/11/m.homes-tab.png"></img>
I tried to add a slash at the end of the image code to no avail ()
Funny thing is that if you go to our other site that is a mirror of this one the buttons work: http://realestate.yourwhiteknight.com/ even though the code on the back end is the exact same.
Add target="_self" to the links and it works as a workaround. There is probably some JavaScript (maybe Google Analytics) interfering with the page.
This was being caused by a plugin called: Google Analytics Suite. I just deactivated it and it started working. Thanks everyone for pointing me in the right direction!
I'm using html for an Email campaign and I have a problem, I have the following code:
<TABLE width="550px" height="723px" BACKGROUND="FlyerImage.jpg" border="0" cellpadding="0" cellspacing="0">
<TR>
<TD style="padding-top:190px; padding-right:30px; line-height:0px;" align="right">
<a style="line-height:0px;" href="http://LINK.com/">
<img src="ViewOffer.png">
</a>
</TD>
</TR>
<TR>
<TD style="padding-bottom:185px; padding-left:35px; line-height:0px;" align="left">
<a style="line-height:0px;" href="http://LINK.com/">
<img src="ViewMore.png">
</a>
</TD>
</TR>
</TABLE>
This code works perfectly on Gmail, Hotmail, Yahoo and some email clients, but in OUTLOOK it's not showing correctly, I'm pretty sure it is because Outlook doesn't support background images on tables.
I'm using an Email Campaign web client and the recommendations are to markup using inline css, not using html,head and body tags, not using divs and not using positioning (absolute,relative,fixed ...) and to markup with tables.
How do I position the two call to action buttons on top of the main image on specific places without using these techniques ?
Thanks in advance =] !
If CSS is not supported, then there is no way to guarantee positioning the buttons on top of the image. In that case, I would recommend changing to using an image map. That is pure html without css, though I really don't know if it is supported by all the email clients.
You would incorporate the button image into the main image and then set your coordinates (I don't know them, they are represented by "?'s" below). Something like:
<img src="FlyerImage.jpg" alt="alternative text" usemap="#flyer" />
<map name="flyer">
<area shape="rect" coords="?,?,?,?" href="http://LINK.com/" /> <!--button 1-->
<area shape="rect" coords="?,?,?,?" href="http://LINK.com/" /> <!--button 2-->
</map>
Neither background images nor positioning is very well supported in HTML Email. Here is a great reference: http://www.campaignmonitor.com/css/
I've never tried it but it looks like there is a hacky-ugly way to force Outlook to support background images. Link.
I have my image placed in a folder called images in the netbeans web pages folder and the link to it in my jsp is in a div as shown below:
<div id="image">
<p>
<img src="${pageContext.request.contextPath}/images/vote_image.GIF"
alt="banner"
width=600px
height=300px
/>
</p>
</div><!--end of image div-->
The problem is the image just doesn't load in the browser. What could be the problem? I used the same code in linux and it used to load the image. Could it be a browser problem, I'm using firefox 3.6 which I don't think should have a problem. Please let me know if any one has a clue as to why this is happening. If the problem is my code let me know how to adjust. Thank you
There are no units used in HTML width and height attributes.
<img src="${pageContext.request.contextPath}/images/vote_image.GIF"
alt="banner"
width="600"
height="300"
/>
Without seeing the rendered source of the page, I'd guess that's your problem. If not, try inspecting your image in Firebug and post what its rendered source looks like.
Also, make sure case sensitivity is not in play: gif vs. GIF.