I am trying to convert html to pdf which has svg image as background image. When convert it with selectPdf api (v2) it doesn't print background svg image but if i use their online test page to convert same html to pdf it does print background image.
Here's how I am calling api
var options = new PdfOptions();
options.html = html;
options.key = _key;
options.margin_bottom = 0;
options.margin_top = 0;
options.SetLandscape();
var client = new HttpClient();
var content = new StringContent(JsonConvert.SerializeObject(options, new JsonSerializerSettings
{
NullValueHandling = NullValueHandling.Ignore
}));
content.Headers.ContentType = new MediaTypeHeaderValue("application/json");
var result = await client.PostAsync("http://selectpdf.com/api2/convert/", content);
if (!result.IsSuccessStatusCode)
{
var msg = await result.Content.ReadAsStringAsync();
throw new ApplicationException($"Failed to create pdf: {msg}");
}
return await result.Content.ReadAsStreamAsync();
html code sending
<!doctype html>
<html class="no-js" lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width">
<style>
#watermark {
position: fixed;
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjx0ZXh0IHg9IjUlIiB5PSI1JSIgZm9udC1zaXplPSIzMCIgZmlsbD0icmVkIj5JIGxvdmUgU1ZHITwvdGV4dD48L3N2Zz4=);
height: calc(100% + 50px);
width: calc(100% + 50px);
background-size: 270px 160px;
background-repeat: repeat;
opacity: 0.3;
top: -50px;
z-index:1;
left: -50px;
}
</style>
</head>
<body>
<div class="grid-container" style="width: 1200px">
<div id="watermark"></div>
<div class="grid-x grid-padding-x">
<div class="large-4 cell">
<h3 style="padding: 0px; margin: 0px; height: 100px; display:table-cell;vertical-align:middle;"><strong></strong></h3>
</div>
<div class="large-4 cell text-right">
<h3 style="padding: 0px; margin: 0px; height: 100px; display:table-cell;vertical-align:middle;"> Specification</h3>
</div>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus.
</p>
</div>
</div>
</body>
</html>
When base64 encoded images are used, set an additional API parameter skip_decoding to True.
Related
I have this code for my chatbot. It's showing by default right-bottom on my website. But I want it on the left-bottom side. I am unable to do it. Can anyone give me the code ?
My Code :
<!-- Load Facebook SDK for JavaScript -->
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
xfbml : true,
version : 'v3.2'
});
};
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = 'https://connect.facebook.net/en_US/sdk/xfbml.customerchat.js';
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<!-- Your customer chat code -->
<div class="fb-customerchat"
attribution=setup_tool
page_id="384557738790994">
</div>
The best way would be to use the fb-customerchat class to style the chat box.
You would put the styles into your css file, or if you don't have one inside a style element.
<style>
.fb-customerchat {
position: absolute;
left: 0;
bottom: 0;
};
</style>
at the top of your html file.
Depending on the hierarchy of the styles that already exist you may need to use left: 0 !important; instead.
.bottom-left {
position: fixed;
bottom: 0;
left: 0;
}
.alert {
border: 2px solid red;
background: white;
font-weight: bold;
padding: 1em;
}
<div class="bottom-left alert">
Look at me!
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit..</p>
<p>Sed vel dolor lectus. Nulla sed blandit lacus. </p>
<p>Donec sagittis, dolor sed fermentum dapibus, justo ipsum porttitor purus, sed fermentum mi nulla non lorem.</p>
This will solve your problem
You can take left side the popup section by follow this simple css tricks. Add the following css code then check it by refresh your browser by ctrt+F5
<style>
.fb_dialog {
left: 18pt;
};
iframe.fb_customer_chat_bounce_in_v2{
left:36pt!important;
}
iframe.fb_customer_chat_bounce_out_v2{
left:36pt!important;
}
</style>
<style>
.fb_dialog {
left: 18pt;
};
</style>
Its work for me. By the way thanks to everyone.
This is full customised facebook chatbot and really easy to use
<script type="text/javascript">
(function () {
var options = {
facebook: "your_facebook_page_id", // Facebook page ID like 598880463493066
call_to_action: "Your_message", // Call to action that user seen like "Message us"
position: "left", // Position may be 'right' or 'left'
};
var proto = document.location.protocol, host = "getbutton.io", url = proto + "//static." + host;
var s = document.createElement('script'); s.type = 'text/javascript'; s.async = true; s.src = url + '/widget-send-button/js/init.js';
s.onload = function () { WhWidgetSendButton.init(host, proto, options); };
var x = document.getElementsByTagName('script')[0];
x.parentNode.insertBefore(s, x);
})();
</script>
I have a problem of link accessibility after 3D rotating, only happening in Chrome.
When I click a Menu link, the header/nav is rotated, and it opens a "submenu panel".
But after applying this CSS3 transformation, I cannot click on the content inside the submenu panel, the whole area is not accessible.
I have edited a new Fiddle, with less code : https://jsfiddle.net/helloducoux/11rnh4ry/2/
Here is html :
<div id="page">
<header id="header-desktop" class="has-transition">
<div class="header-nav has-transition">
<a class="js-flip-header js-target-submenu" href="#" data-tab="header-panel-1">Panel #1</a>
<a class="js-flip-header js-target-submenu" href="#" data-tab="header-panel-2">Panel #2</a>
</div><!--/header-nav-->
<div class="header-panel has-transition">
<div id="header-panel-1" class="header-panel-submenu has-transition">
<p class="header-panel-title">Panel #1</p>
<span class="header-panel-close js-flip-header-back">X</span>
<div class="header-panel-body">
<p>I am the content of Panel #1<br />Text and links are not accessible under Chrome only !</p>
</div>
</div><!--/header-panel-1-->
<div id="header-panel-2" class="header-panel-submenu has-transition">
<p class="header-panel-title">Panel #1</p>
<span class="header-panel-close js-flip-header-back">X</span>
<div class="header-panel-body">
<p>Here again, in the content of Panel #2<br /> I cannot acess Text and links...</p>
</div>
</div><!--/header-panel-2-->
</div><!--/header-panel-->
</header><!--/header-desktop-->
<div style="padding:10px;font-size:34px;">
<p>Nulla vitae elit libero, a pharetra augue. Nullam id dolor id nibh ultricies vehicula ut id elit. Maecenas sed diam eget risus varius blandit sit amet non magna. Curabitur blandit tempus porttitor. Etiam porta sem malesuada magna mollis euismod. Cras mattis consectetur purus sit amet fermentum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
</div><!--/content-->
Here's my JS for targeting the correct panel-sumenu, and adding class on the Header flipped :
jQuery(document).ready(function($) {
$(".js-flip-header").click(function() {
$("#header-desktop").toggleClass("is-flipped");
});
$(".js-flip-header-back").click(function() {
$(this).closest('.header-panel-submenu').removeClass("is-open")
$("#header-desktop").removeClass("is-flipped");
});
});
$(document).ready(function(){
$('.js-target-submenu').click(function(){
var tab_id = $(this).attr('data-tab');
$('.js-target-submenu').removeClass('is-open');
$('.header-panel-submenu').removeClass('is-open');
$(this).addClass('is-open');
$("#"+tab_id).addClass('is-open');
})
})
And the CSS :
* {padding:0; margin:0;} *:before, *:after {-webkit-box-sizing:border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
#page {
padding-top: 120px;
margin: 0 auto;
position: relative;
}
.has-transition {
-webkit-transition: all .4s 0s;
-moz-transition: all .4s 0s;
-ms-transition: all .4s 0s;
-o-transition: all .4s 0s;
transition: all .4s 0s;
}
#header-desktop {
position: relative;
z-index: 999;
height: 120px;
width:100%;
position: fixed;
left: 0;
right: 0;
top: 0;
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
transition:transform .4s linear;
-webkit-transition:transform .4s linear;
}
#header-desktop.is-flipped {
transform:rotateX(90deg);
-webkit-transform:rotateX(90deg);
}
.header-nav{
width:100%;
height:120px;
position: relative;
background: yellow;
transform:translateZ(60px);
-webkit-transform:translateZ(60px);
border-bottom: 1px solid #e7e7e7;
}
#header-desktop.is-flipped .header-nav{
background-color:orange;
}
.header-panel{
width:100%;
height:120px;
position: relative;
background-color:lime;
transform:rotateX(-90deg) translateZ(-60px);
-webkit-transform:rotateX(-90deg) translateZ(-60px);
}
.header-panel-submenu {
width: 100%;
overflow: hidden;
height: 0;
}
.header-panel-submenu.is-open {
height: 100%;
}
.header-panel-title {
margin: 0;
line-height: 120px;
}
.header-panel-close {
position: absolute;
right: 36px;
top: 48px;
cursor: pointer;
}
.header-panel-body {
background-color: pink;
position: absolute;
top: 120px;
left: 0;
right: 0;
padding:30px 10px;
}
I've tryed many modifications cause I saw similar posts/problems (eg this one), but nothing works.
Maybe someone can see the reason ?
Thanks in advance for your help ! :)
How to redirect html page url in mobile version only without refresh page
$(document).ready(function() {
if (screen.width <= 800) {
document.location ="page.html";
}
});
/* [Object] Modal
* =============================== */
.modal {
opacity: 0;
visibility: hidden;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
text-align: left;
background: rgba(0,0,0, .9);
transition: opacity .25s ease;
}
.modal__bg {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
cursor: pointer;
}
.modal-state {
display: none;
}
.modal-state:checked + .modal {
opacity: 1;
visibility: visible;
}
.modal-state:checked + .modal .modal__inner {
top: 0;
}
.modal__inner {
transition: top .25s ease;
position: absolute;
top: -20%;
right: 0;
bottom: 0;
left: 0;
width: 50%;
margin: auto;
overflow: auto;
background:#fff;
border-radius: 5px;
padding: 5em 2em;
height: 10%;
}
.modal__close {
position: absolute;
right: 1em;
top: 1em;
width: 1.1em;
height: 1.1em;
cursor: pointer;
}
.modal__close:after,
.modal__close:before {
content: '';
position: absolute;
width: 2px;
height: 1.5em;
background: #ccc;
display: block;
transform: rotate(45deg);
left: 50%;
margin: -3px 0 0 -1px;
top: 0;
}
.modal__close:hover:after,
.modal__close:hover:before {
background: #aaa;
}
.modal__close:before {
transform: rotate(-45deg);
}
#media screen and (max-width: 768px) {
.modal__inner {
width: 90%;
height: 90%;
box-sizing: border-box;
}
}
/* Other
* =============================== */
.btn {
cursor: pointer;
/* background: #27ae60; */
display: inline-block;
padding: 0em 1em;
color: #333;
border-radius: 3px;
font-size:13px;
}
#module-circle{font-size:8px !important}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body class="landing">
<!-- Main -->
<section style="width:100%" class="table-content" id="Diverse-content">
<div class="table-content" id="table1-content">
<header class="major" id="Diverse-head">
</header>
<!-- Image -->
<section class="Diverse-content">
<div class="row">
<section class="4u 6u(medium) 12u$(small) cusfont">
<h1 style="visibility:hidden">Example</h1>
<div>
<p>
<label class="btn" for="modal-1"><i class="fa fa-circle" id="module-circle"></i> Example1</label>
</p>
</div>
<input class="modal-state" id="modal-1" type="checkbox" />
<div class="modal">
<label class="modal__bg" for="modal-1"></label>
<div class="modal__inner">
<label class="modal__close" for="modal-1"></label>
<h2>Heading</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam nec dui commodo, imperdiet mauris ac, molestie massa. Vivamus id leo eu ligula interdum dictum a in massa</p>
</div>
</div>
</section>
<section class="4u 6u$(medium) 12u$(small) cusfont" >
<!-- <div class="drivers-table2">
<div class="head-section1">
<h4><i class="fa fa-users"></i>Heading </h4>
</div>
<p class="batch">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam nec dui commodo, imperdiet mauris ac, molestie massa. Vivamus id leo eu ligula interdum dictum a in massa</p>
</div> -->
<div>
<p>
<label class="btn" for="modal-2"><i class="fa fa-circle" id="module-circle"></i> Example2</label>
</p>
</div>
<input class="modal-state" id="modal-2" type="checkbox" />
<div class="modal">
<label class="modal__bg" for="modal-2"></label>
<div class="modal__inner">
<label class="modal__close" for="modal-2"></label>
<h2>Heading</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam nec dui commodo, imperdiet mauris ac, molestie massa. Vivamus id leo eu ligula interdum dictum a in massa</p>
</div>
</div>
</section>
</div>
</section>
</div>
</section>
</div>
</section>
</div>
</section>
</td>
<td style="width: 10%;"></td>
</tr>
</table>
How can this page layout will be show mobile version only without refresh page using javascript.
mobile version only will show this page without refresh
You can use one of these coding languages (JS, .htaccess, PHP):
JS:
if (screen.width <= 699) {
document.location = "mobile.html";
}
Source: https://css-tricks.com/snippets/javascript/redirect-mobile-devices/ <= This might be the one your looking for.
.htaccess:
RewriteEngine On
# Check if this is the noredirect query string
RewriteCond %{QUERY_STRING} (^|&)noredirect=true(&|$)
# Set a cookie, and skip the next rule
RewriteRule ^ - [CO=mredir:0:%{HTTP_HOST},S]
# Check if this looks like a mobile device
# (You could add another [OR] to the second one and add in what you
# had to check, but I believe most mobile devices should send at
# least one of these headers)
RewriteCond %{HTTP:x-wap-profile} !^$ [OR]
RewriteCond %{HTTP:Profile} !^$
# Check if we're not already on the mobile site
RewriteCond %{HTTP_HOST} !^m\.
# Check to make sure we haven't set the cookie before
RewriteCond %{HTTP:Cookie} !\smredir=0(;|$)
# Now redirect to the mobile site
RewriteRule ^ http://m.example.org%{REQUEST_URI} [R,L]
Source: Mobile Redirect using htaccess <= This is a little complex but, it works
PHP:
<? if (
stristr($ua, "Windows CE") or
stristr($ua, "Mobile") ) {
$DEVICE_TYPE="MOBILE";
}
if (isset($DEVICE_TYPE) and $DEVICE_TYPE=="MOBILE") {
$location='YOUR-MOBILE-SITE.com/index.php';
header ('Location: '.$location);
exit;
}
?>
http://www.designyourway.net/blog/resources/detecting-and-redirecting-mobile-users/ <= Just an extra.
Good Luck!
-EDIT-
Well, i will update my question according to my progres wich you can see here: http://piscolabis.info/licht/job_single.html
My only problem now is that the background images are not seen in the iphone!!!
HTML CODE
<body class="job_single">
<div id="contenedor">
<div id="head" class="section"><img src="img/logo_small.png" alt="lich-t" id="logo_small" /><h3>JOBS</a></h3></div>
<div id="contenido">
<div id="panel" class="left">
<div id="heading">
<h1>PRODUCER FEIHER / PRODUCER</h1>
</div>
<div id="information">
<p>Duselheimer habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam.</p>
</div>
</div>
<div id="panel" class="right">
<ul class="right visible">
<li id="pink">
<a href="#">
<span class="liLeft"></span>
<span class="liRight">
<h2>BENEDIKT / HOCKTE</h2>
<p>3D - Artist</p>
</span>
</a>
</li>
<li id="orange">
<a href="#">
<span class="liLeft"></span>
<span class="liRight">
<h2>BEN SIEGLER</h2>
<p>Creative Director</p>
</span>
</a>
</li>
<li id="blue">
<a href="#">
<span class="liLeft"></span>
<span class="liRight">
<h2>ANDREAS FUS </h2>
<p>Asaberquépone</p>
</span>
</a>
</li>
</ul>
</div>
</div>
</div>
</body>
CSS CODE
.visible{display:block !important;position:relative;}
.job_single #panel.left,
.job_single #panel.right{
margin-top:50px;
}
#panel.left{
float:left;width:50%;
}
#panel.left #heading{
float:left;
background:#000;
padding:20px;
font-size:40px;
line-height:40px;
}
#panel.left #information{
float:left;
margin-top:20px;
background:url(../img/bg_black_alpha.png);
font-size: 30px; line-height:30px;
padding:20px;
}
#panel.left #information, #panel.left #heading{
padding-left:30px;
color:#fff;
}
#panel.right{
width:40%;
clear:none;
float:right;
}
.job_single #panel.right ul.visible{margin-top:50px}
#panel.right ul.visible li{
margin-top:20px;
}
#panel.right ul.visible li,#panel.right ul.visible li a{width:95%;height:90px;float:right;}
#panel.right ul.visible li a{
background:black;
border-right:10px solid yellow;
}
#panel.right ul.visible li a span.liLeft{
width:95px;
float:left;height:100%;display:block;
position:relative;
right:40px;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
z-index:10;
}
#panel.right ul.visible li a span.liRight{
background:black !important;
color:#fff;
}
#panel.right ul.visible li a span.liRight{
z-index:9;
}
#panel.right ul.visible li#blue a{
border-color:#0C7CC3;
}
#panel.right ul.visible li#pink a{
border-color:#C21B7B;
}
#panel.right ul.visible li#orange a{
border-color:#E83B35;
}
#panel.right ul.visible li#blue a span.liLeft{
background-image:url(../img/azul.png);
}
#panel.right ul.visible li#pink a span.liLeft{
background-image:url(../img/rosa.png);
}
#panel.right ul.visible li#orange a span.liLeft{
background-image:url(../img/naranja.png);
}
#panel.right ul.visible li a span.liRight h2{
font-size:30px;
margin-top:10px;
}
#panel.right ul.visible li a span.liRight p{
font-size:30px;
margin-top:5px;
}
Any thoughts about the images??
As I edited the full question, please note that this file will only be used in iphone,
I am doing the landscape view now i will do the portrait later on (only editing the right propertie of .visible)
use mediaqueries to detect orientation
/* Portrait */
#media screen and (max-width: 320px)
{
body {display: none;}
}
/* Landscape */
#media screen and (min-width: 321px)
{
body {display: none;}
}
combined with
<meta name="viewport" content="width=device-width, initial-scale=1.0">
I'm having some difficulty getting my website to display properly when viewed on the iPhone and iPad. The webiste (not even close to being finished) is
www.lzkconcepts.com.
The website displays properly when viewed on every desktop browser I've tried (safari, chrome, firefox, IE), however, on the iPhone/iPad there is a tiny gap/space between the "content" div and header and footer. I'm using a background image in the header, content, and footer divs to create the outline of the page. In addition to the gaps between the divs, the content background image is sometimes "shrunk" a little, so that it doesn't line up with the header and footer on the right side of the screen. If I zoom in though, everything lines up perfectly. Here's a screenshot taken from the iPhone...
http://s1139.photobucket.com/albums/n545/lhkimbrough/?action=view¤t=7198e49b.jpg&evt=user_media_share
Look closely at the right side below the blue navigation bar.
Here's the CSS (I know it's very rough, I'm just learning)
#charset "UTF-8";
body {
margin: 0;
padding: 0;
color: #000;
font-family: Arial, Helvetica, sans-serif;
font-size: 100%;
line-height: 1.4;
background-color: #CCC;
}
.TableAppName {
color: #007EB4;
}
/* ~~ Element/tag selectors ~~ */
ul, ol, dl { /* Due to variations between browsers, it's best practices to zero padding and margin on lists. For consistency, you can either specify the amounts you want here, or on the list items (LI, DT, DD) they contain. Remember that what you do here will cascade to the .nav list unless you write a more specific selector. */
padding: 0;
margin: 0;
}
h1, h2, h3, h4, h5, h6, p {
margin-top: 0; /* removing the top margin gets around an issue where margins can escape from their containing div. The remaining bottom margin will hold it away from any elements that follow. */
padding-right: 15px;
padding-left: 15px; /* adding the padding to the sides of the elements within the divs, instead of the divs themselves, gets rid of any box model math. A nested div with side padding can also be used as an alternate method. */
}
a img { /* this selector removes the default blue border displayed in some browsers around an image when it is surrounded by a link */
border: none;
}
/* ~~ Styling for your site's links must remain in this order - including the group of selectors that create the hover effect. ~~ */
a:link {
color: #42413C;
text-decoration: underline; /* unless you style your links to look extremely unique, it's best to provide underlines for quick visual identification */
}
a:visited {
color: #6E6C64;
text-decoration: underline;
}
#h-navbar {
font-size: 95%;
background-color: #CCC;
background-image: url(images/navBarBlue.png);
background-repeat: no-repeat;
text-align: right;
padding-right: 20px;
color: #FFF;
height: 39px;
padding-top: 6px;
}
a:hover, a:active, a:focus { /* this group of selectors will give a keyboard navigator the same hover experience as the person using a mouse. */
text-decoration: none;
}
/* ~~ this fixed width container surrounds the other divs ~~ */
.container {
width: 874px; /* the auto value on the sides, coupled with the width, centers the layout */
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
background-color: #CCC;
}
/* ~~ the header is not given a width. It will extend the full width of your layout. It contains an image placeholder that should be replaced with your own linked logo ~~ */
.header {
background-color: #CCC;
background-image: url(images/BannerFadedBlueAndOrangeText.png);
background-repeat: no-repeat;
height: 165px;
}
/* ~~ This is the layout information. ~~
1) Padding is only placed on the top and/or bottom of the div. The elements within this div have padding on their sides. This saves you from any "box model math". Keep in mind, if you add any side padding or border to the div itself, it will be added to the width you define to create the *total* width. You may also choose to remove the padding on the element in the div and place a second div within it with no width and the padding necessary for your design.
*/
.content {
background-color: #CCC;
background-image: url(images/contentFadedDark4.png);
background-repeat: repeat-y;
padding-left: 15px;
}
.contentBottom {
padding: 0px;
margin: 0px;
}
/* ~~ The footer ~~ */
.footer {
background-color: #CCC;
background-image: url(images/FooterFadedDark.png);
background-repeat: no-repeat;
text-align: right;
font-size: 80%;
}
/* ~~ miscellaneous float/clear classes ~~ */
.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
float: right;
margin-left: 8px;
}
.fltlft { /* this class can be used to float an element left in your page. The floated element must precede the element it should be next to on the page. */
float: left;
margin-right: 8px;
}
.clearfloat { /* this class can be placed on a <br /> or empty div as the final element following the last floated div (within the #container) if the #footer is removed or taken out of the #container */
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}
#h-navbar a, #h-navbar a:visited {
text-decoration: none;
color: #FFF;
}
#h-navbar a:hover {
color: #ea6828;
}
.footer p {
color: #0075A7;
}
.content h1 {
color: #0074A9;
font-weight: normal;
font-size: 200%;
font-style: normal;
padding-top: 15px;
padding-left: 23px;
}
.graytext {
color: #333;
}
And here's the HTML
<!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"><!-- InstanceBegin template="/Templates/LZKConcepts_Template.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!-- InstanceBeginEditable name="doctitle" -->
<title>LZK Concepts</title>
<!-- InstanceEndEditable -->
<link href="LZKConcepts_styles.css" rel="stylesheet" type="text/css" />
<!-- InstanceBeginEditable name="head" -->
<!-- InstanceEndEditable -->
</head>
<body>
<div class="container">
<div class="header"><!-- end .header --></div>
<div id="h-navbar"> Home | QuickGrader | Wish On A Star | About Us | Contact Us </div>
<!-- InstanceBeginEditable name="MainContent" -->
<div class="content">
<h1>
<!-- end .content -->
iPhone Apps</h1>
<table width="844" border="0">
<tr>
<td width="160" rowspan="2" valign="top"><img src="images/QuickGraderIconReflected140.png" alt="QuickGrader" width="120" height="154" hspace="20" /></td>
<td width="482" class="TableAppName">QuickGrader</td>
<td width="188"> </td>
</tr>
<tr>
<td height="127" valign="top" class="graytext">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris neque quam, facilisis sed iaculis tempor, iaculis vitae purus. Mauris eros lacus, commodo ut feugiat vel, sollicitudin et elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur urna diam, iaculis ut commodo molestie, congue non lacus. </td>
<td align="right" valign="top"><br />
<img src="images/App_Store_Badge.png" alt="AppStore" width="155" height="54" hspace="18" vspace="0" align="right" /></td>
</tr>
</table>
<p> </p>
<table width="844" border="0">
<tr>
<td width="160" rowspan="2" valign="top"><img src="images/Wish On A Star Reflected.png" alt="QuickGrader" width="120" height="154" hspace="20" /></td>
<td width="482" class="TableAppName">Wish On A Star</td>
<td width="188"> </td>
</tr>
<tr>
<td height="130" valign="top">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris neque quam, facilisis sed iaculis tempor, iaculis vitae purus. Mauris eros lacus, commodo ut feugiat vel, sollicitudin et elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur urna diam, iaculis ut commodo molestie, congue non lacus. </td>
<td align="right" valign="top"><br />
<img src="images/App_Store_Badge.png" alt="AppStore" width="155" height="54" hspace="18" align="right" /></td>
</tr>
</table>
<p> </p>
<table width="844" border="0">
<tr>
<td width="160" rowspan="2" valign="top"><img src="images/Wish On A Star Free Reflected.png" alt="QuickGrader" width="120" height="154" hspace="20" /></td>
<td width="482" class="TableAppName">Wish On A Star Free</td>
<td width="188"> </td>
</tr>
<tr>
<td height="130" valign="top">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris neque quam, facilisis sed iaculis tempor, iaculis vitae purus. Mauris eros lacus, commodo ut feugiat vel, sollicitudin et elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur urna diam, iaculis ut commodo molestie, congue non lacus. </td>
<td align="right" valign="top"><br />
<img src="images/App_Store_Badge.png" alt="AppStore" width="155" height="54" hspace="18" align="right" /></td>
</tr>
</table>
</div>
<!-- InstanceEndEditable -->
<div class="footer">
<p><br />
<br />
<br />
Copyright © 2010, LZK Concepts. All rights reserved.</p>
</div>
<!-- end .container --></div>
</body>
<!-- InstanceEnd --></html>
Does anyone have an idea why the iPhone and iPad are rendering the page like this?
On an iPad, when a website is viewed at a scale under 100%, some artefacts appear sometimes. One is particularly visible: a 1 pixel lines between divs, just like on your site, under the menu.
The solution I found is to add a "margin: -1px" between divs. Divs backgrounds overlap with 1 pixel, and if slicing is done accordingly, its invisible for a classic browser, and corrects the problem on the iPad.
Use:
meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"
for when a website is being displayed on a tablet or other device. That should get rid of the pixel difference you see. Sites should be designed semantically scalable these days for maximum cross device access.
As for me, I normally build a php device detecter if there absolutely needs to be a work around.