I have an a-element with z-index -2 and a div-element with z-index -1. I expect the div-element to be on top because it has a higher z-index. In Chrome this is not the case.
Is this a bug in Google Chrome?
Edit: Please don't send suggestions on how to fix it. I want to know why it is looking different.
#bar
{
position:fixed;
top:0;
right:0;
left:0;
height:100px;
z-index:-2;
background:rgba(255,0,0,0.5);
}
#square
{
position:relative;
height:150px;
width:150px;
z-index:-1;
background:black;
margin:200px auto 10000px auto;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body onload="document.getElementById('bar').click()">
<a id="bar" href="#square">scroll down</a>
<div id="square"></div>
</body>
</html>
Screenshot
To be honest im not sure why this is happening, but if you use positive values everything works as expected.
#bar
{
position:fixed;
top:0;
right:0;
left:0;
height:100px;
z-index:1;
background:rgba(255,0,0,0.5);
}
#square
{
position:relative;
height:150px;
width:150px;
z-index:2;
background:black;
margin:200px auto 10000px auto;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body onload="document.getElementById('bar').click()">
<a id="bar" href="#square">scroll down</a>
<div id="square"></div>
</body>
</html>
The problem is with the fixed position element which has more priority than other element refer Stacking Contexts for more info
Here is the jsfiddle link with different approach to solve the problem
#bar
{
position:sticky;
top:0;
right:0;
left:0;
display: inline-block;
width: 100vw;
height:100px;
z-index:-2;
background:rgba(255,0,0,0.5);
}
#square
{
position:relative;
height:150px;
width:150px;
z-index:-1;
background:black;
margin: 0px auto;
}
Related
I have two divs one inside another, i would like to overlap one div with other and also use css idnex, but ie doesn't let me do this, is there some kind of workaround?
Please view this code in IE since it works in other browsers.
Here is jsfiddle: http://jsfiddle.net/xkDCX/1/
And the code:
<div class="container">
<div class="button"></div>
<div>
body{
margin:50px;
}
.container{
position:relative;
width:410px;
height: 300px;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#daf5fd', endColorstr='#0dbcf5');
z-index:22;
}
.button{
width:20px;
height:20px;
border:2px solid black;
position:absolute;
right:-10px;
top:-10px;
background:black;
z-index:11;
}
The thing here is that the filter you added doesnt work at all only in IE so when you see the style in other browsers they dont recognize it at all.
UPDATE:
Would this worked out for you?
<div class="container">
<div class="button">
<div class="but"></div>
</div>
<div class="background"></div>
<div>
<style>
body{
margin:50px;
}
.container{
position:fixed;
width:410px;
height:300px;
margin:0;
padding:0;
}
.container .background{
position:fixed;
bottom:0px;
left:0px;
width:100%;
height:100%;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#daf5fd', endColorstr='#0dbcf5');
z-index: 50;
}
.container .button{
position:absolute;
width:410px;
margin-left:auto;
margin-right: auto;
z-index: 100;
}
.container .but{
position:absolute;
width:20px;
height:20px;
background:black;
right:-10px;
top:-10px;
border:2px solid black;
}
</style>
I want to position my footer at the baseline of my #wrapper but all I seem to be able to do is get the footer positioned below the wrapper. Can someone please tell me why this is happening?
Also, if someone sees a problem with how I have this currently designed and has a better way, I'm open to any suggestions.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>sd</title>
<style type="text/css">
html, body {
width:100%;
background:brown;
border:0px solid red;
margin:0;
padding:0;
}
#wrapper {
width:1220px;
height:750px;
padding:0;
margin:0 auto;
background:#ccc;
border:3px solid white;
}
#header {
background-color:#aaa;
width:100%;
height:100px;
padding:0;
margin:0 auto 0 auto;
border:0px solid;
}
#content {
float:left;
width:100%;
height:649px;
padding:0;
margin:0;
border:0px solid;
}
#cell-left {
background-color:#bbb;
float:left;
width:200px;
height:100%;
padding:0;
margin:0;
border:0px solid;
}
#cell-right {
float:right;
width:1010px;
height:100%;
padding:0;
margin:0;
border:0px solid;
}
#footer {
float:left;
width:100%;
height:25px;
padding:4px;
margin:0;
text-align:center;
border:1px solid;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header"></div>
<div id="content">
<div id="cell-left">dsssd</div>
<div id="cell-right">dsssd</div>
</div>
<div id="footer">sdsd</div>
</div>
</body>
</html>
You should remove the fixed height on #wrapper (height:750px), and clear the floated elements inside #wrapper properly.
The easiest way to do this is to add overflow: hidden to #wrapper.
See: http://jsbin.com/iciwo6
The changed CSS:
#wrapper {
overflow:hidden;
width:1220px;
padding:0;
margin:0 auto;
background:#ccc;
border:3px solid white;
}
You have mentioned the wrapper height 750 that is showing problem.Just make it clear and give height:auto
You have given
header: `height:100px;`
content: height:649px;
so it is taking almost 750px .so there is no space for footer.so it is coming just below the wrapper.So try to give height:auto.
the z-index in "div.dialog" doesnt seem to influ the layer index? the "div.dialog" div has to be on top of everything
EDIT:
div.dialog_bg has to be in the background
#topfix has to be on top of that
div.dialog has to be on top of everything
code...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<body style="margin:0px">
<style>
#topfix {
position:fixed;
top:0px;
left:0px;
width:100%;
height:130px;
z-index:1;
background:#ff0000;
}
#div_dialog {
position:relative;
z-index:1;
}
div.dialog {
position:absolute;
background:#ffffff;
border:1px solid #000000;
width:400px;
height:300px;
top:50px;
left:100px;
z-index:99; // doesnt seem to influ the layer index
}
div.dialog_bg {
position:absolute;
background:#ffff00;
width:100%;
height:500px;
opacity:0.3;
}
</style>
<div id="div_dialog">
<div class="dialog_bg"></div>
<div class="dialog">test<br>test<br>test<br>test<br>test<br>test<br>test<br>test</div>
</div>
<div id="topfix">
topfix
</div>
</body>
</html>
Then you need to give its parent #div_dialog at least z-index: 2 because the z-index is relative to its parent and dialog is the only child of #div_dialog.
Also z-index: 1 for #div_dialog isn't enough because #topfix comes after it in HTML and will be placed over #div_dialog.
EDIT
So regarding your "new" you have to give
#div_dialog {
position: absolute;
z-index: 9999;
}
.dialog_bg {
z-index: 1;
}
.dialog {
z-index: 2;
}
Basically this is my issue, I have a container with 4 divs inside, in firefox it works just fine and also in IE8 but ..it shows the compatibility view all the time, if I click on it, it moves the 4 divs out of the container, making the site looks terrible.
btw, the 4 divs are just behind the menu but on another "content" div. (I need it that way...)
This is my code.
<style type="text/css">
body{
margin-top:2px;
}
#main_frame{
width:1024px;
height:550px;
position:relative;
margin:0 auto;
padding:0px;
float:center;
text-align:center;
background:black;
}
#logo{
width:275px;
height:75px;
background-image:url(images/logo.png);
background-repeat:no-repeat;
position:relative;
margin:0 auto;
padding:0px;
float:left;
}
#top_center{
width:474px;
height:75px;
position: relative;
top:0px;
margin:0 auto;
padding:0px;
background-color:green;
float:left;
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
}
#top_right{
width:275px;
height:75px;
position: relative;
top:0px;
margin:0 auto;
padding:0px;
background-color:red;
float:left;
}
#main_menu{
width:1024px;
height:25px;
float:none;
position:relative;
float:left;
margin:0 auto;
padding:0px;
background-color: #FF0;
}
#content_frame{
height:400px;
width:1024px;
position:relative;
float:left;
margin:0 auto;
padding:0px;
}
/* HERE THEY ARE */
#tag1{
height:375px;
width:256px;
position: absolute;
float:left;
margin:0 auto;
padding:0px;
background-color:#900;
}
#tag2{
height:375px;
width:256px;
position:absolute;
float:left;
margin-left:256px;
padding:0px;
background-color: #930;
}
#tag3{
height:375px;
width:256px;
position:absolute;
float:left;
margin-left:512px;
padding:0px;
background-color: #960;
}
#tag4{
height:375px;
width:256px;
display: inherit;
position:absolute;
float:left;
margin-left:768px;
padding:0px;
background-color:#990;
}
</style>
... some code removed...
<body>
<div id="main_frame">
<div id="tag1"></div>
<div id="tag2"></div>
<div id="tag3"></div>
<div id="tag4"></div>
<div id="logo"></div>
<div id="top_center"></div>
<div id="top_right"></div>
<div id="main_menu"></div>
<div id="content_frame">
Any help on this is greatly appreciated.
Thanks guys,
Marco,
A link to a live page is almost required to tell you how to definitively fix this.
At the moment, it's too much work to try and recreate the problem (too many unknown variables).
Does your page have a doctype?
When I see this:
but ..it shows the compatibility view
all the time
It suggests that your page is being coerced into IE7 mode.
The usual cause is having this line in your page:
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
The probable correct thing to do is remove this line, and fix your site to work in IE8.
Another thing you didn't specify is how well this works in other browsers such as Firefox, Chrome - and whether you care about this.
If this answer doesn't help you enough, post a link to your live page.
To fix your problem, follow these steps:
Move <div id="tag1"></div>, <div id="tag2"></div>, <div id="tag3"></div>, <div id="tag4"></div> to inside <div id="content_frame"></div>, like this:
<div id="main_frame">
<div id="logo"></div>
<div id="top_center"></div>
<div id="top_right"></div>
<div id="main_menu"></div>
<div id="content_frame">
<div id="tag1"></div>
<div id="tag2"></div>
<div id="tag3"></div>
<div id="tag4"></div>
</div>
</div>
Then, from those four tag divs, remove the margin and position: absolute rules.
I've tested that this fixes it to work in IE7, IE8, Firefox.
As an aside, after my fix I don't think any of your elements requires the position: relative rule any longer.
Here is the code i'm working on it's not a page it's a treasure hunt for what might be re-used in a page, I ran into this problem last week or so and I'm asking myself what the heck is this margin for a while here
Let's picture that I can't use the float:left; tag for a reason, when I use display:inline-block; a weird margin apears on the elements (say divs) how do I fix it?
Problem is on FF3, and IE8 never tested in other browsers but if it dos not work on these what will it work on?
Original 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" />
<title>Why does that happen</title>
<style type="text/css">
* {padding:0px; margin:0 auto;
vertical-class:baseline;
text-class:left;}
body {padding:0px; margin:0 auto;}
div{margin: 0 auto;}
div div{margin: 0;}
.body {background:#CCC; width:900px; }
.red {background:#F00;
height:300px; width:300px;
display:inline-block;
margin-left:0px;}
.blue {background:#03F;
height:300px; width:300px;
display:inline-block;
margin-left:0px;}
.green {background:#090;
height:300px; width:300px;
display:inline-block;
margin-left:0px;}
.light-blue {background:#39F;
height:300px; width:300px;
display:inline-block;
margin-left:0px;}
.light-green {background:#9FC;
height:300px; width:300px;
display:inline-block;
margin-left:0px;}
.heavy-red {background:#C00;
height:300px; width:300px;
display:inline-block;
margin-left:0px;}
</style>
</head>
<body>
<div class="body">
<div class="red"></div>
<div class="blue"></div>
<div class="green"></div>
<div class="light-blue"></div>
<div class="light-green"></div>
<div class="heavy-red"></div>
</div>
</body>
</html>
Solved: solution is eliminate the spacing in the markup:
<!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" />
<title>Why does that happen</title>
<style type="text/css">
* {padding:0px; margin:0 auto;
vertical-class:baseline;
text-class:left;}
body {padding:0px; margin:0 auto;}
div{margin: 0 auto;}
div div{margin: 0;}
.body {background:#CCC; width:900px; }
.red {background:#F00;
height:300px; width:300px;
display:inline-block;
margin-left:0px;}
.blue {background:#03F;
height:300px; width:300px;
display:inline-block;
margin-left:0px;}
.green {background:#090;
height:300px; width:300px;
display:inline-block;
margin-left:0px;}
.light-blue {background:#39F;
height:300px; width:300px;
display:inline-block;
margin-left:0px;}
.light-green {background:#9FC;
height:300px; width:300px;
display:inline-block;
margin-left:0px;}
.heavy-red {background:#C00;
height:300px; width:300px;
display:inline-block;
margin-left:0px;}
</style>
</head>
<body>
<div class="body">
<div class="red"></div><div class="blue"></div><div class="green"></div><div class="light-blue"></div><div class="light-green"></div><div class="heavy-red"></div>
</div>
</body>
</html>
The problem is caused by spaces in the markup between the divs. If you don't want to float them (why not I wonder), you have a couple of options.
Remove the spaces so that the markup is all on the same line.
If you don't ever want any text to appear in these divs then you can do this
div{font-size:0;}
I common practice in order your sites to be more cross browser compatible is to use a css reset file. Check this question https://stackoverflow.com/questions/116754/best-css-reset
in all your inner div classes use margin-left: 0px
.red {background:#F00;
height:300px; width:300px; margin-left: 0px; display: inline-block;
}
.blue {background:#03F;
height:300px; width:300px;margin-left: 0px; display: inline-block;
}
.green {background:#090;
height:300px; width:300px;margin-left: 0px; display: inline-block;
}
.light-blue {background:#39F;
height:300px; width:300px;margin-left: 0px; display: inline-block;
}
.light-green {background:#9FC;
height:300px; width:300px;margin-left: 0px; display: inline-block;
}
.heavy-red {background:#C00;
height:300px; width:300px;margin-left: 0px; display: inline-block;
}
I have posted the final html at http://jsbin.com/uwavi3
I had to remove display: inline-block to get it to work on jsbin while on running it locally from a file I didn't have to. I think jsbin uses some sort of reset css.
Edit2 for float: left kinda layout
Sorry for misunderstanding the question.
Increasing the width of the parent div and using spans instead of div(for colored blocks like red, blue etc.) Works for IE8 and FF3.6. Check here http://jsbin.com/uwavi3/3
This is causing a margin on the left and right of every element (that is not display:inline):
* { margin:0 auto; }
You probably want this as your "reset" rule.
* { margin:0; }
You can then apply margin:0 auto to things that you want centered.