I have a design which needs two background images and must work in IE. So I decided to place 1 image on the html tag and the other on the body tag. So my page looks like this
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Untitled Document</title>
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />
</head>
<body>
<p>Lorem...</p>
</body>
</html>
Then a very basic css like so
html { background:url(../img/bg.jpg) top center no-repeat #0094d4; margin:0; padding:0; }
body { background:url(../img/bgRep.png) repeat-x; margin:0; padding:0; }
The only browser to render this correctly is IE7. Opera, Chrome, FF all place a ~20px margin at the top. I can remove this margin by adding some hackity css like so:
html { background:url(../img/bg.jpg) top center no-repeat #0094d4; position:relative; }
body { background:url(../img/bgRep.png) repeat-x; margin:0; padding:0; top:0; position:absolute; width:100%; }
However why does it not work to begin with, why do I need the extras? Is it a bug or a bug by design?
EDIT: It does appear to be a bug. When I remove the <p> tags then it acts correctly however with them it does not.
Instead of using a margin for the <p>, use padding instead.
And as someone mentioned above, it is caused by collapsing margins.
Related
I cannot seem to remove the spacing between the top of the page and the <div> in this example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Index</title>
<style type="text/css">
html, body{
padding: 0;
margin: 0;
}
#container{
background-color: #808080;
}
</style>
</head>
<body>
<div id="container">
<div id="inner-container">
<h3>Index</h3>
</div>
</div>
</body>
</html>
I have narrowed it down to this line:
<!DOCTYPE html>
It seems removing this aligns the <div> to the top of the page. I can't see a way in CSS to achieve the same thing.
remove the margin from your <h3> as well
h3 { margin-top: 0 }
DEMO
Margins collapse into each other.
The top margin of html (0), body (0), #container (0), and h3 (not 0) merge into a combined non-zero top margin between the first content and the edge of the window.
Set h3 { margin-top: 0 } to remove it.
(Although you should start your document with a heading (h1) not a sub-sub-heading (h3).)
Actually Default Margin Of H1 to H6 is the problem you are facing so overriding this value will solve your problem.
h3 { margin-top: 0;margin-bottom: 0; }
Extra Info:
You also might want to look into using a CSS reset script before starting a project so you don't have to worry about little things like this.
Below is a simple code in which I have implemented multiple background images to body, but this code does not work in IE 7 and 8 whereas it works in all other browsers. I have used PIE.htc which is relative to the html document,but still no success. Please help me to solve this example.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body style="background: url(header_top_border.png) repeat-x, url(bg_1px.jpg) repeat-x; behavior: url(http://localhost/mutliple_bg/PIE.htc);
-pie-background:url(header_top_border.png) repeat-x, url(bg_1px.jpg) repeat-x; position:relative; zoom:1; z-index:1;">
</body>
</html>
Sorry hasty read of your question, just noticed your using pie.
PIE doesn't support multiple backgrounds on BODY element;
Solution: create div container for body.
Multiple backgrounds are only supported by IE9 and above.
use div positionrelative and absolute
i think this is the easy way to fix cross browser problem hope it help...
click here for working fiddle
html
<div class="parent">
<div class="colorLeft"></div>
<div class="contentArea"></div>
</div>
css
.parent {
float:left;
width:100%;
height:200px;
background-color:#555;
position:relative;
z-index:1;
}
.colorLeft {
width:50%;
float:left;
height:200px;
background-color:blue;
position:absolute;
z-index:-1;
}
.contentArea {
width:400px;
background-color:#fff;
height:180px;
margin:10px auto;
}
We have a base style sheet for a mobile web app where we have html and body set to overflow-x:hidden to prevent any horizontal scrolling.
However on 1 page, we have an iframe that opens external sites, some of which are not necessarily mobile optimized, so we want to allow horizontal scrolling.
I thought I could just override the overflow-x:hidden, with overflow-x:auto !important, but it doesn't work. The only way I can make it work is remove all notion of overflow-x, and the scrolling works fine. It also works as expected in Safari + Chrome.
Any ideas?
<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Strict//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd\">
<html xmlns=\"http://www.w3.org/1999/xhtml\" xml: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; maximum-scale=1.0; user-scalable=no;" />
<style>
/* Styles from existing style sheet */
html, body {
position:relative;
height:100%;
width:100%;
padding:0;
margin:0;
overflow-x:hidden;
}
/* Overrides */
html, body{
width:auto !important;
height:auto !important;
overflow-x:auto !important;
}
</style>
</head>
<body>
<iframe src="http://starbucks.com"></iframe>
</body>
</html>
Tried overflow-x: visible; instead? Also I don't believe the !importants are necessary.
This is an embarrassingly basic problem, but I've been wracking my brains trying to find the solution and finally the frustration got too much for me...
All I'm trying to do is center a website in IE7. It works fine in Firefox, Safari, IE8, and Chrome. Just not IE7:
#container
{
margin:0 auto;
width:1035px;
}
I just can't see how this can go wrong. I've tried strict and transitional doctypes, I've also put the body in a text-align:center (makes no difference).
Any advice on this matter would be gratefully received.
Ok, here's (some of the) surrounding code:
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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="css/styles.css" media="screen" />
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="css/ie6.css" />
<![endif]-->
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="css/ie7.css" />
<![endif]-->
<!--[if IE 8]>
<link rel="stylesheet" type="text/css" href="css/ie8.css" />
<![endif]-->
</head>
<body>
<div id="container">
<div id="content-container">
<div id="content">
/* content */
</div>
</div>
</div>
</body>
</html>
CSS (main):
html,body
{
text-align: center;
background-color:#F8F5EF;
height:100%;
margin:0;
padding:0;
width:100%;
}
#container
{
margin: 0 auto;
width:1100px;
}
#content-container
{
float: left;
width: 1100px;
background-image:url('../images/BG1.gif');
background-repeat:no-repeat;
background-position:0px 0px;
}
#content
{
float: left;
width: 778px;
padding: 15px 0px 80px 15px;
margin: 0 0 60 0px;
}
The IE7.css file doesn't modify those items.
Thanks!
G
Without posting your surrounding HTML/CSS we can't really help, as this code works in all IE (just tested)
Live Example
Which leads me to believe you have something affecting the styles. If you can show that or provide a link, I think more help can be provided.
Here is the CSS used:
#content {
width: 100px;
margin: 0 auto;
border: 1px dashed red;
}
HTML used:
<div id="content">
content here
</div>
Updated code, using your css/html provided:
http://jsfiddle.net/hyVjs/2/
This code is fine. One of your sub css files is messing you up :)
Have you tried removing your conditional css files and see if it still isn't working?
Make sure you have set the DOCTYPE. If not IE will enable quirk "dirty mode"
text-align is for aligning text...
in ie7 make sure you have given the parent container a width other than auto then all should be well.
You could try doing this for your container:
#container {
position: absolute;
margin:0 0 0 50%;
width:1100px;
left: -550px; /*half the element width*/
}
If the above doesn't fit your needs, try position:relative;
I found using percentage margins worked for IE7 when nothing else did. Though auto margins seem to work sometimes - your code in jsFiddle seemed fine under IE7.
The negative positioning to the left is needed to bring back the element, which is centered from its left edge.
If the container is a DIV then
#container
{
margin:0 auto 0 auto;
position:relative;
width:1035px;
}
if it does not work, use a css-reset first. It will definitely work.
try using
display:block;
for the container
Yeah, if I'm going to center a container, I usually text-align:center; the body and left align inside the container for backwards compatibility. Old habit I'm going to kill some day.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>a box</title>
<style>
body { text-align:center; }
#wrap { width:36em; padding:2em; margin:1em auto; text-align:left; background:#eee; }
</style>
</head>
<body>
<div id="wrap">…</div>
</body>
</html>
I have the following code which, as expected, shows a grey rectangle in both Firefox and IE. As soon as I add a DOCTYPE (HTML 4.01 Transitional) in front, it shows only a blank page. The online validator says the document is OK. What is wrong? Should I care about DOCTYPE?
<html>
<head>
<title>Title</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<style type="text/css">
#gallery
{
width:750;
height:548;
background-color: #f0f0f0;
}
</style>
</head>
<body>
<div id="gallery">
</div>
</body>
</html>
You need to specify the units for your width and height. I assume you're going for pixels so:
#gallery
{
width: 750px;
height: 548px;
background-color: #f0f0f0;
}
You haven't specified the units of measure for the height and width attributes in your CSS. Without a DOCTYPE the browser will attempt to render the page as best it can (QUIRKS mode), in your case I think it probably guessed the correct units. By adding the DOCTYPE you have told the browser to follow a very specific set of instructions when rendering the page - no guessing that you wanted pixels instead of percents.
Your CSS was buggy.
width:750px; /* PX!! */
height:548px; /* PX!! */
Then add the doctype.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Title</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<style type="text/css">
#gallery
{
width:750px;
height:548px;
background-color: #f0f0f0;
}
</style>
</head>
<body>
<div id="gallery">
</div>
</body>
</html>
The definition of height and width should be in pixels, em's or percentages, e.g:
width: 750px;
height: 548px;