Need help with your computer or device? Want to learn new tech skills? You're in the right place!
Geeks to Go is a friendly community of tech experts who can solve any problem you have. Just create a free account and post your question. Our volunteers will reply quickly and guide you through the steps. Don't let tech troubles stop you. Join Geeks to Go now and get the support you need!
Im currently working on a newsletter template from mailchimp in dreamweaver,basically editing an existing template and most of it is complete but im having a problem with my background image where it shows fine in dreamweaver.Mailchmp editor and Chrome and IE but in hotmail the bg is replaced by white.please help me fix this as I am on a deadline and need to send it out asap.If possible can I send the code so that You may be able to tell me whats wrong with it?.any help would be appreciated.
Welcome to GeeksToGo Maybe you could post through the code you are having problems with in your next reply and then anyone that has experience with the issue can help out.... When you have posted through your code I will try an assist you where I can
Thank You for the quick reply,please let me know if You can help me in any way possible,Im totally new to web,Im basically a graphic designer and do stuff like posters,flyers etc.so this is completely new to me.thanks and here is the code below-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:v="urn:schemas-microsoft-com:vml">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
background="http://i1101.photobu...ndIslamic.jpg";
background-position: left top;
background-repeat: repeat;
height: 100%;
margin: 0;
padding: 0;
width: 100%;
background-image: url(http://i1101.photobu...oundIslamic.jpg);
}
#emailBody{
-moz-box-shadow:0 0 5px #AAAAAA;
-webkit-box-shadow:0 0 5px #AAAAAA;
background-color:#FFFFFF;
border:1px solid #FFFFFF;
box-shadow:0 0 5px #AAAAAA;
}
#headerImage img{
display:inline;
height:auto;
max-width:600px;
}
/*
@tab Page
@section primary heading style
@tip Primary headings in your message body. Make them big and easy to read.
@theme title
*/
.title{
/*@editable*/color:#FFFFFF;
display:block;
/*@editable*/font-family:Arial;
/*@editable*/font-size:26px;
/*@editable*/font-weight:bold;
text-shadow:1px 1px 1px #11335C;
}
/*
@tab Page
@section secondary heading style
@tip Secondary headings in your message body. Make these smaller than your primary titles, but bigger than your content text.
@theme subtitle
*/
.subTitle{
/*@editable*/color:#FFFFFF;
display:block;
/*@editable*/font-family:Arial;
/*@editable*/font-size:20px;
/*@editable*/font-weight:bold;
text-shadow:1px 1px 1px #11335C;
}
.upperProductImage{
height:auto;
max-width:600px;
}
/*
@tab Upper Product Section
@section upper product heading style
@tip The styling for your email's lower product heading. Make it a color and size that is easy to read.
*/
.upperProductHeading{
/*@editable*/color:#FFFFFF;
/*@editable*/font-family:Arial;
/*@editable*/font-size:26px;
/*@editable*/font-weight:bold;
text-shadow:1px 1px 1px #11335C;
}
.upperProductButton{
-moz-border-radius: 20px;
-moz-box-shadow: 0 10px 15px #FFFFFF inset;
-webkit-border-radius: 20px;
-webkit-box-shadow: 0 10px 15px #FFFFFF inset;
background-color: #CCCCCC;
border: 4px solid #666666;
border-radius: 20px;
box-shadow: 0 10px 15px #FFFFFF inset;
padding: 6px 0;
}
.yellow {
color: #FFF;
}
/*
@tab Upper Product Section
@section upper product button style
@tip The styling for your email's upper product buttons.
*/
.upperProductButton a:link,.upperProductButton a:visited{
/*@editable*/color: #1777FA;
/*@editable*/font-family: Arial;
/*@editable*/font-size: 16px;
/*@editable*/font-weight: bold;
text-decoration: none;
text-shadow: 1px 1px 1px #FFFFFF;
}
/*
@tab Upper Product Section
@section upper product price style
@tip The styling for your email's lower product price text. Make it a color and size that is easy to read.
*/
.upperProductPrice{
/*@editable*/color: #000000;
/*@editable*/font-family: Arial;
/*@editable*/font-size: 12px;
/*@editable*/line-height: 150%;
padding-top: 1px;
padding-bottom: 2px;
padding-left: 7px;
border-top-width: 0px;
border-top-style: none;
}
/*
@tab Upper Product Section
@section upper product text style
@tip The styling for your email's upper product text. Make it a color and size that is easy to read.
*/
.upperProductCopy{
/*@editable*/color: #000000;
/*@editable*/font-family: Arial;
/*@editable*/font-size: 12px;
/*@editable*/line-height: normal;
}
/*
@tab Upper Product Section
@section upper product link style
@tip The styling for your email's upper product cell hyperlinks. Make it a color that stands out from the rest of your text.
*/
.upperProductCopy a:link,.upperProductCopy a:visited{
/*@editable*/color:#FFFFFF;
/*@editable*/font-weight:normal;
/*@editable*/text-decoration:underline;
}
.lowerProductCell{
width:170px;
}
.lowerProductImage{
-moz-box-shadow:0 1px 0 #DEDEDE;
-webkit-box-shadow:0 1px 0 #DEDEDE;
border-right:1px solid #DEDEDE;
border-bottom:1px solid #9B9B9B;
border-left:1px solid #DEDEDE;
box-shadow:0 1px 0 #DEDEDE;
height:auto;
max-width:160px;
padding-top:5px;
padding-right:5px;
padding-bottom:5px;
padding-left:5px;
}
/*
@tab Lower Product Section
@section lower product heading style
@tip The styling for your email's lower product heading. Make it a color and size that is easy to read.
*/
.lowerProductHeading{
/*@editable*/color: #000000;
/*@editable*/font-family: Arial;
/*@editable*/font-size: 14px;
/*@editable*/font-weight: bold;
/*@editable*/line-height: 100%;
padding-bottom: 5px;
}
.lowerProductButton{
text-align: center;
width: 60%;
padding: 5px;
}
.Lowerproductbuttonoriginal{
-moz-border-radius: 10px;
-moz-box-shadow: 0 5px 15px #FFFFFF inset;
-webkit-border-radius: 5px;
-webkit-box-shadow: 0 10px 15px #FFFFFF inset;
background-color: #FEBA13;
/* [disabled]border: 1px solid #BBC5CE; */
/* [disabled]border-radius: 10px; */
/* [disabled]box-shadow: 0 10px 15px #FFFFFF inset; */
/* [disabled]padding: 4px 0; */
text-align: center;
width: 70%;
}
.Boxforvideo {
height: 0px;
width: 0px;
background-color: #DE8811;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
border-top-style: none;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
margin-top: 0px;
margin-right: 5px;
margin-bottom: 5px;
margin-left: 5px;
padding-top: 0px;
padding-right: 5px;
padding-bottom: 5px;
padding-left: 5px;
}
.lowerProductButtonbottom {
text-align: center;
width: 60%;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 20px;
}
.LowerButtonforpricetag {
text-align: center;
width: 60%;
/* [disabled]padding-top: 10px; */
/* [disabled]padding-right: 10px; */
/* [disabled]padding-bottom: 10px; */
/* [disabled]padding-left: 20px; */
}
/*
@tab Lower Product Section
@section lower product button style
@tip The styling for your email's lower product buttons.
*/
.lowerProductButton,.lowerProductButton a:link,.lowerProductButton a:visited{
/*@editable*/color: #2C6EBD;
/*@editable*/font-family: Arial;
/*@editable*/font-size: 11px;
/*@editable*/font-weight: bold;
text-decoration: none;
}
/*
@tab Lower Product Section
@section lower product price style
@tip The styling for your email's lower product price text. Make it a color and size that is easy to read.
*/
.lowerProductPrice{
/*@editable*/color:#45741B;
/*@editable*/font-family:Arial;
/*@editable*/font-size:12px;
/*@editable*/font-weight:normal;
/*@editable*/line-height:125%;
padding-bottom:10px;
}
/*
@tab Lower Product Section
@section lower product text style
@tip The styling for your email's lower product text. Make it a color and size that is easy to read.
*/
.lowerProductCopy{
/*@editable*/color: #FFFFFF;
/*@editable*/font-family: arial;
/*@editable*/font-size: 12px;
/*@editable*/line-height: 125%;
background-color: #474747;
padding: 5px;
}
/*
@tab Lower Product Section
@section lower product link style
@tip The styling for your email's lower product cell hyperlinks. Make it a color that stands out from the rest of your text.
*/
.lowerProductCell a:link,.lowerProductCell a:visited{
/*@editable*/color:#2B2B2B;
/*@editable*/font-weight:normal;
/*@editable*/text-decoration:underline;
}
/*
@tab Footer
@section social bar text style
@tip The styling for your email's social bar text. Make it a color and size that is easy to read.
*/
#social{
/*@editable*/color:#556473;
/*@editable*/font-family:Arial;
/*@editable*/font-size:12px;
/*@editable*/line-height:100%;
}
#social img{
display:inline;
vertical-align:middle;
}
/*
@tab Footer
@section social bar link style
@tip The styling for your email's social bar hyperlinks. Make it a color that stands out from the rest of your text.
*/
#social a:link,#social a:visited{
/*@editable*/color:#153F74;
/*@editable*/font-weight:bold;
/*@editable*/text-decoration:none;
}
/*
@tab Footer
@section footer text style
@tip The styling for your email's footer text. Make it a color and size that is easy to read.
*/
#footer{
/*@tab Footer
@section footer text style
@tip The styling for your email's footer text. Make it a color and size that is easy to read.*/border-top:1px solid #E3E8ED;
/*@editable*/color:#2B2B2B;
/*@editable*/font-family:Arial;
/*@editable*/font-size:11px;
/*@editable*/line-height:150%;
}
/*
@tab Footer
@section footer link style
@tip The styling for your email's footer hyperlinks. Make it a color that stands out from the rest of your text.
*/
#footer a:link,#footer a:visited{
/*@editable*/color:#2B2B2B;
/*@editable*/font-weight:normal;
/*@editable*/text-decoration:underline;
}
</style></head>
<body>
<center>
</td>
<td width="14">
<br>
</td>
<td align="center" valign="middle" width="10"><img src="http://i1101.photobu...splitter-1.jpg" width="10" height="100" /></td>
<td width="14">
<br>
</td>
<td align="left" valign="middle" width="252" class="upperProductCopy">
<br>
<div class="upperProductCopy" style="background-color:#474747;" mc:edit="upper_product_copy">
We teamed up with Shawnimals to make 100 of these cool little plushies. They're laser cut by robots and hand-sewn by humans. Small enough for your desk, but big enough to hug real tight.
</div>
<br>
</td>
<td width="56">
<br>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td align="center" valign="top">
<br>
<div class="lowerProductCopy" mc:edit="lower_product_copy_center">
All you need is quality paper, a razor blade and some tape to assemble an army of monkeys.
<br>
</div>
</td>
<td width="11"><br>
</td>
</tr>
<tr>
<td width="10" height="74">
<br>
</td>
<td align="center" valign="top" width="192"><p><a href="" target="_blank"><a href=" src="http://i1101.photobu...lay_button.png" alt="firstvid" width="67" height="65" /></a></p>
Hey again Just for future reference make sure to encase your code with code tags like this: (Using [code ][/ code] without spaces)
[code]int test[/code]
As for your code, I have a better idea of what you are trying to do now. But I don't quite understand your problem? You have made a page that can be displayed from a browser and you have mentioned how it already works in Chrome and IE. But you have said it doesn't work in Hotmail? I'm not quite sure what you are trying to do? ... If you could please better explain your situation with bg being white? and maybe please send me a screenshot of what it looks like, the picture will be quite descriptive as-well.
Sorry I didn't mentioning explaining the situation more clearly above, I thought maybe by your code I would understand exactly what it is you would like to do.
Hi,sorry I wasnt more descriptive.but basically its a newsletter that goes out to customers whove purchased products,and when I open the newsletter in mailchimp or any browser directly the background shows normally,the grey one,but in the hotmail(of the user whos going to view the newsletter) it comes white,the background is removed.I basically need it to show in hotmail and other email applications,thts my only issue.
Sign In
Create Account
