My iframe a style of style="width:100%", and it almost covers the page width. But it leaves a small margin on the left and right side. So I added body { margin:0px; } to remove the space.
It works, but the problem is that removing the margin on <body> affects other things, for example a paragraph <p> inside <body>.
Is there a way to eliminate the margin only for the <iframe>?
Code:
<!DOCTYPE html>
<html>
<body>
<p> hello </p>
<iframe src="http://www.weather.com" style="width:100%; height:95%; margin:0px"></iframe>
</body>
</html>
You should do some like:
body{margin:0} // remove body margin
iframe{margin:0;width:100%}//remove iframe margin
p,div{margin:10px} //append margin to p and other tags
Demo for your case:
<!DOCTYPE html>
<html>
<head>
<style>
body{margin:0}
iframe{margin:0;width:100%}
p{margin:10px}
</style>
</head>
<body>
<p> hello </p>
<iframe src="http://www.weather.com" style="width:100%; height:95%; margin:0px"></iframe>
</body>
</html>
As you can see, you can use body{margin:0 0 0 0px;} for top, right, bottom, left. You will be able to remove all spaces from browser.
<!DOCTYPE html>
<html>
<style type="text/css">
body {
margin:0 0 0 0px;
}
</style>
<body>
<iframe src="http://www.weather.com" style="width:100%; height:95%; margin:0px"></iframe>
</body>
</html>
what's wrong with:
iframe {
margin: 0;
}
in your iframe containg page
Related
I have a textarea and a button. I wanted them to be placed in a same horizontal line from the bottom.But when I place them inline with no style applied It is displayed like this:
I am just unable to understand what is causing them to happen so?
Where is the extra margin coming from at the bottom of the text area?
And When I am doing the same thing with the form input they are okay as in the image 2:
So what is causing textarea to behave like this?
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
textarea,button
{
margin:0;
}
</style>
</head>
<body>
<div>
<textarea>textarea</textarea>
<button>Button</button>
</div>
</body>
</html>
Add vertical-align: bottom; to your style:
<style type="text/css">
textarea,button
{
vertical-align: bottom;
}
</style>
The issue is that setting them to inline elements messes with their vertical-alignment. The style will fix this issue.
I have made a simple web page. I can see no blank space when I open the website on safari, but on firefox, there is a gap that is probably 30px tall.
HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<body>
<div style="background-color: blue;">
<h1>hello</h1>
</div>
</body>
</html>
CSS:
body {
margin: 0;
}
You need to remove the margin on the heading as well. For example:
body, h1 {
margin: 0;
}
body, h1 {
margin: 0;
}
<div style="background-color: blue;">
<h1>hello</h1>
</div>
You could make it easy for yourself and reset all margins/paddings in your CSS (won't affect elements);
* {
margin:0;
padding:0;
}
Certain browsers will put margin around header tags. It's always a good idea to include a reset.css file on your site so that things appear how you want them to cross browsers.
Here's a simple reset.css file for you to include.
html code :
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link href="style/index.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<!-- div for box-->
<div id="panel"></div>
</body>
</html>
CSS used :
#panel
{
height:90px;
background-color:#CCC;
margin:0px;
padding:0px;
}
Output generateed: is a box with space left around it of 4-5pxs, and it does not cover full width.:
Expected output: with no spaces around it what i really want to do:
you need to clear the default margin that gets applied to the body. add:
body{
margin: 0;
}
I made a web page with the following code and viewed it in Google Chrome.
<html>
<head>
<style type="text/css">
html {padding:30px; background-color:blue;}
body {margin:0px; background-color:red;}
</style>
</head>
<body>
hello world
</body>
</html>
The result is what I expected, a red box with a 30 pixel blue border that fills the entire web browser window. However, when I view it in Firefox, the red box is only the height of one line-height. In IE8, there is no blue border.
How do I make Firefox and IE8 display the same thing as what I see in Google Chrome?
Additional notes I tried adding different doctype tags to the page, but that only made it appear like Firefox, that is, the 1 line-height of red.
For this I think you have to resort to absolute or relative positioning; otherwise, your height/margin combo will push the bottom blue line off the screen. This works cross browser for this simple case. Hopefully it works for your more complicated use case.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body { background:blue; }
.first{
position:absolute; /* fixed also works */
background:red;
top:30px;
left:30px;
right:30px;
bottom:30px;
}
</style>
</head>
<body>
<div class="first">hello world</div>
</body>
</html>
if i understand you correctly, set your html & body width to 100% , height 100%
http://jsfiddle.net/Diezel23/Lv6Vw/#base
You could add an additional div:
<html>
<head>
<style>
body {
padding: 30px;
margin: 0px;
}
div {
width: 100%;
height: 100%;
background-color: blue;
}
</style>
</head>
<body>
<div>
ABC
</div>
</body>
</html>
I have two html files, one contains the other with an iframe, and I want to make this iframe stretch over the full height of the parent html.
So the first html file (which has a red background) look like:
<!DOCTYPE html>
<html>
<body style="background-color: red; margin: 0px; padding: 0px;">
<iframe src="Blue.html" frameborder="0" scrolling="no" height="100%" width="100%" />
</body>
</html>
The second (which has a blue background):
<!DOCTYPE html>
<html>
<body style="background-color: blue;" />
</html>
If all things are correct I expect to see only a blue background, because the iframe should overlap the entire parent page, but I see only a strip of blue, and a whole lot of red..
With the HTML5 doctype <!DOCTYPE html> I cannot seem to be getting the correct result:
If I remove the HTML5 doctype I get the result I want. I think this is because it will render the HTML in quirks mode:
I do want the HTML doctype though, so how can I fix this? Thanks for looking!
CSS:
#wrap { position:fixed; left:0; width:100%; top:0; height:100%; }
#iframe { display: block; width:100%; height:100%; }
HTML:
<div id="wrap">
<iframe src="..." frameborder="0" id="iframe"></iframe>
</div>
Live demo: http://jsfiddle.net/5G5rE/show/