iframe to large on Mobile Safari (iPad).

A

Anonymous

Guest
I am working on a demo site. Can be found at http://chris122380.x10.mx/demo/. There is a iframe on the left side called ileft.
Code: 
#ileft {
	width: 450px;
	height: 600px;	
}

<iframe name="ileft" id="ileft" border="0" frameborder="0"></iframe>

It looks correctly on the desktop but on the iPad the iframe seems to open the full page of what it's linked to wish means the iframe thinks it's bigger on the iPad then it really is. I am going to run a HTML and CSS Validation to see what errors I get. Any help would be great. If you need all the code posted please let me know as I'd have to post the code in the post unable to upload attachments yet.
 
Validation checks were ok with no errors associated with this problem. Still having the problem with Safari iOS iPad having the iframe render to long.

I have switched from HTML5 (As there where no HTML5 elements needed) to HTML 4.0 Transitional and CSS3. No validation errors and still have the width of the iframe problem on a iPad.

I am also unsure were to put
Code: 
-webkit-overflow-scrolling:touch
 
My ileft iframe is now showing a Horizontal scroll bar for a page that has no further content to the right. I still haven't been able to get the iframe to work correctly on the iPad as the width is still going full page instead of the width. I have removed unneeded tables and divs.

index.php
Code: 
<?php
session_start(); //start session and list variables as session variables
$_SESSION['pdf'] = 'pdf'; 

?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html lang="en-us">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>Closeout System</title>
          
    <link href="style/style.css" rel="stylesheet" type="text/css">
	<style type="text/css">
	.h1_main {
		font-family: "Century Gothic";
		font-size: 40px;
		font-weight: bold;
		
	}
	</style>
</head>

<body>

<div id="body">





	<table style="width: 100%">
		<tr>
			<td><img alt="Manuals Access Logo" src="images/MA-Logo-Web.png" width="80" height="61"></td>
			<td class="h1_main">Closeout System</td>
		</tr>
	</table>

<br>

	<div id="menu">
			  <?php include_once("menu_template.php"); ?>
		</div>
				
					
					<iframe name="ileft" id="ileft" frameborder="0"></iframe>
				
								
					<iframe src="http://www.w3schools.com" id="info" name="info_frame" scrolling="no" frameBorder="0"></iframe>
					<img alt="" src="images/key.jpg" id="key" >					
					
					
						<p id="docview">Document View</p>
								
		
					<iframe name="pdf" frameborder="0" id="pdf"></iframe>
					
					
<div></div> 

</div> 


</body>
</html>

style.css
Code: 
* {
    margin: 0px;
    padding: 0px;
    
}

html,body{
    height: 100%
}

body {
background-color:#7E93C3
}

#body {
	background-color: #FFD320;
	margin: 0px auto 0px auto;
	width: 1024px;
	height: 100%; /* 800px default */;
	margin: 0px auto 0px auto;
	position: relative;
	top: 0px;
	left: 0px;
	bottom: 0px; 
}

h1 {
	text-align: center;
	font-size: 40px;
}


#menu {
	width: 200px;
	text-align: center;
}

#menu a {
	border: #666 1px solid;
	border-bottom:none;
	padding-top: 8px;
	padding-bottom: 1px;
	padding-left: 8px;
	padding-right: 8px;
	text-decoration:none;
}

#menu a:hover {
	background-color:orange;
	
}

myButtons {
	background-color: #036;
	color: #FFF;
}

myActiveButton {
	background-color: #BAE4FE;
	color: #000;
}

#bodyContainer {
	height: 664px;
	width: 513px;
	border: #666 1px solid;
	background-color:aqua;
}

#bodyContentContainer {
	padding:0px;
	left: 0px; 
	bottom: 0px;
	right: 0px;
	
}

#ileft {
	position:absolute;
	height: 600px;	
}

#pdf {
	background-color: green;
	position: absolute;
	
	right: 0px;
	width: 505px;
	height: 375px;
	margin: 0px;
	top: 400px;
	
	
}

#docview {
	position:absolute;
	top: 368px;
	left: 518px;
}

#info {
	position: absolute;
	top: 165px;
	right: 25px;
	left: 535px;
	height: 200px;
	width: 300px;
		
	}
	
#key {
	position: absolute;
	width: 18%;
	right: 0px;
	top: 165px;
}
 
can use @media only screen css to format based on display size. here's a good link for usage and sizes for different devices. http://css-tricks.com/snippets/css/media-queries-for-standard-devices/ i've used that technique on several sites, but most often on wordpress sites to hide side bar content when viewed on mobile devices.
 
You must log in or register to reply here.
Back
Top