I use below marquee in my webpage,
<MARQUEE WIDTH=100% DIRECTION=LEFT BEHAVIOR=SCROLL Loop=auto BGColor=White onmouseover="this.stop()" onmouseout="this.start()" >
<img src="/images/berkadia.png" border="0" alt="barkedia" width="200" >
<img src="/images/hcl.png" border="0" alt="HCL" width="200">
<img src="/images/hcl-axon.png" border="0" alt="HCL-Axon" width="200">
<img src="/images/hexaware.png" border="0" alt="Hexaware" width="200">
<img src="/images/lebera.png" border="0" alt="Lebera" width="200">
<img src="/images/polaris.png" border="0" alt="Polaris" width="200">
<img src="/images/wipro.png" border="0" alt="Wipro" width="200">
</MARQUEE>
but this marquee not properly working in IE8 alone?. It marquee images but struck.
How can i Fix that?.
There is no character in your marquee inner html. You have only images.
Write " " before every image tag
Related
I use this code to display a animated webp in a HTML5 email. The image is playing in Outlook but not in Gmail. Size is 600x338px. Weight is around 15 Mo and duration is 15 secs. Is it a matter of weight?
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%" style="width:100%;border:none;max-width:600px;">
<tr align="center">
<td>
<div style="text-align:center;background-image:url('GIF/LINK');background-size:20%;background-repeat:no-repeat;background-position:center center;margin:0 auto;position:relative;height:0;max-height:0;padding-bottom:56.33%;">
<a href="WEBP/LINK" style="border:none;">
<!--[if !mso]><!-- --> <img style="width:100%;border:none;max-width:600px;" src="WEBP/LINK" alt="VIDEO"> <!--<![endif]-->
<!--[if lte mso 16]> <img alt="VIDEO" border="0" src="VIDEO/LINK" style="border:none;width:0px;max-height:0px;height:0px;overflow:hidden;text-align:center;" width="600" height="338"/> <![endif]-->
</a>
</div>
</td>
</tr>
</table>
Gmail does not support webp animation; it converts the file to jpg: https://www.caniemail.com/features/image-webp/
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
I have created one marquee with images as element.
Code is
<marquee behavior="scroll" direction="left" scrollamount="30" class="image-marquee" >
<img src="images/cbr.png" alt="cbr-bike" name="CBR BIKE" style="float:left;" title="CBR BIKE" border="0" onmouseover="this.parentNode.stop()" onmouseout="this.parentNode.start()" />
<img src="images/blank.png" alt="aviator" name="blank" style="float:left; cursor:default;"border="0" />
<img src="images/aviator_.png" alt="cbr-bike" name="AVIATOR" style="float:left;" title="AVIATOR" border="0" onmouseover="this.parentNode.stop()" onmouseout="this.parentNode.start()" />
<img src="images/blank.png" alt="aviator" name="blank" style="float:left; cursor:default;"border="0" />
<img src="images/cbr.png" alt="cbr-bike" name="CBR BIKE" style="float:left;" title="CBR BIKE" border="0" onmouseover="this.parentNode.stop()" onmouseout="this.parentNode.start()" />
<img src="images/blank.png" alt="aviator" name="blank" style="float:left; cursor:default;"border="0" />
<img src="images/aviator_.png" alt="cbr-bike" name="AVIATOR" style="float:left;" title="AVIATOR" border="0" onmouseover="this.parentNode.stop()" onmouseout="this.parentNode.start()" />
<img src="images/blank.png" alt="aviator" name="blank" style="float:left; cursor:default;"border="0" />
</marquee>
CSS
.image-marquee{ }
.image-marquee img{margin-top:70px;cursor:pointer; }
Is it possible to stop the marquee after every image slide and after some time it should run forward to next image?
Try this code
scrolldelay="2000"
scrollamount="500"
here is my code snippet
<img src="images/home.jpg" height="40" width="150" />
<img src="images/contact.jpg" height="40" width="150" />
and
<iframe src="aboutseels.php" scrolling="auto" width="100%" height="360" ></iframe>
now, i was wondering if there is a way that when the client clicks one of the images, the src of the iframe will change??
for example if i click on the second image the src of the iframe will be src="contactus.php"
I think you set a name attribute on the iframe and wrap the images in an a tag with the target attribute to be the same name.
<iframe name="foo" ...></iframe>
...
you could use the javascript library jQuery and then use the click event to capture clicks on the images it could look something like this
$(function(){
$('img').click(function(){
iframeSrc = this.attr('title');
$('iframe').attr('src',iframeSrc);
});
});
and the html could look like this then
<img src="images/home.jpg" height="40" width="150" title="http://google.com" />
<img src="images/contact.jpg" height="40" width="150" title="http://facebook.com"/>
<iframe src="aboutseels.php" id="iframe" scrolling="auto" width="100%" height="360" ></iframe>
Or use regular html and use target
<a target="iframe" href="http://facebook.com"><img src="images/home.jpg" height="40" width="150" title="http://google.com" /></a>
<a target="iframe" href="http://google.com"><img src="images/contact.jpg" height="40" width="150" title="http://facebook.com"/></a>
<iframe src="aboutseels.php" id="iframe" scrolling="auto" width="100%" height="360" ></iframe>
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">