Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New Coder
    Join Date
    Feb 2012
    Posts
    26
    Thanks
    2
    Thanked 0 Times in 0 Posts

    got to be something simple!!!!

    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
    Last edited by Burfodus; 04-03-2012 at 02:03 PM.

  • #2
    Banned
    Join Date
    Mar 2012
    Posts
    306
    Thanks
    1
    Thanked 28 Times in 28 Posts
    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.

  • #3
    New Coder
    Join Date
    Feb 2012
    Posts
    26
    Thanks
    2
    Thanked 0 Times in 0 Posts
    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..

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,747
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    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.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    Burfodus (04-04-2012)

  • #5
    New Coder
    Join Date
    Feb 2012
    Posts
    26
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Hey Hey, that seems to have fixed it.

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

    awesome
    steve.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •