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;
}
Related
I have a canvas element inside a div element. The canvas size can change, and I want it vertical centered. I'm using this CSS approach:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Vertical Centering</title>
<style>
html,
body{
height:100%;
width:100%;
margin:0;
padding:0;
}
#container{
width:100%;
height:100%;
text-align:center;
font-size:0;
background:#aae;
}
#container:before{
content:'';
display:inline-block;
height:100%;
vertical-align:middle;
}
canvas{
width:400px;
height:300px;
display:inline-block;
vertical-align:middle;
background:#fff;
}
</style>
</head>
<body>
<div id="container">
<canvas></canvas>
</div>
</body>
</html>
You can see it working on this fiddle: http://jsfiddle.net/8FPxN/
This code works great for me, until the browser resizes under the canvas width. The virtual element defined by the :before selector stands on the first line, and the canvas falls to the second line. I'm trying to keep them sticked, avoiding the line break, and showing scroll bars when needed. Adding the overflow:auto rule to the container shows the scroll bars, but the line keeps breaking.
The canvas size can change, so the top:50%; margin-top:- ($canvas_height / 2); approach is not suitable for this. Well, it can be, but I prefer not to control the margin-top using JavaScript. Just CSS would be great.
Any ideas? Thanks!
It seems (from limited testing) that adding white-space: nowrap; works:
#container{
width:100%;
height:100%;
text-align:center;
font-size:0;
background:#aae;
white-space: nowrap;
}
Updated JS Fiddle demo.
Adding white-space:nowrap should do the trick. http://jsfiddle.net/David_Knowles/aEvG5/
#container{
width:100%;
height:100%;
text-align:center;
font-size:0;
white-space:nowrap;
}
EDIT: correct fiddle
I have this html:
<section id="contain">
<canvas id="canvas-1" class="subcanvs"></canvas>
<canvas id="canvas-2" class="subcanvs"></canvas>
</section>
and this CSS:
#contain{
position:relative;
background:red;
}
.subcanvs{
position:absolute; /*pay attention to this line*/
width:100%;
}
When the two canvases are absolutely positioned and stacked,the container turns white.
When I remove absolute positioning, everything works out okay and it all goes the correct color with the background being red and the canvases being transparent, as they should be.
So how do I make two canvases stack AND make them both stay transparent?
Your container is collapsing and taking your canvases with it!
Make sure you define at least width and usually height in container objects.
This code works in IE, Chrome and Mozilla:
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<style>
#contain{
position:relative;
background:red;
border:1px solid blue;
width:500px;
height:300px;
}
.subcanvs{
position:absolute;
width:100%;
height:100%;
}
</style>
</head>
<body>
<section id="contain">
<canvas id="canvas-1" class="subcanvs"></canvas>
<canvas id="canvas-2" class="subcanvs"></canvas>
</section>
</body>
</html>
Due to the very helpful answer by markE, I discovered what was going wrong with my design.
In light of this, I discovered another way to deal with it using CSS3.
#contain{
position:relative;
background:red;
}
.subcanvs:first-child{
position:static;
}
.subcanvs{
position:absolute;
left:0;
width:100%;
}
This will make all the canvases line up nicely on top of eachother if they are all the same size. I'm not sure of browser compatibility on this one.
Can anyone explain to me this code because it seems to beat my logic?
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Test CSS Lay 2 col, 1 fix 1 fluid</title>
<style type="text/css">
body{
background-color:#000;
padding: 0;
margin: 0;
}
#main{
width:70%;
min-width:300px;
height:500px;
}
#colWr{
width:100%;
height:500px;
float:left;
}
#col{
height:inherit;
background-color:#900;
margin-left:200px;
}
#left{
height:inherit;
background-color:#9C3;
float:left;
width: 200px;
margin-left: -100%;
}
</style>
</head>
<body>
<center>
<div id="main">
<div id="colWr">
<div id="col"></div>
</div>
<div id="left"></div>
</div>
</center>
</body>
</html>
My questions rely on the facts that #left holds a margin-left: -100px attribute, the position of the div's within the main div suggest that the left column would rather be a right column and why is the "col" column floated to the left within the "colWr" div?
For a 1_fixed-1_liquid css layout, the code is quite a mind-twister.
The order of the divs doesn't matter as colWr has a width of 100% which means anything floated after it will appear on a new line anyway, if the left column came first it would force the colWr column on to a new line and it would have to be given a negative margin. The left div has a negative margin of 100% which brings it back on top of colWr.
As to why the page was laid out this way I have no idea, the same effect could be just as easily achieved by putting the left next to the col div and removing the colWr div (doesn't do any harm but it serves no purpose).
You should also note that the center tag in HTML has been deprecated and I recommend you give centre a div by specifying in it's css margin: auto. The code also lacks a DOCTYPE declaration which is required to trigger standards mode in most browsers - you can find more information about browser modes here.
My suspicion is that the code you have was written pre-dating the release of HTML 4.01. It will work in most browsers due to their legacy support but that doesn't mean it works well, I wouldn't use it. I would however use this:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Test CSS Lay 2 col, 1 fix 1 fluid</title>
<style type="text/css">
body{
background-color:#000;
padding: 0;
margin: 0;
}
#main{
width:70%;
min-width:300px;
height:500px;
margin: auto;
}
#col{
height:inherit;
background-color:#900;
margin-left:200px;
}
#left{
height:inherit;
background-color:#9C3;
float:left;
width: 200px;
}
</style>
</head>
<body>
<div id="main">
<div id="left"></div>
<div id="col"></div>
</div>
</body>
</html>
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'm trying to have an element with a greater width then the body, but not cause horizontal scrolling.
http://jsfiddle.net/hYRGT/
This hopefully demonstrates my problem somewhat.
The #header contains the #imghead and is set to 960px width.
What I want is the browser to 'think' the page is 960px wide.
Because #imghead is more wide then #header and positioned relative so it's in the center.
I'm not able to use a background-image because #imghead is going to be replaced by a flash component.
I'm also not able to use overflow:hidden because I DO want the element to show outside the 960px. I just don't want it to cause h-scrolling.
I do not want to disable h-scrolling altogether, I'd really love a CSS solution. But if javascript is the only way of dealing with this, I guess it would do.
Can't you just absolutely position it relative to the body, 50% from the left and then on the inner element do a negative left margin of half the total width of the element itself which would center it?
I think I got what I wanted:
http://jsfiddle.net/hYRGT/3/
Just in case jsfiddle would be down:
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" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=8" />
<title>WEBSITE title</title>
</head>
<body>
<div id="header">
<div id="imghead"><img src="/img.jpg" alt=""/></div>
</div>
<div id="wrapper" class="index">
<div id="container">SOME CONTENT</div>
</div>
</body>
CSS:
/*RESET*/
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dd,dl,dt,li,ol,ul,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;font-family:inherit;font-weight:inherit;font-style:inherit;text-align:left;vertical-align:baseline}
table{border-collapse:collapse;border-spacing:0}
a img,:link img,:visited img{border:0}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal}
ol,ul{list-style:none}
caption,th{text-align:left}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}
q:before,q:after{content:''}
abbr,acronym{border:0}
img{display:block}
a{color:inherit}
/*STYLES*/
html, body{
height:100%}
body{
background:#000;
text-align:center;
overflow:auto;
overflow-x:hidden;
overflow-y:auto}
#wrapper{
z-index:12;
position:relative;
height:auto!important;
min-height:100%;
width:100%;
background:#0f0;
overflow:auto;
overflow-x:auto;
overflow-y:visible}
#container{
width:960px;
margin:0 auto;
overflow:auto;
background:#00f}
#header{
z-index:50;
position:relative;
overflow:visible;
width:960px;
margin:0 auto;
height:0px;
background:#f00}
#imghead{
width:1100px;
position:relative;
left:-70px;
background:#ff0}
The content overlaps the header by design,
I hope this helps someone.
1 limitation is that the header does not horizontally scroll,
but in my design that is not necessary.
Tested in FF3, IE8, S4 and C5