I'm using itext7.pdfHtml adds-on to convert my html template to PDF doc and everything is ok and result produce without any error but my is that there were a bunch of CSS properties that not recognizable with pdfhtml dll.
some of these properties are show at this snippet:
.day-meta-wrapper {
font-size: 15px;
line-height: normal;
height: 24px;
border-radius: 12px;
color: #ffffff;
background: #00000033;----> not support
padding: 0 6px;
display: flex;----> not support
align-items: center;----> not support
justify-content: center;----> not support
}
this my html file result:
as you can see in browser view there's no problem and all of the properties work properly
but this is my PDF result:
as shown in the picture PDF doc loosed CSS properties
h1 {
background-color: red;
}
.day-meta {
margin: 5px 0;
user-select: none;
display: flex;
align-items: center;
justify-content: center;
}
.day-meta-wrapper {
font-size: 15px;
line-height: normal;
height: 24px;
border-radius: 12px;
color: #ffffff;
background-color: #00000033;
padding: 0 6px;
display: flex;
align-items: center;
justify-content: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css/DayMeta.css">
</head>
<body style="background: #979797;">
<h1>Hello IText7 PDFHtml</h1>
<div class="day-meta">
<div class="day-meta-wrapper">
<div>December 11, 2018</div>
</div>
</div>
</body>
</html>
Related
If you take a look at my simple site, it works great in browser, but on an iphone the site loses the bottom ribbon in landscape orientation.
Why is it not correctly adjusting the height of the page when in landscape?
http://mtindustrialservicerequest.com/KenHolidayCard/holidayCardDemo/EmployeeCard2.html
HTML:
<!DOCTYPE html>
<html lang="en">
<HEAD>
<meta charset="utf-8">
</HEAD>
<BODY style="text-align: center; background-color:#e4e4e4; background-image:url(snowflakeBackground500x500.png); margin:0; padding:0;">
<div style="position: absolute; height: 100%; width: 100%; background-image:url(ribbon_Bottom2.png); background-repeat: repeat-y; background-position: center center;">
<div style="position: relative; width: 100%; height:325px; overflow: visible; top: 50%; margin-top: -170px; background-image:url(ribbon_Horizontal2.png); background-position: center center;">
<iframe width="650" height="325" src="http://www.youtube.com/embed/bFs89lAL7dE?&autoplay=1&rel=0&fs=0&theme=light&showinfo=0&controls=0&autohide=1&color=white" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</BODY>
</HTML>
It's not actually disappearing altogether. After rotating from portrait to landscape, I hit refresh. It was visible (well about 8 pixels of it).
I would add min-height:320px to your CSS for the vertical ribbon. 320 or another value you can work with.
I solved it by stacking three divs on top of each other -- top and bottom ribbon with video and horizontal ribbon in the middle. Top and bottom heights at 50% with bottom/top margins to compensate for the 325px video in the middle. See below.
<BODY style="text-align: center; background-color:#e4e4e4; background-image:url(snowflakeBackground500x500.png); margin:0; padding:0;">
<div id="div1" style="position: absolute; height: 100%; width: 100%;">
<div id="div2" style="position: relative; height: 50%; width: 100%; margin-bottom:-170px; background-image:url(ribbon_Bottom2.png); background-repeat: repeat-y; background-position: center center;"></div>
<div style="position: relative; width: 100%; height:325px; overflow: visible; background-image:url(ribbon_Horizontal2.png); background-position: center center;">
<iframe class="shadow" width="650" height="325" src="http://www.youtube.com/embed/bFs89lAL7dE?&autoplay=1&rel=0&fs=0&theme=light&showinfo=0&controls=0&autohide=1&color=white" frameborder="0" allowfullscreen></iframe>
</div>
<div id="div3" style="position: relative; height: 50%; width: 100%; margin-bottom: 170px; background-image:url(ribbon_Bottom2.png); background-repeat: repeat-y; background-position: center center;"></div>
</div>
</BODY>
</HTML>
blog: http://mattdomchristom.tumblr.com
As you can see, when you scroll down, the navigation bar at the top follows and it's annoying. How can I just make it stay at the top of the page?
This is my HTML:
<head>
<!--Default Variables-->
<!--Colors-->
<meta name="color:Background" content="#000"/>
<meta name="color:Text" content="#fff"/>
<meta name="color:Post Title" content="#1C1C1C"/>
<meta name="color:Link" content="#8B7D7B"/>
<meta name="color:Link Hover" content="#d8d8d8"/>
<meta name="color:Blog Title" content="#8b0000"/>
<meta name="color:Links Text" content="#e7e7e7"/>
<meta name="color:Links Hover" content="#fff"/>
<meta name="color:Ask Background" content="#838b8b"/>
<!--Images-->
<meta name="image:Background" content""/>
<meta name="image:Sidebar" content=""/>
<!--Options-->
<meta name="if:Infinite Scrolling" content=""/>
<meta name="if:Pagination" content=""/>
<meta name="if:Glitterati Cursor" content=""/>
<meta name="if:Tiny Scrollbar" content=""/>
<meta name="if:Box shadows" content=""/>
<meta name="if:Ask" content=""/>
<meta name="if:Archive" content=""/>
<meta name= "if:Link 1" content="link1"/>
<meta name= "if:Link 2" content="link2"/>
<meta name= "if:Link 3" content="link3"/>
<meta name= "if:Link 4" content="link4"/>
<!--Links-->
<meta name="text:Link 1 URL" content=""/>
<meta name="text:Link 1 name" content=""/>
<meta name="text:Link 2 URL" content=""/>
<meta name="text:Link 2 name" content=""/>
<meta name="text:Link 3 URL" content=""/>
<meta name="text:Link 3 name" content=""/>
<meta name="text:Link 4 URL" content=""/>
<meta name="text:Link 4 name" content=""/>
{block:Description}
<meta name="description" content="{MetaDescription}" />{/block:Description}
<title>
{block:PostSummary}
{PostSummary} - {/block:PostSummary}{Title}</title>
{block:ifinfinitescrolling}<script type="text/javascript" src="http://codysherman.com/tools/infinite-scrolling/code"></script>{/block:ifinfinitescrolling}
</style>
<style type="text/css">
{block:ifGlitteraticursor}
body, a, a:hover {cursor: url(http://media.tumblr.com/tumblr_m10gu8MJ7Z1r869vr.gif), progress;}{/block:ifGlitteraticursor}
{block:iftinyscrollbar}
::-webkit-scrollbar {width: 8px; height: 9px; background :#fff; }
::-webkit-scrollbar-thumb { background-color: #000000; -webkit-border-radius: 0ex; border: 0px #D4D8DB;}
{/block:iftinyscrollbar}
body{
background-color: {color:Background};
background-image: url({image:Background});
background-attachment: fixed;
background-repeat: repeat;
background-position: center;
font-family: helvetica;
font-size: 14px;
line-height: 14px;
letter -spacing:0px;
color:{color:Text};
text-align:justify;
}
a:link, a:active, a:visited{
color: {color:Link};
text-decoration:none;
}
a:hover{
color: {color:Link Hover};
text-decoration:underline;
}
#container {
margin:auto;
position:right;
width:1200px;
color: {color:Title};
_margin-left:10%;
}
#content {
float:center;
width:508px;
padding: 2px;
margin-top: 25px;
margin-left: 300px;
background: clear;
}
#entry {
margin-top:15px;
padding:3px;
background-image: url(http://static.tumblr.com/j4dtzbm/Amxlg5cp4/transparentg.png);
{block:ifboxshadows};
box-shadow: 0px 5px 20px rgba(0,0,0,0.35);
{/block:ifboxshadows}
{block:ifboxborders}
border: 1px solid black;
{/block:ifboxborders}
}
#entry img{
{block:IndexPage}max-width:500px;{/block:IndexPage}
}
#side {
position:fixed !important;
width: 220px;
height: auto;
margin-top: 40px;
margin-left: 500px ;
padding: 2px ;
font-size: 13px;
text-transform: lowercase;
background-image: url(http://static.tumblr.com/j4dtzbm/Amxlg5cp4/transparentg.png);
{block:ifboxshadows};
box-shadow: 0px 5px 20px rgba(0,0,0,0.35);
{/block:ifboxshadows}
}
#side2 {
position:fixed !important;
width: 753px;
height: 30px;
text-transform: uppercase;
font-size: 13px;
background-color:black;
opacity: .8;
margin-top: -20px;
margin-left: -30px ;
padding: 2px ;
}
.navigate a{
color: {color:Links Text};
display:block;
width: 85px;
height: 15px;
text-align: center;
padding-top: 3px;
padding-left: 3px;
margin-left: 0px;
margin-top: 2px;
position: relative;
text-align: center;
z-index: 999;
font-family: helvetica;
font-size: 14px;
display: inline-block;
}
.navigate a:hover{
color: {color:Links Hover};
text-decoration: none;
}
.permalink{
display: block;
padding:1px;
margin-top:0px;
margin-bottom:4px;
font-size: 11px;
text-align: center;
text-transform: uppercase;
}
.blogtitle{
text-transform: uppercase;
font-size: 22px;
line-height: 22px;
color: {color:Blog Title};
}
.posttitle{
font-size: 17px;
line-height: 12px;
text-transform: uppercase;
color: {color:Post Title};
letter-spacing: 1;
font-weight: none;
}
blockquote{
padding:0px 0px 2px 5px;
margin:0px 0px 2px 1px;
border-left: 1px solid {color:Text};}
blockquote p, ul{margin:0px; padding:0px;
}
.chat .line{
margin: 0 0 0px;
padding: 2px;
}
.chat .line.odd{
}
.label {font-weight:bold; color:{color:text}}
.question {
color:{color:Text};
font-size: 10px;
font-weight: normal;
line-height:95%;
background: {color:Ask Background};
margin: 0 0 10px 0;
padding: 10px 15px;
position: relative;
-moz-border-radius:5px; -webkit-border-radius:5px;
}
.questionarrow {
width: 13px;
height: 7px;
font-size:30px;
position: absolute;
color:{color:Ask Background};
bottom: -3.5px;
left: 260px;
}
.asker {width:500px; text-align:left; color:{color:Text};font-family: silkscreen;font-size: 9px;}
.asker a {color:{color:Text};}
.asker img {float:left; margin-left:220px; vertical-align:top; margin-right:3px; max-height:15px;}
a img{border: 0px;}
.p { padding-top: 5px; }
.ol, ul { margin-left: 10px; padding: 5px; }
.ul { list-style-type: square; }
.albumart { margin-bottom: 0px; }
.albumart img, .audio embed { width: 60px; }
.video embed, .post div.video object {width:250px !important; height:187px !important;}
.notes img{width:10px; position:left; top:3px;}
.tags {
width:auto;
solid {color:Links};
font-size: 10px;
text-transform:uppercase;
color:{color:link};
padding:2px;
line-height:1;
margin-left:1px;
}
.tags a:hover{
color: {color:Link Hover};
text-decoration:underline;
}
#pages {
float: center;
width: 753px;
height: 22px;
text-transform: uppercase;
font-size: 14px;
color: {color:Link};
background-color: white;
opacity: .6;
margin-top: 10px;
margin-left: 300px ;
padding: 2px;
padding-top: 6px;
}
{font-size: 100%;}
{CustomCSS}
</style>
<link rel="shortcut icon" href="{Favicon}">
<link rel="alternate" type="application/rss+xml" title="{Title}" href="{RSS}" />
{block:ifinfinitescrolling}<style>#toTop {display:none;text-decoration:none;position:fixed;bottom:20px;right:20px;overflow:hidden;width:30px;height:40px;border:none;text-indent:-999px;background:url(http://static.tumblr.com/hi8vwsz/Q0ull6xz3/totop.png) no-repeat left top;z-index:3000;}#toTopHover {background:url(http://static.tumblr.com/hi8vwsz/Q0ull6xz3/totop.png) no-repeat left -40px;
width:30px;height:40px;display:block;overflow:hidden;float:left;opacity: 0;-moz-opacity: 0;filter:alpha(opacity=0);}
#toTop:active, #toTop:focus {outline:none;}#toTop:active, #toTop:focus {outline:none;}</style>
<script type="text/javascript" src="http://static.tumblr.com/53unaru/kx3lgzker/jquery-1.3.2.min.js" charset="utf-8"></script>
<script type="text/javascript" src="http://static.tumblr.com/53unaru/4jtlgzkf8/easing.js"></script>
<script type="text/javascript" src="http://static.tumblr.com/53unaru/y8wlgzkbt/jquery.ui.totop.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$().UItoTop({ easingType: 'easeOutQuart' });
});
</script>{/block:ifinfinitescrolling}
</head>
<body>
<div id="container">
<div id="content">
<div id="side2">
<div class="navigate">
<a href="/" >home</a>
{block:ifAsk}
<a href="/ask" >message</a>
{/block:ifAsk}
{block:iflink1}
{text:Link 1 name}
{/block:iflink1}
{block:iflink2}
{text:Link 2 name}
{/block:iflink2}
{block:iflink3}
{text:Link 3 name}
{/block:iflink3}
{block:iflink4}
{text:Link 4 name}
{/block:iflink4}
<a href="/archive" >archive</a>
<a href="http://sociallyawkwardgiraffe.tumblr.com/" >Theme</a>
</div>
</div>
</center>
<div id="side">
<center>
<div class="blogtitle">{Title}</div>
</center>
<br>
<img src="{image:sidebar}" width=220px>
{Description}
</div>
</div>
</div>
<div id="content">
{block:Posts}
<div id="entry">
<center>
{block:IndexPage}
<div class="permalink" style="letter-spacing:1px;"><l> {Month} {DayOfMonth}, {Year} • {NoteCountWithLabel} • Reblog</l>
</div>
{/block:IndexPage}
</center>
{block:Text}
{block:Title}<span class="posttitle">{Title}</span>
{/block:Title}<span class="entrytext">{Body}</span>
{/block:text}
{block:Link}
{Name}{block:Description}{Description}{/block:Description}
{/block:link}
{block:Photo}
{LinkOpenTag}
<a href="{permalink}"><img src="{PhotoURL-500}" alt="{PhotoAlt}" width=500px
{LinkCloseTag}
{block:Caption}{Caption}{/block:Caption}
{/block:Photo}
{block:Photoset}<center>{Photoset-500}</center>
{block:Caption}{Caption}{/block:Caption}
{/block:Photoset}
{block:Quote}
<span class="title">{Quote}</span>
{block:Source}<i> - {Source}</i>{/block:Source}<br>
{block:Caption}{Caption}{/block:Caption}
{/block:Quote}
{block:Chat}
{block:title}<div id="posttitle"><center>{Title}<br></center></div>
{/block:title}<div class="chat">
{block:Lines}<div class="chat"><div class="line {Alt}"><div class="{Alt} user_{UserNumber}">
{block:Label}<span class="label"><b>{Label}</b></span>
{/block:Label}{Line}</div>
</div></div>{/block:Lines}</div>{/block:Chat}
{block:Audio}
{block:albumart}<div class="albumart"><img src="{albumarturl}" align="left"></div>
{/block:albumart}<div style="width: 310px; height: 20px;">
{AudioPlayerblack}</div><BR>{block:TrackName}<span><strong>Title</strong>:
{TrackName}</span>{/block:TrackName}<br>
{block:Artist}<span><strong>Artist:</strong>
{Artist}</span>{/block:Artist}<br>
{/block:Audio}
{block:Video}<center>{Video-500}<BR>
</center>{block:Caption}{Caption}{/block:Caption}{/block:Video}
{block:Answer}
<div class="question">
<div class="questionarrow">▼</div>
{Question}
</div>
<div class="asker"><img src="{AskerPortraitURL-24}">{Asker}</div>
<div class="answer">{Answer}</div>
{/block:answer}
{block:HasTags}<div class="tags"> tags: {block:Tags}#{Tag} {/block:Tags}</div>{/block:HasTags}
</center>
{block:PostNotes}{PostNotes}
{/block:PostNotes}</div>{/block:Posts}
</center>
</div>
<div id="pages">
{block:ifpagination}
<center>
{block:PreviousPage}←{/block:PreviousPage} {CurrentPage} of {TotalPages} {block:NextPage}→
{/block:NextPage}
{/block:ifpagination}
<center>
</center>
</div>
</div></div>
</div>
</body>
</html>
In the Custom CSS box in your customization screen, enter the following:
#side2 {
position: relative!important;
}
Is it possible to update the Facebook iframe height?
Here's the scenario. I have a Facebook app with PHP pages inside, but when I click the menu, it gets the previous iframe height and it doesn't automatically adjust the iframe height of the current content.
<link rel="stylesheet" href="" type="text/css" >
<style>
.nav li {
background-color: #fff;
font-family: Century Gothic;
list-style: none outside none;
margin-bottom: 1px;
padding-bottom: 5px;
padding-left: 10px;
padding-top: 5px;
font-size:9pt;
border-left:6px solid #7b7b7b;
color:#7c7c7c;
}
li a {
text-decoration: none;
color: inherit;
}
.title {
margin:0px;
}
.navigation ul {
padding:0px;
margin:0px;
}
.logo {
margin-bottom: 10px;
padding-left: 10px;
}
.sidebar {
width:177px;
float:left;
margin-right:10px;
}
.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active {
background-color: #515151;
font-family: Century Gothic;
list-style: none outside none;
margin-bottom: 1px;
padding-bottom: 5px;
padding-left: 10px;
padding-top: 5px;
font-size:9pt;
border-left:6px solid #FAB101;
color:#fff;
}
.titlewrapper {
background-color: #FEFEFE;
border: 1px solid #B6CADC;
color: #BFBFBF;
font-size: 28pt;
margin-bottom: 5px;
padding: 5px 10px;
width: 768px;
}
</style>
<div id="fb-root"></div>
<script type="text/javascript">
window.fbAsyncInit = function(){
FB.init({appId: 'APPID', status: true, cookie: true, xfbml: true});
FB.Canvas.setSize();
};
(function() {
var e = document.createElement('script'); e.async = true;
e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js'; // all.js
document.getElementById('fb-root').appendChild(e);
setTimeout(sizeChangeCallback,5000);
}());
// Do things that will sometimes call sizeChangeCallback()
function sizeChangeCallback() {
FB.Canvas.setSize();
}
</script>
</head>
<body style="background-color:#e4e4e4;">
<div class="clearfix" style="width:1007px;margin:auto;">
<div id="tabs">
<div class="sidebar">
<div class="logo">
<img src="../images/gotodo_direct_logo.png">
</div>
<div class="navigation">
<ul class="nav">
<li id="tabs"><h3 class="title">Hotel Demo</h3><i>Indvidual hotel booking</i></li>
<li id="tabs"><h3 class="title">All Hotel List Demo</h3><i>all occupancy plus hotel partner</i></li>
<li id="tabs"><h3 class="title">Instruction</h3><i>how to install this app?</i></li>
<li id="tabs"><h3 class="title">Faq</h3> <i>frequently ask question</i></li>
</ul>
</div>
</div>
<div class="main-content" style="float:left;width:790px;height:1000px;">
<div id="tabs-1">
<div class="titlewrapper" style="float:left;"><div style="float:left"><img src="images/hotel.png" style="margin-right: 10px; vertical-align: middle;"></div><div style="float:left;width:700px;">Hotel Demo<br /><i style="font-size:10pt;">let's take a look a quick demo at how hotel app look like when you install it on your facebook fan page</i></div></div>
<div class="rooms" style="float:left;">
<?php include'../hotel.php';?>
</div>
</div>
</div>
</div>
</div>
</body>
and heres the link of my app.
It would be great if someone can help me with this.
I am developing a site(ww.xyz.com) in PHP and have successfully integrated the "Login with Facebook" button on the index page of this site. I have tested it and it is working fine.
This site apart from a "Login with Facebook" button also has it's own login form through which already registered users can login to this site. Once the user logs in through this login form(not login with Facebook option) a session is started and the user is taken to another page where his profile details(like first name, last name, email address etc.) are displayed.
Now with the "Login with Facebook" Button I want to do a similar functionality. Where once a user is authenticated via facebook account following two steps should happen.
Step 1. He or She should be taken to the same page to which users are taken to if they login via the website's own login form by openning an appropriate session. In this page the users data(like picture, firstname, lastname etc.) should be displayed.
Step
Step 2. Collect this data(picture, firstname, lastname etc.) sent by facebook connect and store it in my MYSQL Database.
For your refernce below is the code for the index.html page.
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:fb="http://www.facebook.com/2008/fbml">
<!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=iso-8859-1" />
<title>XYZ Index</title>
<style type="text/css">
<!--
.ptour_crtbtn { BORDER-BOTTOM: #ccc 1px outset; MIN-WIDTH: 100px; TEXT-
ALIGN: center; BORDER-LEFT: #ccc 1px outset; PADDING-BOTTOM: 4px; PADDING-LEFT:
2px; PADDING-RIGHT: 2px; BACKGROUND: none transparent scroll repeat 0% 0%; COLOR:
#fff; BORDER-TOP: #ccc 1px outset; CURSOR: pointer; BORDER-RIGHT: #ccc 1px outset;
PADDING-TOP: 5px; -moz-border-radius: 7px; -webkit-border-radius: 7px
}
.style1 {color: #0000FF}
#content { BORDER-BOTTOM: #ccc 1px solid; BORDER-LEFT: #ccc 1px solid; PADDING-
BOTTOM: 12px; BACKGROUND-COLOR: #fff; MARGIN: 0px auto; PADDING-LEFT: 20px; WIDTH:
350px; PADDING-RIGHT: 20px; BORDER-TOP: #ccc 1px solid; BORDER-RIGHT: #ccc 1px solid;
PADDING-TOP: 20px; -moz-border-radius: 7px; -webkit-border-radius: 7px
}
.style3 {color: #0000FF; font-weight: bold; }
.style5 {
color: #0000FF;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
}
.style7 {color: #0000FF; font-family: Geneva, Arial, Helvetica, sans-serif; }
.style8 {font-family: Geneva, Arial, Helvetica, sans-serif}
-->
</style>
</head>
<body>
<p><img src="./images/header.JPG" width="1266" height="127" alt="header" /></p>
<p> </p>
<p> </p>
<div id="content">
<h1 class="style1">Login Form:</h1>
<form method="post" action="Login.php">
<p>
<label style="DISPLAY: block"><span class="style3">Email:</span></label>
<input class="text"
name="username" />
</p>
<p>
<label style="DISPLAY: block"><span class="style3">Password:</span></label>
<input class="text"
type="password" name="password" />
'</p>
<p><a href="http://dl.dropbox.com/u/7106563/r-ednalan/login_form.html#">Forgot
password?</a></p>
<p>
<button class="ptour_crtbtn" name="login" type="submit"><span
class="style1"><strong>Talk</strong></span><strong>i</strong>n</button>
</p>
<pre><span class="style5">OR</span><span class="style8"><script
src="http://connect.facebook.net/en_US/all.js"></script><script>
FB.init({
appId:'XXXXX',
cookie:true,
status:true,
xfbml:true
});
</script></span>
<fb:login-button onlogin="alert('Authenticated!');"><div align="left">Login with
Facebook</div></fb:login-button></p>
</p>
</pre>
</form>
</body>
</html>
My CSS formatting is lost when i use it with MFMailComposeViewController. Below is my sample code. I just insert my table data under the body section.
<html>
<head>
<style type="text/css">
#customers {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
width: 100%;
border-collapse: collapse;
}
#customers td,
#customers th {
font-size: 1em;
text-align: right;
border: 1px solid #999999;
padding: 10px 25px 5px 25px;
}
#customers th {
font-size: 1.1em;
text-align: center;
padding: 10px 25px 5px 25px;
background-color: #ffffff;
color: #000000;
}
</style>
</head>
<body>
%#
</body>
</html>
I am setting the "isHTML=YES" while composing the email. Am i missing something or is this method of using CSS not supported on the iphone using MFMailComposeViewController
I'm not clear, but are you putting your CSS inside the <body> or <head>? I believe MFMailComposeViewController needs to have CSS defined inside the <body></body> tags.