|
HTML - Hotmail Html Mailer Image Problem
Hi Guys,
I am new to this forum so forgive me if this is already been discussed, but ive searched and could find. I have put together a basic HTML mailer that seems to work on all email clients, Yahoo, Gmail, Outlook, Mac Mail, iPhone Mail but only thing is its not showing up correctly on hotmail as it is repeating the image at the bottom of the mailer. The image in the mailer is linked via URL (as this was the only way it would work in yahoo mail) and I am sending it via Outlook on the PC via Internet Explorer (send this page via email option). http://www.garnellnutrition.com/Mail...ewsletter.html Is there anyway i could place code into the html so it does not repeat the URL linked image within hotmail (but still works in yahoo). Hope this makes sense Thank you Kind Regards Bini Similar TutorialsHi Friends, I am using Dreamweaver cs3.... I am create one mailer.... i put the background image with background-repeat y, but it doesn't view the browser... how can i solve this problem........ vjn_23 Trying to build an HTML email using tables and inline CSS but the text in the HTML cell is not functioning properly. An unwanted "line-break" is appearing at the first line. So the first line of text starts on the second line. I have tried: margin-top: 0px; as well as padding: 0px 0px 0px 0px; My code looks like this: <p style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; color: #FFFFFF; margin-top: 0px; line-height: 13px"> or this <p style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; color: #FFFFFF; margin-top: 0px; line-height: 13px"> Are there any other top margin style controls I can use? p.s. I have only notice the issue in Hotmail. Hi Friends, I am using mailer in html but i cannot remove the outline link of the image. For example i using like this:- <a style="outline:none; border:none; border-style:none;" href="http://www.google.com/"><img src="images/logo.png" /></a> how can i remove the linked image outline. i am waiting for yours reply. If do you have the solutions send me your reply this id vjn_23@yahoo.co.in Vijayan M Hi, i've been trying to solve a problem for the last couple of hours and it is driving me mad, I can't find any help anywhere on the web so thought I would give this a whirl! After placing an image map on my page, I added another image below it, but there is a tiny black vertical gap (black being the bg color) between them. I have tried changing the location of the <br> tag in the script, have tried aligning and pretty much everything else obvious and I have no idea how to make them touch each other. Any help would be appreciated. The page can be seen at: http://jask.freehostingcloud.com/contactjask.html the annoying gap is between the navigation bar and the largest image. This appears to only be a problem in IE (i'm running version 8 on Vista) my code (which you can ofcourse view for your selves but i'll save you the time) is - <body vlink="#ff0000" alink="#ff0000" link="#ff0000" bgcolor="black"> <CENTER> <br> <a href="https://www.paypal.com/cgi-bin/webscr?cmd=_xclick&business=KF9FFNDA7HD3N&lc=GB&item_name=Jask%20First%20Edition%20Board%20Game&amou nt=19%2e90¤cy_code=GBP&button_subtype=services&shipping=4%2e90&bn=PP%2dBuyNowBF%3abtn_buynowCC _LG%2egif%3aNonHosted" target="-blank"> <img src="http://jask.freehostingcloud.com/jaskgif.gif" width="907" border="0"></a><br> <img src="http://jask.freehostingcloud.com/gobar.JPG" height="55" border="0" useMap=#purple border=0><MAP name=purple border="0"> <area shape="rect" coords="86,7,210,43" href="http://www.jaskgames.com" alt="Jask!" title="Jask!"/> <area shape="rect" coords="257,8,381,44" href="http://jask.freehostingcloud.com/aboutjask.html" alt="All about Jask!" title="All about Jask!" /> <area shape="rect" coords="427,9,586,45" href="http://jask.freehostingcloud.com/contactjask.html" alt="Contact us about Jask!" title="Contact us about Jask!" /> <area shape="rect" coords="631,8,806,44" href="https://www.paypal.com/cgi-bin/webscr?cmd=_xclick&business=KF9FFNDA7HD3N&lc=GB&item_name=Jask%20First%20Edition%20Board%20Game&amou nt=19%2e90¤cy_code=GBP&button_subtype=services&shipping=4%2e90&bn=PP%2dBuyNowBF%3abtn_buynowCC _LG%2egif%3aNonHosted" alt="Buy your own game!" title="Buy your own game!"/><br> <TABLE background="http://jask.freehostingcloud.com/mainybar.jpg" valign="top" width="907" height="445" cellpadding="0" cellspacing="0"> <TR><td width="320" valign="top"></td> <TD valign="top"><br><br> <font face="arial" color="white"><center> <form method="post" action="http://www.emailmeform.com/fid.php?formid=706822" enctype="multipart/form-data" accept-charset="UTF-8"><b><font face="arial" color=black></font> <div style="" id="mainmsg"> </div><br><font face="arial" color=black>Your Name: </font><input type="text" name="FieldData0" size="20"><br><br><font face="arial" color=black><b>Your Email Address: </font><input type="text" name="FieldData1" size="20"><br><br></font><textarea name="FieldData2" cols="44" rows="6"></textarea><br><br><input type="text" name="hida2" value="" maxlength="100" size="3" style="display : none;"><input type="submit" class="btn" value="Send email" name="Submit"> <input type="reset" class="btn" value=" Clear " name="Clear"><br></form> <b><font face="arial" color=black><b>Thankyou for getting in touch, We will respond to you<br> shortly. Alternatively, contact us directly by email:<br> <a href="mailto:info@jaskgames.com">info@jaskgames.com</a> </b> </TD></tr> </TABLE align="left"></map> </body></html> Many thanks in advance for any help, i'm totally stuck Hey there, first post on this forum so nice to meet you all.. I have a problem with placing an image that has been image mapped. Its either, I have the image in the right place but without the image maps, or in the wrong place with the image maps.. headwrecker! My girlfriends brother persuaded me to box him off a proper band myspace and with the persuasive power of a crate of lager i agreed.. so here is what i have scrapped together... http://www.myspace.com/thecommitments52 (nb: this is only a test page for myself...) You see the main image header and the three white tabs: add, message and comment.. I am using a div style to keep the image header where I want it... Here is a seperate piece of html away from the main piece of html with the image mapped and ready to go: Quote: <map name='Map1'> <area shape='polygon' href='http://friends.myspace.com/index.cfm?fuseaction=invite.addfriend_verify&friendId=423424063' alt='' title='' coords='543,181 668,145 679,178 553,218' /> <area shape='polygon' href='http://messaging.myspace.com/index.cfm?fuseaction=mail.message&friendID=423424063' alt='' title='' coords='502,252 745,236 747,274 503,287' /> <area shape='polygon' href='http://comment.myspace.com/index.cfm?fuseaction=user.viewProfile_commentForm&friendID=423424063' alt='' title='' coords='455,297 694,359 687,395 446,332' /> </map> <img border='0' usemap='#Map1' src='http://h1.ripway.com/palefountain/png.png' alt='' /> here is the main HTML i insert into the myspace section: Code: <style>
{!- make room at bottom of div.profileWidth -!}
div.profileWidth table {margin-bottom:518px !important;}
{! apply banner as bkgd image !}
div.profileWidth{background-image:url(http://h1.ripway.com/palefountain/png.png)!important; background-position:center bottom !important; background-repeat:no-repeat !important;}
{!- reverse -!}
table.rail, .i, .i i.x {display:none;}
</style>
<style>
body {
font-size: 1px; line-height: 1px; font-family: Verdana, Arial, sans-serif;
background-color:transparent;
background-image:url(http://h1.ripway.com/palefountain/newbg.gif );
background-attachment: fixed;
background-position: bottom left;
background-repeat: no-repeat;
margin-top:10px;
padding-left: 0px;
}
p {margin: 0px 0px 1em 0px; font-family: Verdana, sans-serif !important}
a, a:link, a:visited {color:ff0000; text-decoration: none;}
a:hover {color:52f6f5; text-decoration: none}
img {border: none}
br {line-height: 10px;}
u {text-decoration: none; }
table table table br { line-height:15px; }
* html table table table.latestBlogEntry br { line-height:0; }
form {border-width:0px;background-color:none;}
input {background-color:transparent !important}
body>div {margin-left: 10px;}
table { border:1px solid red;}
table, tr, td, table table, table table td {border-width:0px; background-color: transparent;}
table table table td {background-color:transparent;margin:0px;padding:0; vertical-align:top ! important;}
* html table table table td {padding: 0 0px 0px 0px;}
table table table table {border-width:0px; background-color: transparent; margin:0px; padding:0px; background-image: none;}
table table table table table{ border-color:ffffff;}
table table table table td {padding:0px 0;margin:0px; }
table table table table table td { padding:0 0px 0 0;}
table table table {
margin:0px;
max-width: 435px;
width: 100% !important;
padding: 0 12px 14px 12px;
}
* html table table table { padding:0;}
body td table, body div table {margin-top: 0;}
font {color:386093;font-size:10px}
a font:hover {color:53f9e1}
a.navbar:link, a.navbar:visited {color:ff0000}
a.navbar:hover {color:53f9e1}
table tr td table tr td font {display: inline;}
table tr td table a.navbar {font-size: 10px;}
.text {color:000000;font-size:11px}
a.text:link, a.text:visited {color:ff0000}
a.text:hover {color:53f9e1}
* html .nametext, * html .whitetext12 { width:298px; }
.NOTES { content:"firefox hack to make tables not to have a huge gap"; }
td.text {text-align:left;}
.r{}
body {
background-color: 000000;
}
table table table {
border-width: 1;
border-style: solid;
border-color: 000000;
background-color: ffffff;
filter: alpha(opacity=90);
-moz-opacity: 0.90;
opacity:0.90;
-khtml-opacity:0.90;
}
table table table table {filter:none !important; opacity:1 !important; }
.r{}
.contactTable {
width: 300px !important;
height: 150px !important;
padding: 0px !important;
background-image:url(http://h1.ripway.com/palefountain/contact.jpg);
background-attachment: scroll;
background-repeat: no-repeat;
}
.contactTable table, table.contactTable td {
padding: 0px !important;
border: 0px;
background-image: none;
}
.contactTable a img {
visibility: hidden;
padding: 2px !important;
}
.contactTable .text {
font-size: 17px !important;
}
.contactTable .text, .contactTable a, .contactTable img {
filter: none !important;
}
.contactTable .whitetext12 {
display: none;
}
.r{}
.r{}
body, table table tr td, table table div, li, p, .redtext, .blacktext10, .text, a.text:link, a.text:visited,
a.searchlinksmall, a.searchlinkSmall:hover, a.searchlinksmall:link, a.searchlinksmall:visited,
.lightbluetext8, a, a:link, a:visited, a.redlink:link, div, font, a.navbar:link, a.navbar:visited
{
color: 000000;
font-size:11;
}
a.searchlinksmall, a.searchlinksmall:link, a.searchlinksmall:visited { font-weight:normal;}
.r{}
.nametext, .whitetext12, .orangetext15, .btext, .redbtext, .blacktext12, table.userProfileURL strong {
margin: 0px 0px 0px 0px;
color: 000000;
font-size:10;
font-family: Trebuchet MS, sans-serif;
font-weight:bold;
}
.whitetext12 { margin-top:0; }
.r{}
span.blacktext12 {
padding-bottom:;
visibility: visible !important;
background-repeat: no-repeat;
font-size: px;
text-transform: uppercase;
letter-spacing: px;
width: ;
height: ;
display: block !important;
background-image:url();
}
.blacktext12 { text-align:center; margin-top:0px;}
.nametext, .whitetext12, .orangetext15, .btext, table.userProfileURL strong {
padding-top: 2;
padding-right:2;
padding-bottom:2;
padding-left:4;
border-style: none;
}
.nametext {
font-size:10;
font-family: Trebuchet MS, sans-serif;
background-color:transparent;
}
.r{}
.lightbluetext8 {
color: 000000;
font-size:10;
font-weight:normal;
}
.r{}
.r{}
a, a:link, a:visited, a.redlink:link, a.redlink:visited, a.navbar:link, a.navbar:visited, a.text:link, a.text:visited, a.text:hover {
color: ff0000;
font-size:10;
font-weight:normal;
text-decoration:none;
}
a.navbar:link, a.navbar:visited, a.text:link, a.text:visited, a.text:hover {
}
a:hover, a.redlink:hover, a.navbar:hover, a.text:hover {
color: 53f9e1;
font-size:10;
font-weight:normal;
text-decoration:underline;
}
a.navbar:hover, a.text:hover {
}
.NOTES { content:'make font smaller for friends comments box';}
a.navbar:link, a.navbar:visited, a.navbar:hover, a.text:link, a.text:visited, a.text:hover { font-weight:normal; font-size:9px;}
*html table table table { height: .01%; }
table, td { padding: 0px; }
table table table { height: .01%; width: 100%; padding: 0px; }
table table table table { padding: 0px; }
table table table table table { padding: 0px;}
table table table table table table { padding: 0px;}
td.text td.text table table table td {padding:0px 6px 0px 6px !important; }
* html .contactTable, *html .userProfileURL {width: 300px !important;}
</style>
If someone can just point me in the right direction, or better yet implement the/a code that will keep the banner where i want it plus having the image maps, i would be over the moon as this little thing is really getting on my nerves !haah! Oh yes, also... Instead of imape mapping I tried to play a sneaky little trick by laying a transparent clickable div layer over the buttons in the image but they change position in every browser and different screen resolutions so no good! Thank you in advance for any advice... Hey guys, please forgive me if this has already been posted but im at a total loss I'm having major issues with getting a background to fit properly around my html page. I wonder if you can help me. the code i have is this style="color: rgb(0, 0, 0); background-color: rgb(255, 255, 255); background-image: url(http://i488.photobucket.com/albums/rr248/kingofkingspoker/borderbg.png);" id="homediv" onload="start();" alink="#000000" link="#000000" vlink="#000000"> I really have no idea how to fit it to the whole screen so it doesn't look like the border around the BG image is cutting half the page up and repeating. If this cannot be corrected is there a code i can add to it to implement a border around the actual web page in full, as if to say i could remove the background image, have it has standard white but use a code to implement a border that would look fine on all computers. Plz Help Hi guys, I created a email template for company usage using html, i put company`s logo in it, it works perfect with outlook and windows live mail, but when i open that email template in browsers, i see .jpg file at the end of the mail message. Is there any way to get rid of this? Thanks. here is a screenshot of my problem: http://img26.imageshack.us/img26/5672/16715830.jpg Hi all, I want to have 2 images as backgrounds but have one on top of the other. Is this possible? If so how would I do it / what is the code? Cheers Raggy Hi, Iv'e been trying to do something for a while. I need to send an image linking to my myspace page using windows hotmail. Iv'e tried searching for html code but can't figure it out. Anyone can help me with this? Cheers Hi Everyone, I am currently creating an email template that is intended for viewing through Outlook 2010 / 2007 & Hotmail / Live Mail (through a Web Browser). So far I have created a design that I am visually pleased with, and it displays fine in Outlook 2010. However when I load it into a browser I see "white space" between tables / rows / cells. I have explictly set the cellpadding & cellspacing both to Zero - however the web browsers (Chrome & IE9) insist on "putting in gaps". If anybody has any suggestions on how I can remove the gaps they will be greatly appreciated. Kind Regards, Davo Dear I made an html newsletter with dreamweaver and I used the swap image behavior. I can view the result perfectly in explorer. Now I mailed it to my own mailbox (via explorer) and in outlook (and also in hotmail) the swap image effect doesn't appear.(the second photo is not shown) Is there a possibility to see this in my mailbox? I tried to paste the code into my outlook, but that doesn't work with the regular outlook, I only can view the source, not edit it. Thank you very much in advance! Kind regards Sandra I have a form on my website and am trying to email the results. All I get is an email with a text attachment... but no content. Someone please debug this. site: http://www.mycollegeninja.com/index-6.html I am using godaddy hosting and their form mailer. Here's the code for the form: HTML Code: <form id="form2" enctype="multipart/form-data" action="_gdForm/webformmailer.asp" method="post">
<div class="wrapper">
<div class="col-1">
<div class="form"><input title="name" name="name" type="text" value="name" /></div>
<div class="form"><input title="e-mail" name="e-mail" type="text" value="e-mail" /></div>
<div class="form"><input title="phone" name="phone" type="text" value="phone" /></div>
<div class="form"><input title="address" name="address" type="text" value="address" /></div>
</div>
<div class="col-2">
<div><textarea name="textarea" cols="20" rows="20">message</textarea></div>
<div class="alignright"><input type="hidden" name="form_order" value="default"/><input type="hidden" name="form_interval" value="default"/> <input type="hidden" name="form_format" value="text"/>
<a href="#" onclick="document.getElementById('form2').reset()">Clear</a> <a href="index-6a.html" onclick="document.getElementById('form2').submit()">Send</a></div>
</div>
</div>
</form>
Hey guys. I need a little help with my HTML image rotator. Everything works fine, except the images don't show up on the right slide. All 4 images show up on the first slide. I can't figure out what's wrong. Any help will be greatly appreciated. Code: <!DOCTYPE html>
<html>
<head>
<title>...</title>
<style>
#sliderwrap {
height: 403px;
}
#sliderleft {
width: 10px;
height: 100%;
float: left;
background: #efefef;
border: 1px solid #ccc;
}
#sliderleft div {
height: 100px;
border-bottom: 1px solid black;
}
#slidercontent {
position: relative;
width: 650px;
height: 100%;
float: left;
border: 1px solid black;
overflow: hidden;
}
#sliderimages {
position: absolute;
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-ms-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
}
#sliderimages img {
display: block;
}
.s0 #slide0,
.s1 #slide1,
.s2 #slide2,
.s3 #slide3 {
background: #ccc;
}
.s0 #sliderimages {top: 0 }
.s1 #sliderimages {top: -500px}
.s2 #sliderimages {top: -1000px}
.s3 #sliderimages {top: -1500px}
</style>
<script>
var slide = 0;
var interval_id = 0;
function stop_timer() {
clearInterval(interval_id);
if (this.getAttribute("data-slide")) {
slide = parseInt(this.getAttribute("data-slide"));
document.getElementById("sliderwrap").className = "s" + slide;
}
}
function start_timer() {
clearInterval(interval_id);
interval_id = setInterval(
function() {
slide = (slide + 1) % 4;
document.getElementById("sliderwrap").className = "s" + slide;
},
3000
);
}
window.onload = function() {
start_timer();
var el = document.getElementById("slidercontent");
var divs = document.getElementById("sliderleft").getElementsByTagName("div");
for (var i = 0; i < divs.length; i++) {
divs[i].onmouseover = stop_timer;
divs[i].onmouseout = start_timer;
}
el.onmouseover = stop_timer;
el.onmouseout = start_timer;
}
</script>
</head>
<body>
<div id="sliderwrap" class="s0">
<div id="sliderleft">
<div id="slide0" data-slide="0"></div>
<div id="slide1" data-slide="1"></div>
<div id="slide2" data-slide="2"></div>
<div id="slide3" data-slide="3"></div>
</div>
<div id="slidercontent">
<div id="sliderimages">
<img src="http://i.imgur.com/8iWz6.jpg">
<img src="http://i.imgur.com/1d2U6.jpg">
<img src="http://i.imgur.com/8iWz6.jpg">
<img src="http://i.imgur.com/1d2U6.jpg">
</div>
</div>
<div style="clear: both;"></div>
</div>
</body>
</html>
My html problem keeps failling, with all my image codes.. shown for 10 errors which are all for the images what's wrong? Here is the code: <!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" /> <!-- New Perspectives on HTML and XHTML 5th Edition Tutorial 2 Case 2 Fiddler Home Page Author: Date: 2-16-2011 Filename: home.htm Supporting files: fiddler.jpg --> <title>, ITSE 1411 Lab Project 2, Tutorial 2 Case 2, Due 02/23/2011</title> </head> <body> <div> <img src="fiddler.jpg" alt="Fiddler on the Roof" /> <hr /> <a href="home2.htm"><img src="home.jpg" alt="home" /></a> <a href="slide1txt.htm"<img src="start.jpg" alt="start" /></a> <a href="slide1txt.htm"<img src="back.jpg" alt="back" /></a> <a href="slide2txt.htm"<img src="forward.jpg" alt="forward" /></a> <a href="slide6txt.htm"<img src="end.jpg" alt="end" /></a> <br /> <a href="slide1txt.htm"<img src="thumb1.jpg" alt="slide1" style="border-width: 5" /></a> <a href="slide2txt.htm"<img src="thumb2.jpg" alt="slide2" style="border-width: 0" /></a> <a href="slide3txt.htm"<img src="thumb3.jpg" alt="slide3" style="border-width: 0" /></a> <a href="slide4txt.htm"<img src="thumb4.jpg" alt="slide4" style="border-width: 0" /></a> <a href="slide5txt.htm"<img src="thumb5.jpg" alt="slide5" style="border-width: 0" /></a> <a href="slide6txt.htm"<img src="thumb6.jpg" alt="slide6" style="border-width: 0" /></a> </div> <hr /> <div> <img src="slide1.jpg" alt="slide1" /> </div> <blockquote> <p><i>Do You Love Me?</i> sung by Deb Ingalls and Thomas Gates</p> </blockquote> </body> </html> Hi... I need to put an alternate image(not text) like 'Image Not Available', if the image is not able to fetch from the database. Is there any method to do this? Thanks in advance. -Swathi Hi, I have a question regarding the code to use to create a horizontal line of small images across the page , from left to right. I want to use them as a horizontal divider between blog posts on our website. The image is a small flower which we use as a logo on our website. This is the image location - http://www.lannacharm.com/files/1/00...ower_small.gif So far I have ended up with a verticle line of images, which is useless, or a block of images which wraps itself around the image above it. That is another problem I am having, how do I place this new line of images below the existing image, or text ? There must be some code I can place between them to separate them. For some reason the line of images insists on going to the right of the existing image. Hope someone can help me with this one. Thank You, Mickmac Ok so this image works on a table i did, and it covers the whole table nicely, but now i need to know how i can put another image that goes behind everything except the table and the table image and wont overlap everything in the table <TABLE BORDER="0" cellpadding="0" CELLSPACING="0"> <TR> <TD MAX-WIDTH="100%" MAX-HEIGHT="100%" BACKGROUND="grey.jpg" VALIGN="bottom"> </td> </tr> </table> Hello everyone! My friends and I are launching a new gaming site. We're using Wordpress to do most of the editing, since none of us are very familiar with web design or coding. I can edit the HTML / CSS of the template we're using; I'm happy with the template overall, but I would like to upload our custom Logo graphic. I've got the graphic saved in the FTP, but when I open up the HTML for the page, I quickly become lost. I'm not sure where I'd put the graphic code or even what the code is. I know this isn't much information, but if anyone could post on here or PM me with what else I should provide to help me do this, I will gladly do so. Again, I'm looking to -Upload a custom header graphic -Figure out the proper code to upload my graphic -figure out where in the HTML to put the code to do so I'll gladly supply any other information necessary to help figure this out. Thanks! Hi there, I am not able to figure out why there are blue lines around my images on this page http://www.surveys.hottestdeals.info. If i want to get rid of them, where should i make the changes in CSS sheets? Thanks for any help. Kris |
|||||||