I'm trying to fix a problem with a pseudo li element in this script:
http://jsfiddle.net/5xkrS/6/
When adding a backgroundcolor to the parent div, the connectorbars between the stepnumbers disappear. (see http://jsfiddle.net/5xkrS/7/ )
The backgroundcolor seems to overrule the pseudo li element, but not the li element. Using the following css:
/*progressbar connectors*/
#progressbar li:after {
content:"";
width: 100%;
height: 2px;
background: white;
position: absolute;
left: -50%;
top: 9px;
z-index: -1; /*put it behind the numbers*/
}
What can cause this problem and is there a way to fix this?
Here you go
http://jsfiddle.net/5xkrS/9/
#container {
width: 500px;
height: 600px;
margin: 0 auto 0 auto;
background-color: deepskyblue;
position: relative;
z-index: 1;
}
Added position relative and z-index 1 to the container. tested on FF and chrome on mac
Related
I am working on a layout for a webshop and am experiencing a problem which seems to be very specific.
There is a dropdown navigation which is design to look kind of a tab with a box under it. The point is, that there is a 1px border line between the tab (first level Menu Item) and the box (second level items) which I can't hide.
I thought about giving the second level box a lower z-index than the first level element, but that didn't changed anything. I read a lot about z-index, how it works and how it NOT works, but nothing was about z-index within one list.
This is how it should looks like and how it really looks like: http://i.stack.imgur.com/xbQ6x.png
I created a codepen, which shows the problem very good, when hovering the first level items: http://codepen.io/anon/pen/bNqJxN
li .dropdown{
overflow: hidden;
position: relative;
display: inline;
visibility: hidden;
position: absolute;
padding:0;
margin: 0 0 0 -1px; /*Putting a negativ margin-top here puts the box OVER the parent element :-( */
background: #fff;
border: 1px solid $light-grey;
width: 280px;
height: 200px;
&.right {
right: -1px;
left: auto;
}
.dropdown-1-2 {
float: left;
width: 50%;
}
}
I usually solve this issue with z-index to have the bottom of the li to overlap the top of the dropdown.
In your case, I had to remove the * selector for the z-index which came after the li and dropdown which was resetting the z-index to 2 on everything in that navigation. Instead I created just the one stacking context (here's an article on it) for the first nav to appear above the second, and then I gave the ul position relative and the dropdown a z-index of -1 and -1px top margin to move it just behind the unpositioned li.
#mainnav {
...
ul {
#include reduced-list;
...
position: relative;
li .dropdown{
...
margin: -1px 0 0 -1px;
z-index: -1;
...
&#nav1 {
z-index: 2;
}
&#nav2 {
z-index: 1;
}
Sorry, the codepen didn't save.
You can solve it adding a pseudo element to cover the border
li:hover:after {
content: "";
position: absolute;
width: 100%;
height: 2px;
background-color: white;
bottom: -1px;
left: 0px;
z-index: 999;
}
codepen
Thanks so much!
Both answers solved my problem like a charme!
I created a codepen with the solution here: http://codepen.io/anon/pen/NPpQOq
ul {
#include reduced-list;
position: relative; /* YEAH */
float:right;
li .dropdown{
overflow: hidden;
position: relative;
display: inline;
visibility: hidden;
position: absolute;
padding:0;
margin: -1px 0 0 -1px; /* YEAH */
z-index: -1; /* YEAH */
background: #fff;
border: 1px solid $light-grey;
width: 280px;
height: 200px;
&.right {
right: -1px;
left: auto;
}
}
Placing a nested child under a parent element seems to be possible :-)
Here is a fiddle.
<p>foo <a class="infolink" href="#">bar</a> baz</p>
and
a.infolink::before
{
content: '?';
background: blue;
color: white;
width: 20ex;
height: 20ex;
}
The '?' appears but clearly does not have 20ex size. Why not? Tested in Firefox and Chrome.
Note: The ::before and ::after pseudo-elements are actually laid display: inline; by default.
Change the display value to inline-block for the width & height to take effect while maintaining inline formatting context.
a.infolink::before {
content: '?';
display: inline-block;
background: blue;
color: white;
width: 20px;
height: 20px;
}
http://jsfiddle.net/C7rSa/3/
::before and ::after pseudo-elements are laid inline by default, so width and height won't take effect.
Set it to display: inline-block and it should work.
Use this if you have image in container or CSS white-space: nowrap; property
body::before{
content:url(https://i.imgur.com/LJvMTyw.png);
transform: scale(.3);
}
For me it worked when I used display: block.
If you set the element to position: relative and the pseudo to position: absolute, you can adjust the pseudo width and height in relation to the parent element size.
div {
position: relative;
width:400px;
height:200px;
padding: 0;
}
div::before {
position: absolute;
width:100%;
height: 100%
}
add display:block;
demo
p > a.infolink::before {
display:block;
content:'?';
background: blue;
color: white;
width: 20ex;
height: 20ex;
border:1px solid #000;
}
I can get it to work but not using a percentage in width. Pixels work fine
visibility: visible;
content: "stuff";
min-width: 29px;
width: 100%;
float: left;
position: relative;
top: -15px;
left: 0;
I have two layer,one is black overlay:
#overlay {
background: rgba(0,0,0,0.7);
width: 100%;
height: 100%;
position: fixed;
left: 0;
top: 0;
z-index: 0;
display: none;
}
the other is my text container:
#wrap {
z-index: 999
width:600px;
height:600px;
border:5px solid black;
display:none;
color:red;
}
I want let the overlay and the container show at the same time:
$(document).click(function () {
$('#overlay').add('#wrap').fadeIn();
})
but the text container is always under the overlay,although I have set the overlay z-index to 0 and set the container z-index to 999.
Demo is here
finally I found I have to set the overlay z-index to -1, it would work.
Why I can not set the overlay's z-index more higher?Because its position is fixed?
z-index is not applied to #wrap because it has flow positioning. A box must have at least position: relative; before z-index takes effect.
Also, your z-index value is missing its semicolon. Make it z-index: 999; and it works. My code is below:
#wrap {
z-index: 999;
width:600px;
height:600px;
border:5px solid black;
background: #FFF;
display:none;
color:red;
position: relative; }
An element with static positioning(this is the default) is unaffected by the z-index property, change its positioning to relative
I have a div with default position argument. Now I need to put under it another div:
#Dark
{
width: 250px;
height: 100px;
background-color: #1a1a1a;
margin: 0 auto;
/*position: absolute;*/
z-index: 999;
}
#Blue
{
background-color: #046a81;
height: 90px;
width: 30px;
position: absolute;
z-index: 10;
}
How to put blue one layer down (it should be rendered before dark div) if I can't make Dark position as absolute?
Make the #Dark have position:relative. It still behaves as if it were in the flow, but now you can adjust the z-index.
My site, http://hivechatter.com/, is super sexy for Firefox, Chrome, IE8, you name it:
But then along comes IE7, who mauls her divs so bad that they nearly run off the screen! And for whatever reason the content within the divs is centered. What the heck is going on here? It seems to be something to do with the way IE7 interprets the left: percentage margins, but I can't figure it out.
For convenience and posterity's sake, below are the relevant portions of my css, with text formatting and other nonsense removed. #container is the overall page container, #blue_box is the main content box, #left and #right are the columns in the blue box, #divider is the white line that separates them, #links is the light blue nav hovering below #blue_box.
#background {
width: 100%;
position: absolute;
top: 0;
left: 0;
z-index: -9999;
}
html, body {
margin: 0;
padding: 0;
height: 100%;
}
body {
background: no-repeat #222933;
overflow: hidden;
}
#container {
position: relative;
left: 34%;
top: 10%;
width: 50%;
min-width: 450px;
max-width: 700px;
overflow: auto;
padding: 0;
}
#blue_box {
position: relative; /* so that divider has appropriate height */
width: 94%;
padding: 3%;
overflow: auto; /*needed so that div stretches with child divs*/
}
#left {
position: relative;
float: left;
width: 44%;
margin: 0;
padding: 0;
}
#right {
position: relative;
float: right;
width: 49%;
margin: 0;
padding: 0;
}
#divider{
position:absolute;
left:49%;
top:6%;
bottom:6%;
border-left:1px solid white;
}
#links {
float: right;
width: 16em;
overflow: auto;
}
Change your position from relative to absolute for the container CSS.
Your problem is your image is just there with the container coming after it with a relative positioning.
IE7 is centering your container because you've set your body to text-align:center, then you're setting your container left:34%. IE is just adding those together for some reason. This is probably why your stuff is being centered in IE. You could do a conditional stylesheet for IE7 and remove the text-align.
Can't test at the moment if this will solve the issue but using margins on the blue box to position it instead of position: relative usually makes things a lot easier in the dark world of ancient Internet Explorers.