got to be something simple!!!!

Burfodus · 04-03-2012, 01:01 PM

Hi guys,
im working on a simple page to be sent via email, but it doesnt seem to work in live view or the browser, it all seems pretty straight forward to me, it just doesnt work.

in the normal preview in dreamweaver it works fine, click live view or preview in browser, and i only get half the style and no pictures (using local or online links)

here is the code

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" />
<title>Untitled Document</title>
<!-- <link type="text/css" rel="stylesheet" href="style.css" /> -->
<style type="text/css">
BODY {
background-image:url('http://www.zakscustomcues.com/modules/zakscustom/images/email/bg.jpg');
background-color:#3B3330;
background:repeat-x;
margin:0px;
padding:0px;
}

#header {
background-image:url('http://www.zakscustomcues.com/modules/zakscustom/images/email/header.jpg');
background:no-repeat;
height:153px;
width:944px;
border-bottom:1px solid #9b927e;
}

#content {
	
font:Arial; 
color:#99907c; 
padding:20px 0px 0px 60px; 
max-width:700px;
}

h2 {
color:#FAFAF5;
}
PRE {
font:Arial;
font-size:18px;
color:#99907c;
}

.details {
style="color:#c6a15f;
}
</style>
</head>

<body>
    <div id="header">
    </div>
    <div id="content" >
    
        <h2>Hello and thank you for sending an enquiry through Zaks Custom Cues.</h2> 
        <pre>
        Your enquiry has been sent to Zak and he will respond to you as soon as possible.
         
        Your enquiry details are as follows:</pre>
            <table width="400px" border="0" class="details" cellpadding="0" style="color:#c6a15f;">
                <tr>
                    <td>Name</td>
                    <td width="40px">:</td>
                    <td>$name</td>
                </tr>
                <tr>
                    <td>Email</td>
                    <td>:</td>
                    <td>$fromemail</td>
                </tr>
                <tr>
                    <td>Phone</td>
                    <td>:</td>
                    <td>$phone</td>
                </tr>
                <tr>
                    <td>ip</td>
                    <td>:</td>
                    <td>$ip</td>
                </tr>
            </table>
        <pre>
        Enquiry --
        <div class="details">
        $enquiry
        </div>
        Thank you for visiting Zaks Custom Cues.
         
        Regards
        Zak
        </pre>
    </div>
</body>
</html>

thanks
steve

Mishu · 04-03-2012, 01:06 PM

With html emails unfortunately you have to think way retro with your layout and styling. CSS support in email clients is generally fairly limited.

Basically you will need to use tables for layout or very simple and basic non table layouts. Certainly no css positioning. Also styles will need to be inline and not in separate style elements.

Burfodus · 04-03-2012, 01:11 PM

yeah, ok, ill keep that in mind for the email. however this still isnt working as a simple webpage!

im getting similar results when sent through via email, but if i cant get it to work as straight html, i cant fix the real probs with the email.

sb..

Excavator · 04-03-2012, 04:24 PM

Hello Burfodus,

I'm not sure why you're using the pre tags and your div.details cannot be enclosed in <pre>

The main issue with your images is you seem to be mixing regularly styled background properties with shorthand.

Here are two correct ways of doing it that you can compare to yours.
One -

Code:

BODY {
background-image:url('http://www.zakscustomcues.com/modules/zakscustom/images/email/bg.jpg');
background-color:#3B3330;
background-repeat:repeat-x;
margin:0px;
padding:0px;
}

#header {
background-image:url('http://www.zakscustomcues.com/modules/zakscustom/images/email/header.jpg');
background-repeat:no-repeat;
height:153px;
width:944px;
border-bottom:1px solid #9b927e;
}

Two -

Code:

html, body {
	margin: 0;
	padding: 0;
}
body {
	background-image: url('http://www.zakscustomcues.com/modules/zakscustom/images/email/bg.jpg');
	background-repeat: repeat-x;
	background-color: #3b3330;
}
#header {
	height: 153px;
	width: 944px;
	background: url('http://www.zakscustomcues.com/modules/zakscustom/images/email/header.jpg');
	border-bottom: 1px solid #9b927e;
}
#content {	
	font: 18px Arial;
	color: #99907c; 
	padding: 20px 0px 0px 60px; 
	max-width: 700px;
}
h2 {color:#FAFAF5;}
PRE {color: #99907c;}
.details {color: #c6a15f;}

And I still suggest styling your text with normal text styling and not pre tags.

Burfodus · 04-04-2012, 02:43 PM

Hey Hey, that seems to have fixed it.

thanks also for the other advice, ill try and fix those elements too.

awesome
steve.