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!
Related
i have some issues with positioning my modal. I spend lot of time trying to swipe my modal component between other components to get better result but right now i don't really know how to fix it. I have a signup form and I want to trigger the modal in the center of the screen when user click on the button below. Problem is, modal is not opening in the center, its opening from position it was triggered.
I have to use absolute class because if I wont, modal is not overriding the page. Any suggestions?
Here is the modal code
import { Component, createSignal } from "solid-js";
const TermsModal = function () {
const [isOpen, setIsOpen] = createSignal(false);
return (
<div class="flex absolute justify-center">
<button
class="text-sm font-bold text-blue-500 uppercase focus:outline-none"
onClick={() => setIsOpen(true)}
>
Privacy Policy
</button>
{isOpen() && (
<>
<div
role="presentation"
class=""
onClick={() => setIsOpen(false)}
onKeyPress={(e) =>
(e.key || e.code) === "Escape" ? setIsOpen(false) : null
}
></div>
<section
role="dialog"
class=" p-4 text-center border-gray-200 rounded-lg shadow sm:p-8 bg-zinc-700"
>
<button aria-label="Close Dialog" onClick={() => setIsOpen(false)}>
× Close button
</button>
{/* Here starts modal content */}
<h1>Terms of Service</h1>
{/* Here ends modal content */}
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi
quaerat totam cumque hic voluptatum sit ratione itaque aspernatur,
possimus ex beatae quo repudiandae dignissimos iure eum
exercitationem labore, corrupti adipisci.
</p>
</section>
</>
)}
</div>
);
};
export default TermsModal;
And here is how i am calling a modal. Its inside the input form together with checkbox. (I also want to make it in one line, but failed)
<label class="text-white m-5 p-1">
<input type="checkbox" checked={false} onChange={handleCheck} />
I have read and agree to the <TermsModal />{" "}
</label>
That is probably because you are rendering the modal window as a child component of some element. You need to use Portal to render the modal window as a direct child of the body element so that it won't be affected by its parent's z-index or other css properties.
import { render, Portal } from "solid-js/web";
const style = `
border: 1px solid red;
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
display: flex;
flex-flow: column no-wrap;
align-items: center;
justify-content: center;
`
const Component = () => {
return <div style={style}>Inner Content</div>
};
const App = () => {
return <Portal mount={document.body}><Component /></Portal>;
};
render(() => <App />, document.body);
https://playground.solidjs.com/anonymous/13e0670c-79e3-4899-8ed0-151dd531e8c2
You can learn more about Portal:
https://www.solidjs.com/docs/latest#portal
https://www.solidjs.com/tutorial/flow_portal?solved
If you don't want to use a portal and don't need reactivity inside the modal window, you can use onMount hook to append the modal window to the body element and onCleanup to remove it.
import { batch, createSignal, onMount, onCleanup } from "solid-js";
import { render } from "solid-js/web";
const style = `
border: 1px solid red;
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
display: flex;
flex-flow: column no-wrap;
align-items: center;
justify-content: center;
`
const Component = () => {
const modal = document.createElement("div");
modal.innerHTML = "Some Content";
modal.setAttribute("style", style);
onMount(() => {
document.body.appendChild(modal);
});
onCleanup(() => {
document.body.removeChild(modal);
});
return null;
};
const App = () => {
return <Component />;
};
render(() => <App />, document.body);
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.
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 ! :)
-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.