I created pdf with wkhtml2pdf with Arial font, while generate on local does not matter. But at the time of generating in online, font changed to be Times New Roman.
Code CSS
.div1 {
font-family: Arial;
font-size: 10px;
padding-left: 5px;
padding-top: 0px;
}
Try this
.div1 {
font-family: Arial!important;
font-size: 10px;
padding-left: 5px;
padding-top: 0px;
}
Hope it will help.
kind late, but i use this and works fine...
<head>
<meta charset="UTF-8">
<style>
body{
font-family:Arial, sans-serif;
}
</style>
</head>
<body>
<h1>Hi!</h1>
</body>
the key is in meta charset inside the head tag
Related
I am sending mail using PHPMailer and Gmail doesn't seem to recognize the font "Kaushan Script" in heading while it successfully recognizes "Roboto Condensed" in rest of the body. Both are Google Fonts. Still, gmail is able to recognize one and ignores the other and places it's own random font. Inspecting element in gmail still shows the font name I used. Here is my code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css2?family=Roboto+Condensed&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Kaushan+Script&display=swap" rel="stylesheet">
<style>
.mail-head, .mail-foot {
background: linear-gradient(315deg, #ee9617 0%, #fe5858 74%);
padding: 10px;
width: 100%;
box-sizing: border-box;
color: #fff;
font-size: 2rem;
font-family: "Kaushan Script", cursive;
}
.mail-foot {
font-size: 14px;
text-align: center;
font-family: "Roboto Condensed", sans-serif;
}
.mail-body {
font-size: 1rem;
font-family: "Roboto Condensed", sans-serif;
padding: 20px;
line-height: 1.5;
border-right: 1px solid #ee9617;
border-left: 1px solid #fe5858;
}
.logo {
width: auto;
height: 2.5rem;
}
.logo-title {
position: absolute;
top: 1rem;
left: 4.5rem;
}
.otp {
color: #f69;
margin-left: 10px;
}
</style>
</head>
<body>
<div class="mail-head">
<span class="logo-title">Site Name</span>
</div>
CONTEXT
As far as I know Gmail doesn't support all Google Fonts or webfonts. In April 2018, Gmail released an updated interface for their webmail client. This new interface uses a limited list of popular webfonts including Google Sans and Roboto. (This explains why Roboto works is your case).
PROBLEM
I haven't found official documentation on this nor a list of the Google fonts or webfonts supported Gmail's interface.
ALTERNATIVE
These are the fonts supported by Gmail. Try to change "Kaushan Script" for any of them to confirm "Kaushan Script" is not supported by Gmail. Check if you can use any of these fonts to replace "Kaushan Script". Otherwise I suggest to use an image instead.
Arial
Arial Black
Arial Narrow
Bookman Old Style
Book Antiqua
Charcoal
Courier
Courier New
Comic Sans MS
Fixed width (monospace)
Garamond
Geneva
Georgia
Helvetica
Impact
Lucida Console
Lucida Grande
Lucida Sans Unicode
Monaco
Monospace
MS Sans Serif
Narrow (arial narrow)
New York
Palatino
Palatino Linotype
Roboto
Sans serif (arial)
Serif (times new roman)(serif)
Symbol
Tahoma
Times
Times New Roman (times new roman, serif)
Trebuchet MS (trebuchet ms, sans-serif)
Verdana
Webdings
Wide (arial black)
Wingdings
Zapf Dingbats
Good luck!
The user arrives on the following php script and it sets if the email has been confirmed or not.
At the moment the only thing the user can seen in the browser is a very simple message printed by the php echo.
I would like it to look visually more interesting. Get this echo to be part of a properly styled HTML page with header, font styles, signature, images...
What would be the best approach for that having in mind my script has breakpoints? As I never did that before, not sure what would be the best start point to focus the effort on.
Bellow are my code updates based on the answers. Hope that helps other
users that are new to php.
<?php
require("../db/MySQLDAO.php");
require ("../Classes/EmailConfirmation.php");
$config = parse_ini_file('../db/SwiftApp.ini');
//host access data
$dbhost = trim($config["dbhost"]);
$dbuser = trim($config["dbuser"]);
$dbpassword = trim($config["dbpassword"]);
$dbname = trim($config["dbname"]);
// receive token data
$emailToken = htmlentities($_GET["token"]);
?>
<!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 name="viewport" content="width=device-width" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Title here</title>
<style>
/* -------------------------------------
GLOBAL
------------------------------------- */
* {
margin: 0;
padding: 0;
font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
font-size: 100%;
line-height: 1.6;
}
img {
max-width: 100%;
}
body {
-webkit-font-smoothing: antialiased;
-webkit-text-size-adjust: none;
width: 100%!important;
height: 100%;
}
/* -------------------------------------
ELEMENTS
------------------------------------- */
a {
color: #348eda;
}
.btn-primary {
text-decoration: none;
color: #FFF;
background-color: #348eda;
border: solid #348eda;
border-width: 10px 20px;
line-height: 2;
font-weight: bold;
margin-right: 10px;
text-align: center;
cursor: pointer;
display: inline-block;
border-radius: 25px;
}
.btn-secondary {
text-decoration: none;
color: #FFF;
background-color: #aaa;
border: solid #aaa;
border-width: 10px 20px;
line-height: 2;
font-weight: bold;
margin-right: 10px;
text-align: center;
cursor: pointer;
display: inline-block;
border-radius: 25px;
}
.last {
margin-bottom: 0;
}
.first {
margin-top: 0;
}
.padding {
padding: 10px 0;
}
/* -------------------------------------
BODY
------------------------------------- */
table.body-wrap {
width: 100%;
padding: 20px;
}
table.body-wrap .container {
border: 1px solid #f0f0f0;
}
/* -------------------------------------
FOOTER
------------------------------------- */
table.footer-wrap {
width: 100%;
clear: both!important;
}
.footer-wrap .container p {
font-size: 12px;
color: #666;
}
table.footer-wrap a {
color: #999;
}
/* -------------------------------------
TYPOGRAPHY
------------------------------------- */
h1, h2, h3 {
font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
color: #d63480;
margin: 40px 0 10px;
line-height: 1.2;
font-weight: 200;
}
h1 {
font-size: 36px;
}
h2 {
font-size: 28px;
}
h3 {
font-size: 22px;
}
p, ul, ol {
margin-bottom: 10px;
font-weight: normal;
font-size: 14px;
}
ul li, ol li {
margin-left: 5px;
list-style-position: inside;
}
/* ---------------------------------------------------
RESPONSIVENESS
------------------------------------------------------ */
/* Set a max-width, and make it display as block so it will automatically stretch to that width, but will also shrink down on a phone or something */
.container {
display: block!important;
max-width: 600px!important;
margin: 0 auto!important; /* makes it centered */
clear: both!important;
}
/* Set the padding on the td rather than the div for Outlook compatibility */
.body-wrap .container {
padding: 20px;
}
/* This should also be a block element, so that it will fill 100% of the .container */
.content {
max-width: 600px;
margin: 0 auto;
display: block;
}
/* Let's make sure tables in the content area are 100% wide */
.content table {
width: 100%;
}
</style>
</head>
<body bgcolor="#f6f6f6">
<!-- body -->
<table class="body-wrap" bgcolor="#f6f6f6">
<tr>
<td></td>
<td class="container" bgcolor="#FFFFFF">
<!-- content -->
<div class="content">
<table>
<tr>
<td>
<h1>Title</h1>
<table>
<tr>
<td class="padding">
<p>
<?php
if(empty($emailToken)) {
echo "<h2>Sorry, something went wrong...</h2>";
echo "<p>Unfortunately your email validation token has expired.</p>";
echo "<p>Please get in contact with us at <a href=mailto:></a></p>";
}
else{
//open server connection
$dao = new MySQLDAO($dbhost, $dbuser, $dbpassword, $dbname);
$dao->openConnection();
//creates user
$user_id = $dao->getUserIdWithToken($emailToken);
if(empty($user_id))
{
echo "<h2>Sorry, something went wrong...</h2>";
echo "<p>We could not find an user associated with the email you provided.</p>";
echo "<p>Please get in contact with us at <a href></a></p>";
}
else{
$result = $dao->setEmailConfirmedStatus(1, $user_id);
if($result)
{
echo "<h2>Thank you! Your email is now confirmed!<h2>";
$dao->deleteUsedToken($emailToken);
}
}
$dao->closeConnection();
}
?>
</p>
</td>
</tr>
</table>
<p class="padding"></p>
<p>Thanks,</p>
<p>Title team</p>
<p class="padding"></p>
</td>
</tr>
</table>
</div>
<!-- /content -->
</td>
</tr>
</table>
<!-- /body -->
</body>
</html>
Use HTML to structure your content and CSS to format your content.
You can echo HTML and CSS right along with your string.
Those links should get you going in the right direction.
Update to accommodate comment
There are many methods, but a simple example that might work for your case is something like this:
Instead of echoing right there in your if statement, replace it with an include or require.
Lets call that file template.php. This file does not need to start with <?php and end with ?>. PHP can punch in and out with HTML. So template.php might look like this:
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta charset="UTF-8">
<title></title>
<link href="css/styles.css" rel="stylesheet" />
</head>
<body>
<div class="some_style"><?php
echo 'something';
?></div>
<div class="some_style2"><?php
echo $some_var;
?></div>
</body>
</html>
Also if this is going to be sent in an email, CSS is not really supported in email, so you will need to keep the styling to what you can do with simple HTML tags and images.
Change your echo to:
echo '<div id="message">User with this email token is not found</div>';
Then style #message with css
Hope that helps!
urgh.. uglyness html in php. There are ways in which you can include html within the script without echoing it out.
There is the old way.
// out of php
?>
<div>
<?php echo $content; ?>
</div>
<?
// back in.
Or you can look into php/html short hand. Your code will benefit from it because it will be somewhat cleaner to read,
The main reason though, dont make php parse html unless you have to.
PHP
echo "<p id='token_message'>User with this email token is not found</p>";
CSS
#token_message {
/* Styling Here */
}
http://code.stephenmorley.org/php/diff-implementation/#styling
I am following above link to test code.
I have put them together but in the browser but I am not seeing any nice color table just like author mentioned. I don't know how to include style code any idea on how to do that?
index.php
<?php
// include the Diff class
require_once './class.Diff.php';
// output the result of comparing two files as plain text
echo Diff::toTable(Diff::compareFiles('/tmp/foo1', '/tmp/foo2'));
?>
You need to include CSS on your page, either by embedding it in the <head> or by linking to an external stylesheet.
<!DOCTYPE html>
<html>
<head>
<!-- external CSS -->
<link rel="stylesheet" type="text/css" href="style.css" />
<!-- embedded CSS -->
<style type="text/css">
.diff td {
vertical-align: top;
white-space: pre;
white-space: pre-wrap;
font-family: monospace;
}
</style>
</head>
<body>
...
The link you provided gives an example of the minimum CSS needed for each td:
.diff td {
vertical-align: top;
white-space: pre;
white-space: pre-wrap;
font-family: monospace;
}
It also explains what classes you can style: diffUnmodified, diffDeleted, diffInserted, and diffBlank.
This is the CSS from the example page you linked:
.diff td {
padding :0 0.667em;
vertical-align: top;
white-space: pre;
white-space: pre-wrap;
font-family: Consolas,'Courier New',Courier,monospace;
font-size: 0.75em;
line-height: 1.333;
}
.diff span {
display: block;
min-height: 1.333em;
margin-top: -1px;
padding: 0 3px;
}
* html .diff span {
height: 1.333em;
}
.diff span:first-child {
margin-top: 0;
}
.diffDeleted span {
border: 1px solid rgb(255,192,192);
background: rgb(255,224,224);
}
.diffInserted span {
border: 1px solid rgb(192,255,192);
background: rgb(224,255,224);
}
I have a PHP file from which i want to create the PDF file but problem is that it is not creating the PDF file.
If i give $content = 'ABC BCNNCNCN'; it works but for my .php file who only contains the html content, it is not working all the way.
I am also pasting my code here:
require_once('../styles/uploads/files/extract/'.$bookName.'/'.$bookName.'_coverFinal.php');
$content = ob_get_clean();
require_once('html2pdf/html2pdf.class.php');
$html2pdf = new HTML2PDF('P', 'A4', 'en', true, 'UTF-8', array(25, 20, 25, 20));
$html2pdf->writeHTML($content, isset($_GET['vuehtml']));
html2pdf->Output("../styles/uploads/files/pdf_files/htmltopdf.pdf", 'F');
Below is my HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title></title>
<style type="text/css">
.main-container {
margin-left: auto;
margin-right: auto;
width: auto;
font-family: Myriad Pro;
}
.page-title {
font-family: Myriad Pro;
font-size:25px;
text-align: center;
}
.stepone {
padding: 10px;
}
.steptwo {
padding: 10px;
}
.codeis {
font-size: 25px;
text-align: center;
}
.code {
font-size: 50px;
padding: 8px;
}
.stepthree {
padding: 10px;
}
.bookgift {
font-weight: bold;
text-align: center;
}
.registration {
padding: 10px;
}
.given {
font-size: 20px;
font-weight: bold;
padding: 10px;
}
.too {
font-size: 20px;
font-weight: bold;
padding: 10px;
}
</style>
</head>
<body>
<div class="main-container">
<div class="page-title">Giftcardbooks.org</div>
<div class="stepone"> Step1. Register this book at www.giftcardbooks.org/register</div>
<div class="steptwo"> Step 2. Enjoy the book and write down the code as you go through the book. Look for the sentences stating. Congratulations, you have just unlocked a letter in your code. The first letter is P.</div>
<div class="codeis"> Your Code is:</div>
<div class="code"> P _ _ _ _ _ _</div>
<div class="stepthree"> Step 3. After finishing the book put your code in the website (www.giftcardbooks.org/giftscards) and enjoy your gift card. Thanks</div>
<div class="bookgift">j ghjhg jghj ukrtert</div>
<div class="registration"> Book Registration Number: 68217543</div>
<div class="given"> This book was given by <font style="text-decoration:underline">_mohsin_</font></div>
<div class="too"> This book was given to <font style="text-decoration:underline">_yousaf_</font></div>
</div>
<style type="text/css">
pre{display:none !important;}
</style>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!-- $Id: header.txt 236 2009-12-07 18:57:00Z vlsimpson $ -->
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>The Project Gutenberg eBook of The Secret Battle, by A. P. Herbert.</title>
<style type="text/css">
body {
margin-left: 10%;
margin-right: 10%;
}
h1, h2, h3, h4, h5, h6 {
text-align: center; /* all headings centered */
clear: both;
}
p {
margin-top: .75em;
text-align: justify;
margin-bottom: .75em;
}
hr {
width: 33%;
margin-top: 2em;
margin-bottom: 2em;
margin-left: auto;
margin-right: auto;
clear: both;
}
table {
margin-left: auto;
margin-right: auto;
}
.pagenum { /* uncomment the next line for invisible page numbers */
/* visibility: hidden; */
position: absolute;
left: 92%;
font-size: smaller;
text-align: right;
} /* page numbers */
.linenum {
position: absolute;
top: auto;
left: 4%;
} /* poetry number */
.blockquot {
margin-left: 5%;
margin-right: 10%;
}
.sidenote {
width: 20%;
padding-bottom: .5em;
padding-top: .5em;
padding-left: .5em;
padding-right: .5em;
margin-left: 1em;
float: right;
clear: right;
margin-top: 1em;
font-size: smaller;
color: black;
background: #eeeeee;
border: dashed 1px;
}
.bb {
border-bottom: solid 2px;
}
.bl {
border-left: solid 2px;
}
.bt {
border-top: solid 2px;
}
.br {
border-right: solid 2px;
}
.bbox {
border: solid 2px;
}
.center {
text-align: center;
}
.smcap {
font-variant: small-caps;
}
.u {
text-decoration: underline;
}
.caption {
font-weight: bold;
}
/* Images */
.figcenter {
margin: auto;
text-align: center;
}
.figleft {
float: left;
clear: left;
margin-left: 0;
margin-bottom: 1em;
margin-top: 1em;
margin-right: 1em;
padding: 0;
text-align: center;
}
.figright {
float: right;
clear: right;
margin-left: 1em;
margin-bottom:
1em;
margin-top: 1em;
margin-right: 0;
padding: 0;
text-align: center;
}
/* Footnotes */
.footnotes {
border: dashed 1px;
}
.footnote {
margin-left: 10%;
margin-right: 10%;
font-size: 0.9em;
}
.footnote .label {
position: absolute;
right: 84%;
text-align: right;
}
.fnanchor {
vertical-align: super;
font-size: .8em;
text-decoration:
none;
}
/* Poetry */
.poem {
margin-left:10%;
margin-right:10%;
text-align: left;
}
.poem br {
display: none;
}
.poem .stanza {
margin: 1em 0em 1em 0em;
}
.poem span.i0 {
display: block;
margin-left: 0em;
padding-left: 3em;
text-indent: -3em;
}
.poem span.i2 {
display: block;
margin-left: 2em;
padding-left: 3em;
text-indent: -3em;
}
.poem span.i4 {
display: block;
margin-left: 4em;
padding-left: 3em;
text-indent: -3em;
}
</style>
</head>
<body>
<div class="figcenter"> <img src="images/cover.jpg" alt=""/> </div>
<hr style="width: 65%;" />
<h1>THE SECRET BATTLE</h1>
<h2>BY A. P. HERBERT</h2>
<h3>AUTHOR OF 'THE BOMBER GYPSY'</h3>
<h3>METHUEN & CO. LTD.<br />
36 ESSEX STREET W.C.<br />
LONDON</h3>
<h3><i>First Published in 1919</i></h3>
<hr style="width: 65%;" />
<h2>CONTENTS</h2>
<hr style="width: 65%;" />
<h2>THE SECRET BATTLE</h2>
<hr style="width: 65%;" />
<h2><a name="I" id="I"></a>I</h2>
<p>I am going to write down some of the history of Harry Penrose, because I
do not think full justice has been done to him, and because there must
be many other young men of his kind who flung themselves into this war
at the beginning of it, and have gone out of it after many sufferings
with the unjust and ignorant condemnation of their fellows. At times, it
may be, I shall seem to digress into the dreary commonplaces of all
war-chronicles, but you will never understand the ruthless progression
of Penrose's tragedy without some acquaintance with each chapter of his
life in the army.</p>
<hr style="width: 45%;" />
<p>He joined the battalion only a few days before we left Plymouth for
Gallipoli, a shy, intelligent-looking person, with smooth, freckled skin
and quick, nervous movements; and although he was at once posted to my
company we had not become at all intimate when we steamed at last into
Mudros Bay. But he had interested me from the first, and at intervals in
the busy routine of a troopship passing without escort through submarine
waters, I had been watching him and delighting in his keenness and happy
disposition.</p>
<p>It was not my first voyage through the Mediterranean, though it was the
first I had made in a transport, and I liked to see my own earlier
enthusiasm vividly reproduced in him. Cape Spartel and the first glimpse
of Africa; Tangiers and Tarifa and all that magical hour's steaming
through the narrow waters with the pink and white houses hiding under
the hills; Gibraltar Town shimmering and asleep in the noonday sun;
Malta and the bumboat women, carozzes swaying through the narrow,
chattering streets; cool drinks at cafés in a babel of strange tongues;
all these were to Penrose part of the authentic glamour of the East; and
he said so. I might have told him, with the fatuous pomp of wider
experience, that they were in truth but a very distant reflection of the
genuine East; but I did not. For it was refreshing to see any one so
frankly confessing to the sensations of adventure and romance. To other
members of the officers' mess the spectacle of Gibraltar from the sea
may have been more stimulating than the spectacle of Southend (though
this is doubtful); but it is certain that few of them would have
admitted the grave impeachment.</p>
<p>That was the end of it. They were kind enough, those grey men; they did
not like the job, and they wanted only to do their duty. But they
conceived that their duty was 'laid down in The Book,' to look at the
'hard facts,' and no further. And the 'hard facts' were very hard....</p>
<p>The Court was closed while they considered their verdict; it was closed
for forty minutes, and when it reopened they asked for evidence of
character. And that meant that the verdict was 'Guilty.' On the only
facts they had succeeded in discovering it could hardly have been
anything else.</p>
<p>The Adjutant put in formal evidence of Harry's service, age, record, and
so on; and I was allowed to give evidence of character.</p>
<p>I told them simply the sort of fighting record he had, about Gallipoli,
and the scouting, and the job he had refused in England.</p>
<p>I am glad to believe that I did him a little good; for that evening it
got about somehow that he was recommended to mercy.</p>
<p>And perhaps they remembered that he was twenty-three.</p>
<hr style="width: 65%;" />
<h2><a name="XIII" id="XIII"></a>XIII</h2>
<p>That evening I sat in C Company mess for an hour and talked with them
about the trial. They were very sad and upset at this thing happening in
the regiment, but they were reasonable and generous, not like those D
Company pups, Wallace and the other. For they were older men, and had
nearly all been out a long time. Only one of them annoyed me, a fellow
in the thirties, making a good income in the City, who had only joined
up just before he had to under the Derby scheme, and had been out a
month. This fellow was very strong on 'the honour of the regiment'; and
seemed to think it desirable for that 'honour' that Harry should be
shot. Though how the honour of the regiment would be thereby advanced,
or what right he had to speak for it, I could not discover.</p>
<hr style="width: 45%;" />
<div class="footnote">
<p><a name="Footnote_1_1" id="Footnote_1_1"></a><span class="label">[1]</span> It is only fair to say that, long after the supposed date
of this conversation, a system of sending 'war-weary' soldiers home for
six months at a time was instituted, though I doubt if Foster would have
been satisfied with that.</p>
</div>
</body>
</html>
If the PHP file you are including is just HTML try getting its contents with file_get_contents instead of messing with output buffering:
$content = file_get_contents('../styles/uploads/files/extract/'.$bookName.'/'.$bookName.'_coverFinal.php');
require_once('html2pdf/html2pdf.class.php');
$html2pdf = new HTML2PDF('P', 'A4', 'en', true, 'UTF-8', array(25, 20, 25, 20));
$html2pdf->writeHTML($content, isset($_GET['vuehtml']));
$html2pdf->Output("../styles/uploads/files/pdf_files/htmltopdf.pdf", 'F');
EDIT: Missing $ on last line
I'm not entirely sure how I managed to jack this up.
http://pretty-senshi.com
If you take a look at that, where the left item and right item are, the right item is sticking out for whatever reason, so I think I'm doing something wrong. Or maybe my coding/css is jacked up, I'm not entirely sure about the coding anyway, I just know it "works" somewhat. See below.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US"><br />
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Pretty Senshi - Sailor Moon </title>
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
<link rel="stylesheet"
href="http://pretty-senshi.com/log/wp-content/themes/BLANK-Theme/style.css"
type="text/css" />
<link rel="pingback" href="http://pretty-senshi.com/log/xmlrpc.php" />
</head>
<body class="home blog logged-in admin-bar">
<body>
<div id="container">
<div id="rightHalf"></div>
<div style="text-align: center;"><caption>
<img src="http://pretty-senshi.com/images/design.png" alt="text" id="picture">
</caption></div>
<div id="wrapper"><div id="leftcolumn">
<div class="headernav">Navigation</div>
About Us<br>
Gallery<br>
Links In/Out<br>
</div>
<div id="content">
<div class="post-1 post type-post status-publish
format-standard hentry category-uncategorized" id="post-1"></div>
<div class="header">Welcome</div>
<div class="entry">
<p>The site isn’t ready yet. This site is not ONLY dedicated to
Sailor Moon but to all anime.</p>
<div id="commentbar">
<div class="left">left stuff</div>
<div class="right">right stuff</div></div>
</div>
<div id="footer"></div>
</body>
</html>
And here is the CSS to it:
/*
Theme Name: Pretty Senshi
Theme URI: http://pretty-senshi.com
Description:
Author: Megan Riffey
Author URI: http://hateyourway.org
Version: 1
*/
body {background: url(http://pretty-senshi.com/images/sideone.png);
background-repeat:repeat-x;background-color: #fcefd8;
margin-top:0px;line-height: 20px;font-size: 10.5pt;
font-family: Tahoma;color:#998574;}
div#container {
width:100%;z-index: -1;}
.header {font-weight: bold;
font-size: 14px;
color: #D4556A;
FONT-FAMILY: verdana;
text-align: justify;
letter-spacing: 0px;
line-height: 25px;
background: url(http://pretty-senshi.com/images/header.png) left no-repeat;
padding-right:3px;
padding-left: 10px;
padding-bottom: 3px;
padding-top: 3px;
text-align:center;}
.headernav {font-weight: bold;
font-size: 13px;
color: #D4556A;
FONT-FAMILY: verdana;
text-align: justify;
letter-spacing: 0px;
line-height: 25px;
background: url(http://pretty-senshi.com/images/header.png) left no-repeat;
padding-right:20px;
padding-left: 3px;
padding-bottom: 3px;
padding-top: 3px;
text-align:right;}
.header:first-letter {color:#b970be;}
.headernav:first-letter {color:#b970be;}
div#picture {z-index: -1;width:780px;margin: 0 auto;text-align:center;}
#rightHalf {
background: url(http://pretty-senshi.com/images/sidetwo.png);
background-repeat:repeat-x;
width: 50%;
position: absolute;
right: 0px;
height: 100%;
z-index: -1;}
p {padding: 10px;z-index: 1;}
#wrapper {position:relative;
margin:0 auto;
width: 650px;
height:100%;}
#content {
float: right;
text-align:justify;margin-top:-80px;
width: 440px;z-index: 999;height:100%;}
#leftcolumn {position:absolute;
text-align:justify;
width: 200px;margin-top:-80px;
float: left;z-index: 999;height:100%;}
#commentbar {width:100%;padding:10px;}
.left {float:left; width:50%;}
.right {float:right; width:50%;text-align:right;}
A:link, A:visited, A:active {
color:#175f8b;
text-decoration:none;
text-transform:uppercase;
font-size: 9pt;
font-weight:bold;}
A:hover{
color:#d76b92;
text-decoration:none;
text-transform:uppercase;
cursor:default;
border-bottom: 1px solid #7d8f9a;
font-weight:bold;}
#date
{font:10pt "Century Gothic", sans-serif;
border-top:2px solid #d4aabc;
margin-top:10px;
color:#7ea558;
text-align:right;
font-weight:bold;
text-transform:uppercase;}
div.comment a {
width:100px
float:left;
height:22px;
background-color:#72a2c6;
text-align:center;
display:block;
letter-spacing:0px;
text-shadow:none;
text-transform:uppercase;
margin-top:-16px;
padding:3px;
opacity:.8;
filter:alpha(opacity=80);
filter:"alpha(opacity=80)";}
What can I add or change to make it align with the body text?
It is because you are using padding: 10px; in #commentbar, just remove it and you are good to go..and secondly just saw this that you are also using padding: 10px; for p in your CSS, so if you remove that too, both things will align exactly same
The padding is causing your mis-alignment...remove the padding in this CSS declaration and it will line up
#commentbar {
width: 100%;
/*padding: 10px;*/
}