CSS issue in php and HTML email

Question

Albert Pinto 0 Newbie Poster

12 Years Ago

Hi People,

Got an issue with css in php.

Actually I'm trying to create and send a html email.

My front-end form consists of To(textbox where recipients email address will be entered) and then I've embedded ckeditor in place of Textarea where I will be typing the message... Now this ckeditor being a rich text editor has got all the features of aligning text towards left, or center, or right, coloring the text...etc..

Now when I hit submit button, this typed text within the editor gets converted into html code and gets collected in a variable $message in my back end php file.

so its like

$message= $_POST['message'];

and then I've created a table layout...

so its like..

$messages = "
<html>
<body>
<p><strong>Recent Updates</strong></p>
<p></p>

<table border='0' style='border-collapse: collapse' width='700px'>

<tr height='40px'>
<td bgcolor='#444A48' border='none' width='55%'>
<h3 style='text-align:right; font-family: Comic Sans MS; color: #fff; padding-top:5px;'>Updates</h3>
</td>
<td bgcolor='#444A48'>

</td>
</tr>


<tr>
<td bgcolor='#000' height='50px' border='none' colspan='2'>
</td>
</tr>

<tr height='300px' style='border:1px solid #000;'>
<td colspan='2' style='padding: 5px;' valign='top'>

<p style='color:#000; font-size: 12px; font-family: Arial;'>




".$message."




</p>

</td>
</tr>

<tr border='1'>
<td style='text-align: center;' bgcolor='#000' colspan='2' height='50px'>

</td>
</tr>
</table>

</body>
</html>
";

$headers  = 'MIME-Version: 1.0' . "\r\n";

$headers .= 'Content-type: text/html; charset=iso-8859-1' . "\r\n";
$headers .="From: albert@rediffmail.com";
$sent=mail($to,$subject,$messages,$headers);

}

Noticed that $message between this html layout..?

That contains the text typed in the Rich text editor... I mean that will contain the dynamically generated html content with css code..

Problem is that the inline css code generated by the editor is not getting applied...and in the inbox I receive mail with just plain content... I mean no color, and its default font-family... I know something is going on with single and double quotes, just don't know how to tackle it.. I've tried escape sequences, heredoc, htmlspecialchars_decode.... But all in vain..

Sorry for the lengthy post, and thanks all for your time and consideration.

email html-css php

4 Contributors
10 Replies
3K Views
4 Days Discussion Span
Latest Post 12 Years Ago Latest Post by jstfsklh211

iamthwee

12 Years Ago

css don't work on email clients...

diafol

12 Years Ago

WHen you say you're using inline css, you mean inline styling? Also you're 'hard-coding [styling] into the table'? Are you? You seem to be using html attributes like bgcolor, border, height, width. This is not the same as inline styling - well not the way I'm thinking about it anyway.

The html attributes SHOULD work. Inline styling rules, probably won't.

Edited 12 Years Ago by diafol

jstfsklh211 79 Light Poster

12 Years Ago

Im sure someone will scream at me for this but im a fan of using OB

so for example

<?php
$message = $_POST["your_var"];
ob_start();
?>
<html><head>
    <title>HTML Email</title>
</head><body>
    <?php print $message; ?>
</body></html>
<?php
$email = ob_get_contents();
ob_end_clean();

// To send HTML mail, the Content-type header must be set
$headers  = 'MIME-Version: 1.0' . "\r\n";
$headers .= 'Content-type: text/html; charset=utf-8' . "\r\n";
$headers .="From: your@email.com";
$sent=mail($to,$subject,$email,$headers);
?>

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

Albert Pinto 0 Newbie Poster · Answer 1 · 2012-09-06T11:56:37+00:00

Thanx for the reply sir, actually my table layout does work, with all the colors and alignment...

Problem is the message generated by the ck-editor.. I mean say in this editor I type the word "Hello World" and then I align it towards right... apply red color to it..

The dynamic text generated will be..

<p style="text-align: right"> 
 <span style="color:#ff0000;">Hello World</span></p>

This code will be collected in $message.

Problem is that style (color: #ff0000;) or (text-align: right) is not getting applied.

I mean what i receive is plain text Hello World in default font.

My external table layout is fine, because I've hard-coded the css in it...

Problem is with double quotes...

say...

$message=$_POST['message'];

It works if i paste that generated code wrapping it within single quotes... like for e.g.

 $messages= '
 <p style="text-align: right"> 
 <span style="color:#ff0000;">Hello World</span></p>
  ';

but then I can't paste it this way, because this code depends upon what I prefer to select, now its text-align is right, it may be left or center... color may be different.

I can't put $messages='$message';

Because then it will consider it as a string and instead of the actual content I will receive the text $message in my mail.

Albert Pinto 0 Newbie Poster · Answer 2 · 2012-09-06T11:57:36+00:00

Is all inline css, I'm not embedding any external css file...

Albert Pinto 0 Newbie Poster · Answer 3 · 2012-09-10T06:35:51+00:00

FRONT END FORM IS LIKE THIS:

<form action="sendmailsub.php" method="post" name="sendsubscription" id="sendsubscription">

<label>Subject</label><input type="text" name="subj" size="60">

<label>Message</label> <textarea name="message" id="message">
</textarea>

<?php
// Include the CKEditor class.
include_once "ckeditor/ckeditor.php";

// Create a class instance.
$CKEditor = new CKEditor();

// Path to the CKEditor directory.
$CKEditor->basePath = '/ckeditor/';
?>

<?php
// Replace a textarea element with an id (or name) of "textarea_id".
$CKEditor->replace("message");
?>

<input type="submit" value="Send Mail" name="submit" class="submitbtn">

</form>

Albert Pinto 0 Newbie Poster · Answer 4 · 2012-09-10T06:38:06+00:00

BACKEND SCRIPT IS:

<?php
include('config.php');

$message= $_REQUEST['message'];
$subj= $_POST['subj'];

{
$to = "albert@yahoo.co.in";
$subject= $subj;
$messages = "<html>
<head>
<title>
HTML Mail
</title>
</head>
<body>
<table style='border-collapse: collapse; font-family:Arial;' width='700px' border='1'>
<tr>
<td bgcolor='#000' height='200px' style='text-align:center; border:none;' width='400' border='0'>
<p style='color:#fff;'><i>Experiential Travel</i></p>
</td>
<td bgcolor='#000' style='border:none;'>
<img src=\"http://abcxyz.in/images/heads.png\">
</td>
</tr>

<tr>
<td colspan='2' height='350px' bgcolor='#fff' style='text-align:left;'>
<p style='text-align:left;'>
".$message."
</p>
</td>
</tr>

<tr>
<td colspan='2' width='700px' height='50px' bgcolor='#000'>
</td>
</tr>

</table>
</body>
</html>
";

// To send HTML mail, the Content-type header must be set
$headers  = 'MIME-Version: 1.0' . "\r\n";
$headers .= 'Content-type: text/html; charset=iso-8859-1' . "\r\n";
$headers .="From: albert1986@rediffmail.com";
$sent=mail($to,$subject,$messages,$headers);
}

?>

Albert Pinto 0 Newbie Poster · Answer 5 · 2012-09-10T06:39:12+00:00

PROBLEM IS:

the $message part...

$message contains the text which was typed in the text area in the front-end form... This text can be aligned to left, center, right,... color can be changed... and after clicking Submit.. The ckeditor generates the code with css along with the typed content...

I've put $message inside the html code(the basic table layout of the html email which the user will receive...) because I want the content to be displayed in properly inside that table layout....

Now, thing is that, the css code generated by the ck editor is getting ignored.. Hence the text is neither aligned nor colored...

I tried to see the css generated code... its like, say if I type "Hello World" in my text area and align it to right and make its background red... the css code which gets generated is

<p style="text-align: right;">
<span style="background-color:#ff0000;">Hello World</span></p>

This... style="text-align: right;" or style="background-color:#ff0000;" is getting ignored...

The above code will be stored in $message...

If I put single quotes... like....

'<p style="text-align: right;"><span style="background-color:#ff0000;">Hello World</span></p>'

Then it does work... But the above style and the content will be dynamic, I mean its red now, the user may want it blue, also it won't be Hello World all the time..
So I need to use $message over there..... now if i put single quotes accross $message... it treats it as a string.. and I receive $message as a text in my inbox rather than the actual content....

Albert Pinto 0 Newbie Poster · Answer 6 · 2012-09-10T12:29:06+00:00

Got it...... this code worked......

<?php

$message= $_REQUEST['message'];

$message=stripslashes(ereg_replace("'","&#34;",$message));  

$subj= $_POST['subj'];

$to = "albert@yahoo.co.in";

$subject= $subj;

$messages = '<html>
<head>
<title>
HTML Mail
</title>
</head>
<body>
<table style="border-collapse: collapse; font-family:Arial;" width="700px" border="1">

<tr>
<td bgcolor="#000" height="200px" style="text-align:center; border:none;" width="400" border="0">
<h1 style="font-family:Calibri, Arial; color: #fff;">Jaunty Roads</h1>
<p style="color:#fff;"><i>Personalised Experiential Travel</i></p>
</td>
<td bgcolor="#000" style="border:none;">
<img src="http://abcxyz.in/images/heads.png">
</td>

</tr>

<tr>
<td colspan="2" height="350px" bgcolor="#fff" style="text-align:left;" valign="top">
<p style="text-align:left;">
'.$message.'
</p>
</td>
</tr>

<tr>
<td colspan="2" width="700px" height="50px" bgcolor="#000">

</td>
</tr>

</table>
</body>
</html>
';


// To send HTML mail, the Content-type header must be set
$headers  = 'MIME-Version: 1.0' . "\r\n";
$headers .= 'Content-type: text/html; charset=utf-8' . "\r\n";
$headers .="From: albert1986@rediffmail.com";
$sent=mail($to,$subject,$messages,$headers);

?>

Albert Pinto 0 Newbie Poster · Answer 7 · 2012-09-10T12:30:17+00:00

This line did the trick...

$message=stripslashes(ereg_replace("'",""",$message));

Thanx all....

Regards