I have the following code. It's generating PDFs fine in Chome and Firefox, but it refuses to generate in Internet explorer. I've tried writing the PDF out to a file, sending the proper PDF headers, and then echoing the contents of the file out to the browser and this again will work OK in Chrome and Firefox, but it still refuses to render in IE.
What am I missing?
<?php
require_once('wp-blog-header.php');
require_once('mpdf/mpdf.php');
$pid = $_GET['product'];
$args = array(
'p' => $pid,
'post_type' => 'any');
$query = new WP_Query($args);
if (!$query->have_posts()) {
die("Invalid Product");
}
if (has_post_thumbnail($_GET['product'])) {
$image = wp_get_attachment_image_src(get_post_thumbnail_id($pid, 'single-post-thumbnail'));
$image = $image[0];
} else {
$image = "<h1>NO IMAGE</h1>";
}
$query->the_post();
$mpdf = new mPDF();
ob_start();
?>
<html>
<head>
<title>Tear Sheet</title>
<style>
body, html {
font-size: 20px;
color: #777777;
margin: 0px;
padding: 0px;
font-family: "Georgia";
}
#main-content {
background: url('IP-Tearsheet-Background.jpg');
/*width: 1530px;
height: 1980px;*/
width: 100%;
height: 100%;
background-size:100% 100%;
display:block;
position: absolute;
left:0px;
top:0px;
}
/*.attachment-full.wp-post-image {
display:block;
//margin:auto;
position:absolute;
top:120px;
left:50%;
margin-left:-100px;
padding-top:350px;
max-width: 100px;
width: 100px !important;
}
img {
width: 100px !important;
}*/
#table-container {
display:table;
margin-top: 580px;
position:relative;
top:100px;
}
#style-number {
display: table-cell;
width: 563px;
}
#width {
display: table-cell;
width: 247px;
}
#depth {
display: table-cell;
width: 238px;
}
#height {
width: 30px;
display: table-cell;
width: 190px;
}
#details {
margin-top: 100px;
margin-left: 80px;
font-size:20px;
}
</style>
</head>
<body>
<div id="main-content">
<br><br><br><br><br>
<table border=0 cellspacing=0 cellpadding=0>
<tr><td width="190px"> </td><td style="text-align: middle;"><?php the_post_thumbnail( array(400, 400) ); ?></td></tr>
</table>
<br><br><br><br><br>
<?php //echo '<img src="' . get_the_post_thumbnail('full') . '" class="product-image">'; ?>
<table border=0 cellspacing=0 cellpadding=0 style="margin-left: 87px;margin-top:70px">
<tr>
<td style="width: 345px;"><?php echo get_post_meta($pid, '_sku', true); ?></td>
<td style="width: 150px;"><?php echo get_post_meta($pid, '_width', true); ?> in.</td>
<td style="width: 150px;"><?php echo get_post_meta($pid, '_length', true); ?> in.</td>
<td style="width: 190px;"><?php echo get_post_meta($pid, '_height', true); ?> in.</td>
</tr>
</table>
<br>
<!-- <div id="table-container">
<div id="style-number">
<?php echo get_post_meta($pid, '_sku', true); ?> in.
</div>
<div id="width">
<?php echo get_post_meta($pid, '_width', true); ?> in.
</div>
<div id="depth">
<?php echo get_post_meta($pid, '_length', true); ?> in.
</div>
<div id="height">
<?php echo get_post_meta($pid, '_height', true); ?> in.
</div>
</div> -->
<div id="details">
Details
<?php the_content(); ?>
</div>
</div>
</body>
</html>
<?php
$output = ob_get_clean();
$mpdf->WriteHTML($output);
$mpdf->Output();
exit;
?>
In the end this wasn't possible. I had to move to generating an HTML page.
Related
I'm currently displaying a users profile picture in php and if they click on it, then it takes them through to their own profile. The image displays correctly and the link works, but the area of the link extends way beyond the picture and over a link nearby. How would I go about reducing the area of the anchor?
<?php } if ($searchuser == $username)
{ ?>
<a href="profile.php">
<?php } ?>
<div style="background-image: url('<?php echo $profilepic; ?> ')" class="user-pic"></div>
<?php if ($searchuser == $username)
{?>
</a>
div.user-pic {
margin: 0 auto;
width: 125px;
height: 125px;
border-radius: 50%;
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
border: 0.09em solid white;
position: relative;
top: -60px;
padding: 0px;
z-index: -100;
}
Try with this:
php
<?php }
$show_user_link = false;
if ($searchuser == $username) {
$show_user_link = true;
}
?>
<div style="background-image: url('<?php echo $profilepic; ?>')" class="user-pic">
<?php if( $show_user_link ): ?>
<a class="user-link" href="profile.php">
</a>
<?php endif; ?>
</div>
css
div.user-pic {
position: relative;
}
a.user-link {
height: 125px;
width: 100%;
}
You put the anchor in within the div tag and then you could make div's position relative and anchor's width to 100%.
PS: You could try to use something like
<?php if(true): ?>
<strong> some html </strong>
<?php endif; ?>
when mixing php and html to make your code more readable.
--- EDIT
Ok, I understand, see if the new code is more helpfull now, the only thing I think that could go wrong is the height of the anchor in case it isnt fixed to 125px, say me if you have problems with it.
I am doing a lot of modifications on a wordpress theme for a friend. I have having a lot of issues with the footer staying at the bottom of the page, instead of keeps on moving up and leaving whitespace.
URL:
http://design.jarethmusic.com/about/
HTML (footer.php)
<?php global $woo_options; ?>
<?php
$total = 4;
if ( isset( $woo_options['woo_footer_sidebars'] ) ) { $total = $woo_options['woo_footer_sidebars']; }
if ( ( woo_active_sidebar( 'footer-1' ) ||
woo_active_sidebar( 'footer-2' ) ||
woo_active_sidebar( 'footer-3' ) ||
woo_active_sidebar( 'footer-4' ) ) && $total > 0 ) {
?>
<div id="footer-widgets">
<div class="col-full col-<?php echo $total; ?>">
<?php $i = 0; while ( $i < $total ) { $i++; ?>
<?php if ( woo_active_sidebar( 'footer-' . $i ) ) { ?>
<div class="block footer-widget-<?php echo $i; ?>">
<?php woo_sidebar( 'footer-' . $i ); ?>
</div>
<?php } ?>
<?php } ?>
<div class="fix"></div>
</div>
</div><!-- /#footer-widgets -->
<?php } ?>
<div class="push"></div>
<div id="footer">
<div class="col-full">
<div id="copyright" class="col-left">
<?php if( isset( $woo_options['woo_footer_left'] ) && $woo_options['woo_footer_left'] == 'true' ) {
echo stripslashes( $woo_options['woo_footer_left_text'] );
} else { ?>
<p><?php bloginfo(); ?> © <?php echo date( 'Y' ); ?>. <?php _e( 'All Rights Reserved.', 'woothemes' ); ?></p>
<?php } ?>
</div>
<div id="credit" class="col-right">
<?php if( isset( $woo_options['woo_footer_right'] ) && $woo_options['woo_footer_right'] == 'true' ) {
echo stripslashes( $woo_options['woo_footer_right_text'] );
} else { ?>
<p><?php _e( 'Powered by' ); ?> WordPress and WooThemes. <?php _e( 'Designed and edited by' ); ?> John Brown.</p>
<?php } ?>
</div></div>
</div><!-- /#footer -->
</div><!-- /#wrapper -->
<?php wp_footer(); ?>
<?php woo_foot(); ?>
</body>
</html>
CSS
#footer{padding: 30px 0 20px; background: url(images/bg-ripple-footer.png) repeat top left; color:#999;}
#footer p {}
#footer a { color: #ffffff; }
#footer #credit img{vertical-align:middle;}
#footer #credit span{display:none;}
#footer-widgets { margin-bottom: -5px; background: url(images/bg-ripple-footer-widgets.png) repeat top left; padding:10px 0; height:60px; }
#footer-widgets .block { padding:20px 10px 0 10px; float:left; }
#footer-widgets .col-1 .block { width:100%; padding-left:0; }
#footer-widgets .col-2 .block { width:420px; padding-left: 20px; }
#footer-widgets .col-3 .block { width:270px; padding-left: 16px; }
#footer-widgets .col-4 .block { width:200px; padding-left: 10px; }
I hope I can get to the bottom of this with your help.
John
No add this in your CSS:
#content {
min-height: 700px;
}
You need a minimum height of your content area to "push" the footer down to the bottom of the page. If the content area is a small portion inside of the wrapper, the footer will not be at the bottom of the page.
Side note: A very useful tool is using the Chrome browser. It has a built-in firebug-like extension that lets you inspect elements of a webpage while updating it at the same time.
Managed to fix my issue by following this small tutorial:
http://mystrd.at/modern-clean-css-sticky-footer/
Credits to mfreitas for the link.
Also, regards to everyone else who helped me in this. Thanks
John
Use position: fixed;
Update your code with this CSS:
#footer {position: fixed;}
Use position: absolute; in your css for the footer
I have a problem with my css.
When I open my page on IE and Firefox it shows up like this (just like it should)
http://tinypic.com/r/14ni5gk/6
But when I open my page on Safari it shows up like this:
http://tinypic.com/r/2mzdxed/6
(notice the last two boxes not floating next to eachother)
I have the following css code:
#charset "utf-8";
body{
font-family:Verdana, Geneva, sans-serif;
font-size: 12px;
}
#container{
width: 600px;
background: #fff;
}
#header{
height: 151px;
background-image:url('../img/tomaat.png');
background-repeat: no-repeat;
background-position:center;
}
#recent fieldset{
width : 600px;
}
#stats fieldset{
width : 600px;
}
#login fieldset{
width : 200px;
float: left;
height: 150px;
}
#nieuw fieldset{
width : 290px;
float:left;
height: 100px;
}
#verwijder fieldset{
width: 289px;
height:100px;
}
label {
width: 50px;
float: left;
}
#login label{
width: 200px;
float: left;
}
input {
width: 200px;
}
#nieuw button{
position:relative;
top: 5px;
}
#verwijder button{
position:relative;
top: 27px;
}
#login button{
width: 200px;
position: relative;
top:5px;
}
#a {
position : relative;
top: 43px;
}
#buttonz {
text-align: center;
}
legend{
font-weight: bold;
}
And the following index.php page:
<?php
include_once("db.php");
session_start();
if (!isset($_SESSION['uid'])){
header("location:main_login.php");
exit();
}
if (!isset($_SESSION['upass'])){
header("location:main_login.php");
exit();
}
$sql="SELECT * FROM users WHERE Naam='".$_SESSION['uid']."' AND Wachtwoord='".$_SESSION['upass']."'";
$result=mysql_query($sql);
$count=mysql_num_rows($result);
if($count < 1){
header("location:main_login.php");
exit();
}
?>
<?php
$date = date("y-m-d");
$vandaag = mysql_query("SELECT Type, Naam, Reden, Door FROM turfjes WHERE turfjes.Datum = '" . $date . "'");
$names = mysql_query("SELECT Naam From users");
$names2 = mysql_query("SELECT Naam From users");
$names3 = mysql_query("SELECT Naam From users");
?>
<!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>Tomaten turfjes pagina | 258</title>
<link rel="stylesheet" type="text/css" href="css/style.css" media="all" />
<script type="text/javascript" src="js/jquery.js"></script>
<script>
jQuery.noConflict();
</script>
<script src="js/prototype.js" type="text/javascript"> </script>
<script src="js/scriptaculous.js" type="text/javascript"></script>
<script src="js/script.js" type="text/javascript"> </script>
</head>
<body>
<div id="container">
<div id="header">
</div>
<div id="info">
<div id="recent">
<fieldset>
<legend>Vandaag</legend>
<table border="0">
<tr>
<td>Type</td>
<td>Naam</td>
<td>Reden</td>
<td>Door</td>
<?php
while($a = mysql_fetch_array($vandaag)){
?> <tr>
<td><?php echo($a['Type']);?></td>
<td><?php echo($a['Naam']);?></td>
<td><?php echo($a['Reden']);?></td>
<td><?php echo($a['Door']);?></td>
</tr>
<?php
}
?>
</table>
</fieldset>
</div>
<div id="stats">
<fieldset>
<legend>Turfjesteller</legend>
<table border="0">
<tr>
<td>Naam</td>
<td>Aantal</td>
<td>Gedaan</td>
<td>Resterend</td>
</tr>
<?php
while($r = mysql_fetch_array($names)){
echo("<tr id=".$r['Naam'].">");
?>
<td><?php echo($r['Naam']);?></td>
<?php
$sql="SELECT * FROM turfjes WHERE Naam='".$r['Naam']."' AND Type='Adtje'";
$result=mysql_query($sql);
$count=mysql_num_rows($result); //count = adtjes
$sql2="SELECT * FROM turfjes WHERE Naam='".$r['Naam']."' AND Type='Turfje'";
$result2=mysql_query($sql2);
$count2=mysql_num_rows($result2); //count2 = turfje
?>
<td><?php echo($count2);?></td>
<td><?php echo($count);?></td>
<td><?php echo($count2-$count);?></td>
</tr>
<?php
}
?>
</table>
</fieldset>
</div>
</div>
<div id="actie">
<div id="nieuw">
<fieldset>
<legend>Nieuwe turfjes</legend>
<label>Naam</label>
<select id = "naamnieuw">
<option value="" selected></option>
<?php
while($r = mysql_fetch_array($names2)){
echo("<option value='".$r['Naam']."'>".$r['Naam']."</option>");
}
?>
</select>
<br>
<label>Reden</label> <input type="text" name="redennieuw" id="redennieuw"/> <br>
<label>Door</label> <input type="text" name="door" id="door" disabled="disabled" value =<?php echo($_SESSION['uid']) ?>> <br>
<div id = "buttonz"><button type="button" id="submitnieuw">Turfje uitdelen</button></div>
</fieldset>
</div>
<div id="verwijder">
<fieldset>
<legend>Verwijderen turfjes</legend>
<label>Naam</label>
<select id = "naamverwijder">
<option value="" selected></option>
<?php
while($r = mysql_fetch_array($names3)){
echo("<option value='".$r['Naam']."'>".$r['Naam']."</option>");
}
?>
</select>
<br>
<label>Door</label> <input type="text" name="door" id="door2" disabled="disabled" value =<?php echo($_SESSION['uid']) ?>> <br>
<div id = "buttonz"><button type="button" id="submitdelete">Turfje verwijderen</button></div>
</fieldset>
</div>
<form name="logout" method="post" action="logout.php">
<div id = "buttonz"><input type="submit" name="logout" value="Log uit"></div>
</form>
</div>
</div>
</body>
</html>
The boxes are both in the div action
and are called nieuw and verwijder.
Nieuw is the first one, verwijder is the second one.
Can anyone tell me why this is happening and maybe even how to solve this problem?
Browsers have slightly different default settings for thing like padding, margins and font sizes for some elements (for example, the padding on a UL or the size of an H1)
A CSS reset clears these so you can use your own values.
There are many around. I like the Yahoo CSS Reset 2, and for HTML5 there's the HTML5 Boilerplate.
I really dont know what to do.
I made a really simple guestbook, its ok and all, but when showing the comments
the text spills out from the div
I was trying with pre but didnt work
here is the css
.guestbook_content {
width: 100%;
height: 100%;
background: #FFE4E1;
padding: 5px;
font-size: 12px;
margin-bottom: 10px;
}
#box {
width: 628px;
height: 438px;
background: #fefefd ;
overflow-y: scroll;
overflow-x: hidden;
}
the html and php
<div id='box'>
<div id='box_title'></div>
<div id="box_text">
<?php
if(isset($_POST['mehet'])) {
$message= '';
$the_name= mysql_real_escape_string(strip_tags($_POST['nev']));
$comment = mysql_real_escape_string(strip_tags($_POST['comment']));
$date = date('Y.m.d H:i:s');
if(!empty($comment) && !empty($the_name)) {
//mysql_query("INSERT INTO vendeg (name, comment, date) VALUES ('$the_name', $comment', '$date')") or die(mysql_error());
mysql_query(" INSERT INTO guesstb(the_name, comment, date) VALUES ('$the_name', '$comment', '$date') ");
}else {
$message= '<b><font color="darkred">Pleasse fill out all inputs</b></font>';
}
}
?>
<?php echo $message; ?>
<form action='<?php echo the_permalink();?>' method='POST'>
<label for='nev' class='gbl'>Name:</label>
<input type='text' name='the_name' id='the_name' class='gbi'>
<label for='comm' class='gbl'>Comment:</label>
<textarea name='comment' id='comm' rows='5' cols='60' class='gbt'></textarea>
<input type='submit' class='submit' value='Beküld' name='mehet'>
</form>
<?php
$result = mysql_query("SELECT * FROM guesstbORDER BY date DESC");
while($row = mysql_fetch_array($result))
{
?><div class='guestbook_head'><span>sent by:</span> <b><?php echo $row['nev']; ?></b> <span> - date:</span> <?php echo $row['date']; ?> </div><?
?>
<div class='guestbook_content'><?echo $row['comment'];?></div>
<?
}
?>
could please someone could give me hint
.guestbook_content {
width: 100%; <-- drop this rule
height: 100%;
padding: 5px;
}
#box {
width: 628px;
}
You gave child div width: 100% + padding 5px, which makes = 100% of parent div :628px + 5px left padding + 5px right padding so child div is 638px wide. Just drop 100% width on child. All you need is padding.
Here is jsfiddle with your situation: http://jsfiddle.net/crg2U/2/
And here is with droped 100% width on child : http://jsfiddle.net/crg2U/3/
The boxes were on one line now they have been knocked onto three why is this?
CSS:
#case_studies { margin:10px 0 0 5px; }
.case_study { float:left; width:258px; padding-left:19px; }
#case_studies .strip { width:279px; height:30px; margin:15px 0 20px -19px; }
#case_studies h3.tri { background:transparent url("../images/ico_triangle.gif") no-repeat left; font-size:1.3em; padding:10px 0 10px 20px; }
#case_studies .content img { margin-bottom:10px; }
.light_green img { border:1px solid #7ac63c; }
.light_orange img { border:1px solid #fa7605; }
.light_blue img { border:1px solid #4dacd8; }
#case_studies .green { background:#7ac63c url("../images/bg-greenstrip.gif") repeat 0 0; height:40px;}
#case_studies a.green { background:transparent; text-decoration: underline; color:#7ac63c; }
.light_green { background:#def1ce; width:260px; margin:0 15px 15px 0; }
#case_studies .orange { background:#82c1f1 url("../images/bg-orangestrip.gif") repeat 0 0; height:40px; }
#case_studies a.orange { background:transparent; text-decoration: underline; color:#fa7605; }
.light_orange { background:#feddc0; width:260px; margin:0 15px 15px 0; }
#case_studies .blue { background:#82c1f1 url("../images/bg-bluestrip.gif") repeat 0 0; height:40px;}
#case_studies a.blue { background:transparent; text-decoration: underline; color:#4dacd8; }
.light_blue { background:#d2eaf5; width:260px; margin:0 15px 15px 0; }
.case .content { padding:10px; }
HTML:
<div id="case_studies">
<div class="case_study light_green">
<div class="strip green"><h3 class="tri">Industrial</h3></div>
<div class="content case">
<?php wp_reset_query(); ?>
<?php query_posts('category_name=Industrial&showposts=1'); if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<img src="<?php $key="case-study"; echo get_post_meta($post->ID, $key, true); ?>" alt="<?php the_title(); ?>" width="244" height="132" alt="<?php the_title(); ?>" />
<?php the_content(__('')); ?>
<?php endwhile; ?>
<?php endif; ?>
</div>
</div><!-- Featured Box END -->
<div class="case_study light_orange">
<div class="strip orange"><h3 class="tri">Commercial</h3></div>
<div class="content case">
<?php wp_reset_query(); ?>
<?php query_posts('category_name=Commercial&showposts=1'); if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<img src="<?php $key="case-study"; echo get_post_meta($post->ID, $key, true); ?>" alt="<?php the_title(); ?>" width="244" height="132" alt="<?php the_title(); ?>" />
<?php the_content(__('')); ?>
<?php endwhile; ?>
<?php endif; ?>
</div>
</div><!-- Featured Box END -->
<div class="case_study light_blue">
<div class="strip blue"><h3 class="tri">Domestic</h3></div>
<div class="content case">
<?php wp_reset_query(); ?>
<?php query_posts('category_name=Domestic&showposts=1'); if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<img src="<?php $key="case-study"; echo get_post_meta($post->ID, $key, true); ?>" alt="<?php the_title(); ?>" width="244" height="132" alt="<?php the_title(); ?>" />
<?php the_content(__('')); ?>
<?php endwhile; ?>
<?php endif; ?>
</div>
</div><!-- Featured Box END -->
</div>
It's because in http://fluroltd.com/clients/harveys/wp-content/themes/harveys/css/base.css you have:
#page_case_studys { float:left; width:400px; margin-left:10px; }
Which forces the following containers into that box. Since 260*3 = 780, you need at -least- a box of 780 pixels, not including any extra padding or margin.
If you specifically need #page_case_studys to have a width of 400px throughout your website, I would suggest writing a more specific CSS style for the page to target the element and set the width to auto.
Also, the boxes all have a width of 260 because of the following rule in the same stylesheet:
.light_green { background:#def1ce; width:260px; margin:0 15px 15px 0; }
If you're using Firefox, download Firebug and use that to help solve your CSS issues. In Chrome, you can right-click the element and go to "Inspect Element".
Related links:
http://htmldog.com/guides/cssadvanced/specificity/
http://www.w3.org/TR/CSS2/cascade.html
In base.css, line 79 you have:
#page_case_studys {
float:left;
margin-left:10px;
width:400px;
}
You should increase the witdh to make room for all the 3 boxes.