I have an iframe that fits in the page on google chrome but when I open it in IE10 it is as if the entire page has been zoomed in
Here is an example of chrome
and here is explorer
below is my code
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Fastlane Autosales</title>
<link href="http://fonts.googleapis.com/css?family=Oswald:400,300" rel="stylesheet" type="text/css" />
<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<style>
body {width:100%; height:100%; overflow:hidden, margin:0}
html {width:100%; height:100%; overflow:hidden}
#size {width: 900px; height: 800px; display: block;}
</style>
<body>
<div id="wrapper1">
<div id="menu-wrapper">
<div id="menu" class="container">
<ul>
<li>Homepage</li>
<li class="current_page_item">Inventory</li>
<li>Financing</li>
<li>Contact Us</li>
</ul>
</div>
</div>
</div>
<div style="position: absolute; top: 50%; left: 20px; margin-top: -360px">
<iframe id = "size" frameborder="0" scrolling="yes" marginheight="0" marginwidth="0" style="background-color:#E6E6E6" src="http://listings2011.boostmotorgroup.com/Search.aspx?DealershipID=4075&isLogo=0&MediaID=36"></iframe>
</div>
</body>
Related
So I have a probably really dumb question but I'm very new to coding.
I want to be able to resize and center my logo image (which is currently taking up the whole page on preview) but I've tried so many different ways of resizing in CSS and nothing at all happens. What am I missing??
Besides the standard beginning of HTML file this is all I have in my HTML file:
<div class="header">
<img class="logo" src="images/logo.png" alt="\Stuff logo">
</div>
These are the only lines I have in my CSS file:
body {
margin: 0 auto;
}
.logo {
max-width: 20%;
max-height: 20%;
}
img{
display:block;
margin:0 auto;
width:10%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div class="header">
<img src="https://images.unsplash.com/photo-1575881875475-31023242e3f9?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxleHBsb3JlLWZlZWR8Mnx8fGVufDB8fHx8&w=1000&q=80" alt="">
</div>
</body>
</html>
Im using openfl and trying to use a webfont in the nmepreloader class.
I cant seem to get it to work even though I have the style sheet and index set up properly I think.
Here is my fontSyle.css
/* * * * FONTS * * * */
#font-face {
font-family: 'Futura PT';
src: url( 'assets/fonts/FuturaPT.woff' );
}
#font-face {
font-family: 'Futura Bold PT';
src: url( 'assets/fonts/FuturaBoldPT.woff' );
}
and my index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="utf-8">
<meta name="HandheldFriendly" content="true" />
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<meta id="viewport" name="viewport" content="initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, width=device-width, user-scalable=no" />
<link rel="stylesheet" type="text/css" href="fontStyle.css" />
<link rel="stylesheet" type="text/css" href="gameStyle.css" />
</head>
<body>
<script src="//ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js"></script>
<script>
WebFont.load( {
custom: {
families: ['Futura PT, Futura Bold PT'],
urls:['./fontStyle.css']
}
} );
</script>
<div id="mainContainer" style="">
<div id="unacceleratedDiv" style="background-color: #030C22; width: 100%; height: 100%; position: absolute;" data-framerate="60">
<canvas width="0" height="0" id="unacceleratedCanvas" style="position: absolute; left: 0px; top: 0px; -webkit-transform-origin: 0px 0px; opacity: 1;">
</canvas>
</div>
<div id="haxe:openfl" style="background-color: #030C22; width: 100%; height: 100%" data-framerate="60"></div>
</div>
<div id="iOS7HelperContainer" style="opacity: 0.7; visibility: hidden;">
<div id="iOS7HelperOverlay" style="background: '' "></div>
</div>
<div id="noPortrait" class="BadOrientation BadOrientation--Portrait" style="visibility: hidden; background-size: contain;"></div>
<div id="noLandscape" class="BadOrientation BadOrientation--Landscape" style="visibility: hidden; background-size: contain;"></div>
<script type="text/javascript" src="./pixi.min.js"></script>
<script type="text/javascript" src="./iOS7HelperOverlay.js"></script>
<script id="haxe:openfl:script" type="text/javascript" src="./JourneyToTheWest.js"></script>
</body>
</html>
How can I use these fonts inside of the preloader.
I'm fighting with this problem:
I have iframe in which I'm showing website, which has some html structure. And inside this structure is element, which has css property: height: 100%;
Problem is, that element stretch to iframes full height, anyway it shouldn't I think. Could you give me some idea, how to solve this problem?
Here is source code for iframe content:
<html>
<head>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="https://raw.githubusercontent.com/daneden/animate.css/master/animate.css" />
<link rel="stylesheet" href="https://www.zeerat.com/assets/front/styles/swiper.css" />
<link rel="stylesheet" href="https://www.zeerat.com/assets/front/styles/style.css" />
<link rel="stylesheet" href="https://www.zeerat.com/assets/front/styles/grid.css" />
</head>
<body>
<div id="overview">
<div class="overview slider swiper-container swiper-container-horizontal">
<div class="swiper-wrapper">
XXX
</div>
</div>
</div>
<div id="benefits">
<div class="grid">
<article id="article1" class="clearfix">
<div class="text col right">
<h2>People behavior in one picture</h2>
</div>
</article>
</div>
</div>
</body>
</html>
Here is source code, where I put an iframe:
<!DOCTYPE html>
<html lang="cs" dir="ltr">
<head>
<meta charset="UTF-8">
<title>Titulek stránky</title>
</head>
<body>
<iframe src="iframe.html" width="1600" height="4000"></iframe>
</body>
</html>
Thank you very much for you help.
On the child page (the page inside the iframe) will be shown starting from the top left corner, so positioning the child page is usually not necessary. The styling of the iframe's dimensions on the parent page determines how much of the child page will be seen. The easiest and most effective way is to make the iframe responsive (able to adapt to changes of screen sizes and/or window)
<!DOCTYPE html>
<html lang="cs" dir="ltr">
<head>
<meta charset="UTF-8">
<title>Titulek stránky</title>
</head>
<body>
<iframe src="iframe.html" width="100%" height="100%" style="position: absolute; top:0; left:0; right:0; bottom: 0; width: 100%; height: 100%;overflow: hidden; overflow-x: hidden; overflow-y: hidden;" allowfullscreen webkitallowfullscreen mozallowfullscreen ></iframe>
</body>
</html>
Trying to write a mobile web page, but it doesn't take the full screen on the emulated mobile page (neither on my LG Pro mobile phone). Any reason why?
<!DOCTYPE html><!--HTML5 doctype-->
<html>
<head>
<title>Your New Application</title>
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, minimum-scale=1.0">
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<style type="text/css">
/* Prevent copy paste for all elements except text fields */
* { -webkit-user-select:none; -webkit-tap-highlight-color:rgba(255, 255, 255, 0); }
input, textarea { -webkit-user-select:text; }
body { background-color:white; color:black }
</style>
<link type="text/css" rel="stylesheet" href="http://fonts.googleapis.com/css?family=Pacifico" />
<script src="http://dbushell.github.io/Responsive-Off-Canvas-Menu/js/modernizr.js"></script>
<!--[if (gt IE 8) | (IEMobile)]><!-->
<link rel="stylesheet" href="http://dbushell.github.io/Responsive-Off-Canvas-Menu/css/step4.css">
</head>
<body style="position:absolute; top:0; bottom:0; height=100%">
<!-- content goes here-->
<div id="outer-wrap" style="position:absolute; top:0; bottom:0; height=100%">
<div id="inner-wrap" style="position:absolute; top:0; bottom:0; height=100%">
<header id="top" role="banner">
<div class="block">
<h1 class="block-title">List</h1>
<a class="nav-btn" id="nav-open-btn" href="#nav">Book Navigation</a>
</div>
</header>
<nav id="nav" role="navigation">
<div class="block">
<h2 class="block-title">Chapters</h2>
<ul>
<li class="is-active">One</li>
<li>
Two
</li><!--
--><li>
Three
</li><!--
--><li>
Four
</li><li>
Five
</li>
<li>Six</li>
<li>Seven</li>
<li>Eight</li>
<li>Nine</li>
</ul>
<a class="close-btn" id="nav-close-btn" href="#top">Return to Content</a>
</div>
</nav>
<div id="main" role="main" style="height=100%">
<article class="block prose">
<h1>Welcome To John's recollection</h1>
Wonderful things in life
</article>
</div>
<footer role="contentinfo">
<div class="block prose">
<p class="small">Copyright © John & Joe</p>
</div>
</footer>
</div>
<!--/#inner-wrap-->
</div>
<!--/#outer-wrap-->
<script src="http://dbushell.github.io/Responsive-Off-Canvas-Menu/js/main.js"></script>
<script>
// When ready...
window.addEventListener("load",function() {
// Set a timeout...
setTimeout(function(){
// Hide the address bar!
window.scrollTo(0, 1);
}, 0);
});
</script>
</body>
</html>
First of all you got some typos that you need to fix:
Take a look at body style attribute (height value), you wrote:
<body style="position:absolute; top:0; bottom:0; **height=100%"**>
But you need:
<body style="position:absolute; top:0; bottom:0; **height:100%"**>
First fix those kind of typos on page.
ONE BIG MISTAKE is to make your "body" absolute. Please take a look at how positioning really works.
http://www.w3schools.com/css/css_positioning.asp
To fix this, remove from "body" positioning at all. And make another element(div in your case), that will be positioned absolute, if you really need that.
For more help, try to make some live example of your project so we can inspect it better.
Without seeing what you done in CSS we can't be sure that this answer will fix your problem.
But it looks like you misunderstand concept of positioning, and over complicated your DOM and CSS.
use this meta tags :
<meta content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
and for responsive design YOU should use Media queries in your css
Media query is an easy way like this css code :
#media screen and (max-width:600px){
#bgimg1{display:none}
#bgimg{display:block}
.usertext{font-size:30px;}
.no_order2{font-size:20px;margin:auto 20%;margin-top:35%;}
#show-time{left:-15%;}
}
you can use !important to run your new codes over previous code
Thanks to the help of mehdi and Zlatko Vujicic, created a hack which appears to serve the purpose. The change? Moved footer to the immediate parent div of , use the idea of sticky css (thanks Zlatko Vujicic) to extend the height of the above mentioned div.
<!DOCTYPE html><!--HTML5 doctype-->
<html>
<head>
<title>Your New Application</title>
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<style type="text/css">
/* Prevent copy paste for all elements except text fields */
* { -webkit-user-select:none; -webkit-tap-highlight-color:rgba(255, 255, 255, 0); }
input, textarea { -webkit-user-select:text; }
body { background-color:white; color:black }
.wrapper1 {
min-height: 100%;
height: auto !important;
/*height: 100%;*/
margin: 0 auto -4em;
}
</style>
<link type="text/css" rel="stylesheet" href="http://fonts.googleapis.com/css?family=Pacifico" />
<script src="http://dbushell.github.io/Responsive-Off-Canvas-Menu/js/modernizr.js"></script>
<!--[if (gt IE 8) | (IEMobile)]><!-->
<link rel="stylesheet" href="http://dbushell.github.io/Responsive-Off-Canvas-Menu/css/step4.css">
<style type="text/css">
#media screen and (max-width:600px{
#bgimg1{display:none}
#bgimg{display:block}
.usertext{font-size:30px;}
.no_order2{font-size:20px;margin:auto 20%;margin-top:35%;}
#show-time{left:-15%;}
}
</style>
</head>
<body style="position:absolute; top:0; bottom:0; height:100%">
<!-- content goes here-->
<div id="outer-wrap" style="position:absolute; top:0; bottom:0; height:100%">
<div id="inner-wrap" style="position:absolute; top:0; bottom:0; height:100%">
<header id="top" role="banner">
<div class="block">
<h1 class="block-title">List</h1>
<a class="nav-btn" id="nav-open-btn" href="#nav">Book Navigation</a>
</div>
</header>
<nav id="nav" role="navigation">
<div class="block">
<h2 class="block-title">Chapters</h2>
<ul>
<li class="is-active">One</li>
<li>
Two
</li><!--
--><li>
Three
</li><!--
--><li>
Four
</li><li>
Five
</li>
<li>Six</li>
<li>Seven</li>
<li>Eight</li>
<li>Nine</li>
</ul>
<a class="close-btn" id="nav-close-btn" href="#top">Return to Content</a>
</div>
</nav>
<div id="main" role="main" class="wrapper1">
<article class="block prose">
<h1>Welcome To John's recollection</h1>
Wonderful things in life
<footer role="contentinfo" style="height: 4em; position: fixed; bottom: 0; width: 100%">
<p align="center" class="small" style="position: relative; top: 40%">Copyright © John & Joe</p>
</footer>
</article>
</div>
</div>
<!--/#inner-wrap-->
</div>
<!--/#outer-wrap-->
<script src="http://dbushell.github.io/Responsive-Off-Canvas-Menu/js/main.js"></script>
<script>
// When ready...
window.addEventListener("load",function() {
// Set a timeout...
setTimeout(function(){
// Hide the address bar!
window.scrollTo(0, 1);
}, 0);
});
</script>
</body>
</html>
I am writing HTML for a page and have used bootstrap 3 as well. The page appears to be fine in FF, Chrome, IE9 but its not working properly in IE8, IE7.
Problem: The main content seems to be stretched fully across the page, i.e. behaves like fluid where as in other browsers works fine.
Things I have tried: As given in other forums, I tried including respond.js, meta tag as in below code ( "X-UA-Compatible" content="IE=edge"), HTML5shiv but nothing seems to work. I read that bootstrap 3 doesnt support IE7 officially but even IE8 gives this problem. It looks like the container class is not applied to IE8/7.
Can anyone please help on this? Below is the HTML for that. Also, its on fiddle - http://jsfiddle.net/CPaDb/2/
Code
<!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" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<link rel="stylesheet" type="text/css" href="css/main.css"/>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<div class="logo-cont">
<a href="home.html" class="logo-link></a>
</div>
<div class="main-cont">
<div class="site-box-cont">
<ul class="site-box-list clearfix">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
</div>
<script language="javascript" type="application/javascript" src="js/jquery-1.10.2.min.js"></script>
<script language="javascript" type="application/javascript" src="js/bootstrap.min.js"></script>
<script language="javascript" type="application/javascript" src="js/respond.min.js"></script>
</body>
</html>
CSS
.logo-cont {padding:35px 0 35px 250px;}
.logo-link {background:url(../images/logo.png) no-repeat; width:177px; height:59px; display:block; }
.main-cont {background:#2d3a42;}
.site-box-cont {width:670px; margin:0 auto; padding:150px 0}
.site-box-list li {float:left; margin:0px 15px 15px 0px;}
.site-box { width:150px; height:150px; display:inline-block; background:#fff; border-radius:25px;}
.site-box:hover {background:#acd037;}
There are a number of issued going on... among them, you're using the XHTML 1.0 doctype, instead of the HTML5 type; you're missing a closing quote mark on the "home.html" link.
Since JSFiddle is not compatible with IE8 testing, I can't post a JSFiddle demo. But I have IE8 and tested the following code in IE8, FF17 and Chrome 29. Let me know if you need anything further or have any questions.
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Bootstrap Sample</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<style type="text/css">
.logo-cont {padding:35px 0 35px 250px;}
.logo-link {background:url(../images/logo.png) no-repeat; width:177px; height:59px; display:block; }
.main-cont {background:#2d3a42;}
.site-box-cont {width:670px; margin:0 auto; padding:150px 0}
.site-box-list li {float:left; margin:0px 15px 15px 0px;}
.site-box { width:150px; height:150px; display:inline-block; background:#fff; border-radius:25px;}
.site-box:hover {background:#acd037;}
</style>
<script src="js/jQuery.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/respond.min.js"></script>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<div class="logo-cont">
</div>
<div class="main-cont">
<div class="site-box-cont">
<ul class="site-box-list clearfix">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
</div>
</body>
</html>