This is very frustrating....
http://jsfiddle.net/RRnm8/
<div id="target">
<p>Text to appear in front</p>
</div>
#target {
position: relative;
background: red;
width: 200px;
height: 200px;
padding: 45px;
}
#target:before {
content: "content from before, should be behind #target";
position: absolute;
top: 10%;
left: 10%;
width: 100%;
height: 100%;
background: cyan;
z-index: -1;
}
works well on every browser, except for IE8...
it should be displayed like this:
But in IE8 you get this :'(
So the question would be how to get this to work properly in IE8?
Please provide the answer as a real working example at jsfiddle...
This user has the exact same problem. He got no answer but this which clearly doesn't work, hence my kind request for a working example demonstrating it on jsfiddle
This issue appears to be related to how IE handles the z-index stack. Where FF and Chrome treats elements with z-index document-wide, in IE, as you likely know, z-index is based upon the parent's z-index first.
I think the :before content complicates this issue and, despite it having a negative z-index, is it within the parent element. The element its index is being compared with is not the parent div, as it would be in FF or Chrome, but the content inside the div, the p element. The p element is not a block and shares the z-index of the parent div as well, so it cannot be below the :before content.
The solution is to make an inner div, or give the p element relative positioning and styling.
See: http://jsfiddle.net/RRnm8/3/
Related
I've lately come across a weird issue, where a div like the following is not behaving like expected in most browsers (Chrome, Edge) as it does in Firefox:
footer > div {
display: flex;
position: absolute;
height: 100%;
top: 0;
right: 0;
left: 0;
bottom: 0;
justify-content: flex-end;
align-items: center;
}
footer {
position: relative;
display: table-row;
height: 40px;
background-color: gray;
}
I expect the div inside the footer to fill it's parent div so an element inside that div tag can be aligned vertically.
To make it work in chrome, I included the following rule
#media screen and (-webkit-min-device-pixel-ratio:0) {
footer > div { position:relative; }
}
The idea is to vertically align some elements in the footer without having to enter a specific value for its height (yes I'm more of a programmer, so I'm trying my best to avoid having to put the same value on multiple places in case it needs to be changed). How is this done correctly across multiple browsers?
The final solution just has to be supported in current versions of Chrome and Firefox so ignore all that IE not supporting CSS3 and HTML5 bull that most of other people have to consider. I'd also rather not do the styling using JS including JQuery since I feel like the layout is such a basic thing it should be possible to do without any of it.
If needed, you can also check out this jsFiddle which shows the problem in the context of the layout.
I suppose this isn't really necessary but if you want to, you can also check out the source code (it's a Spring webapp using Thymeleaf) on GitHub.
Lastly, if you feel like it, feel free to comment on other flaws in the design. This is a project I'm doing for an University course so I'm always open to improvements.
Thank you very much!
You could solve this by replacing the following for footer > div:
top: 0;
right: 0;
left: 0;
bottom: 0;
..with:
width: 100%;
height: inherit;
You'll find an updated Fiddle here. The solution seems to be working in all the latest browsers.
I switched to a new computer, and all of a sudden the CSS :after and :before selectors no longer work.
What's truly bizarre is that the :before/:after selectors I added before, on my other computer, display completely normally on my new computer. But any new ones I add now simply don't show up, even if I copy-and-paste the old code onto a new div.
For example, this one:
html
<div id="wtf"></div>
css
#wtf {
width: 10px;
height: 20px;
background: red;
}
#wtf:after {
content: "";
position: absolute;
left: 100px;
top: 10px;
width: 20px;
height: 20px;
background: blue;
}
This code works when copied and pasted directly into a fiddle: ( http://jsfiddle.net/rLnrtu0x/ ) but only the red box displays on my local browser. No matter what I do, the blue box won't show. All other CSS behaves normally.
Does anyone know what I might be doing wrong?
Tested on Mozilla 35.0.1 and Chrome 42.0.2311.152 (64-bit) on Ubuntu 14.04. I can't retest it on my old computer because it broke, but I never had problems with :before/:after selectors before.
UPDATE
I just found the selectors with my inspector. They actually display normally, but they are being positioned relative to html, not their parent div. Here again, with the code that I added before the computer change, the :before/:after selectors are positioned relative to the parent div. But the new code, even though it's copy-and-pasted, positions the selectors relative to the html. Why would this be?
The parent container needs to have position
Absolutely positioned elements are positioned "at a specified position relative to its closest positioned ancestor or to the containing block." (src: MDN)
So, your :after pseudo-element is not contained by its parent because the parent isn't "positioned" or its position is set to static.
The only explanation is that there must have been something in your previous setup that was applying position to #wtf, which allowed its child to be positioned absolutely within it.
You can "fix" the issue by applying position to #wtf like so:
#wtf {
width: 10px;
height: 20px;
background: red;
position: relative;
}
#wtf:after {
content: "";
position: absolute;
left: 100px;
top: 10px;
width: 20px;
height: 20px;
background: blue;
}
<div id="wtf"></div>
It turns out that it's unrelated to the computer change. The :before/:after selectors are in fact displaying, but they are being positioned relative to the html, not the parent div, because the parent divs are absolutely positioned.
sorry if the question title is weak, i can't quite sum my problem up into one snappy tagline...
I'm working on a website (using Joomla) and i've had to insert a DIV serving as a sidebar on the right side of the page. in order for it to be displayed "above" (or "over", i mean on the z-axis) the regular page content, i'm using a negative margin on the left side of it, covering the whole width of it, so it will simply float to the right and sit there, which works fine in ff and IE.
Since i've rarely ever run into issues with Chrome that were fine in IE, i didn't bother to check until quite late:
Now i see that in Chrome, the div is just sitting below (at the bottom of) the regular content; despite the "inline" display-types and the negative margin.
Now I've tried ridiculous things to make it work, but for some reason it just won't.
Can someone tell me how i can get it to work in Chrome?
HTML:
<div class="cframe">
<div class="content">
...
</div>
<div class="sideright">
...
</div>
</div>
CSS:
div.cframe {
display: table;
vertical-align: top;
}
div.content {
display: inline-table;
width: 751px;
padding: 60px;
}
DIV.sideright {
width: 200px;
float: right;
display: block;
position: relative;
top: 320px;
margin: 0px 0px 0px -200px;
}
...this is what i'm stuck with right now, it's all quite ugly.
[link to live-page removed as the solution has already been applied]
(The sidebar is the div classed sideright, and contains a module titled Archiv)
Thank you in advance
Change the div.content css to:
div.content {
display: inline;
float: left;
}
You're using float, but then setting the position to relative. You should remove the relative part of your css for the siderright and it should fix the issue
Edit: even better you should change the position to absolute.
Set your container div to position:relative and then position:absolute your sidebar in relation to that.
.cframe {
display: table;
vertical-align: top;
position: relative;
}
.sideright {
width: 200px;
position: absolute;
top: 320px;
right: 0;
}
I didn't test the answers above but I take their word that they worked. However, your question caught my eye, because I thought you were looking for a browser hack.
There are ways that you can tell an element to behave differently on a specific browser. This happens sometimes across browsers and the best way is to hack each individual browser and give them specific instructions. For chrome, of course you'll have to use a webkit.
This would be an easy example of the syntax to follow:
<p>TEST</p>
p {color:green;}
#media screen and (-webkit-min-device-pixel-ratio:0) {
p {color:red;}
}
Try the DEMO in several browsers and notice how only chrome will display it in red
Back to basics, I have a situation whereby I have an image which needs to appear over the background of an element just below it. However, I do not want the image to be over the top of the content of that element, only the element (and background properties) itself:
http://jsfiddle.net/chricholson/4twr5/1/
HTML:
<img src="https://www.google.com/images/srpr/logo3w.png" />
<div>
Hello World
</div>
CSS:
img { position: absolute; z-index: 20; }
div { position: relative; top: 45px; z-index: 10; padding: 30px; background: red; }
a { position: relative; z-index: 30; padding: 10px; background: yellow; display: block; }
Expected behaviour would be the image to appear over the top of the div background [check], but then appear behind the yellow link, which it isn't.
Found my "answer" (more confirming my doubts) here Can't get z-index to work for div inside of another div. The key sentence being "Once you set position:relative on test_1 you are causing its z-index to be in a different world than the z-index of test_2."
It seems the reason I have a problem is because once I have set the image higher than the div, no matter what z-index value I set to the contents of the div it will always be covered. I didn't think z-indexes worked like this, I thought everything was "separate" and so long as a value was higher than a value elsewhere (regardless of parent containers) things would be fine.
img { position: absolute; z-index: 15; }
div { position: relative; top: 45px; z-index: 20; padding: 30px; background: red; }
a {z-index: 30; padding: 10px; background: yellow; display: block; }
You can try this code. By the way a is a child of div. You don't need to type position: relative; Because you wrote for div.
Put the image inside the div like so:
<div>
<img src="https://www.google.com/images/srpr/logo3w.png" />
Hello World
</div>
Most of the answers here are pointing out the base truth: in straight up HTML + CSS, this is probably only possible if the <img> is inside of the <div> and a sibling to <a>.
Since you've indicated that you can't change the HTML, you could instead apply a simple JavaScript that would reorder the DOM as necessary for you: $('div').prepend($('img'));. (This is JQuery, by the way.) What this does is it takes the <img> and sticks it as the first child in <div>.
Of course, if you were to use this in production code, you'd want to append id's to the elements and select off that otherwise you'd have images being stuck into divs willy nilly.
Here is a JSFiddle demo. The JQuery is called onDomReady(). The HTML itself is unchanged.
http://jsfiddle.net/4twr5/21/ Look this jsfiddle
Update according to comment http://jsfiddle.net/4twr5/22/
I was fiddling around with a web site I am developing, attempting to fix some odd IE7 bugs, since this is an internal project and IE7 is the standard browser. I ended up adding "position: relative" to correct a couple IE-specific layout problems, but I seem to have made things worse in FF/Chrome (I consider myself more of a systems programmer, but my current responsibilities involve more of a web focus unfortunately).
The specific problem is that the "position: relative" elements ended up making some of my links, which were floated to the right, unclickable. I've created a simple test page that I hope will explain this better than I can with words: http://jsfiddle.net/gBchZ/.
I will sort through this mess eventually, but I was hoping that someone could explain the reason behind my links getting hidden behind the position: relative elements.
Without having the link of the site is difficult to tell exactly what is wrong. But in any case, a solution could be to use z-index for the parent of a. For example z-index:100. Keep in mind that z-index works only with positioned elements, so you can use position:relative.
Demo based on your example: http://jsfiddle.net/gBchZ/3/
This is because the .content divs are covering the right-box (in your demo). If you add a margin-right to those divs the a becomes 'reachable:'
.content
{
position: relative;
margin-right: 20%;
}
JS Fiddle demo
You could also use position: absolute; to make the a element appear 'higher' in the z-index, though this becomes rather complex:
#rightBox
{
background-color: green;
width: 25px;
height: 25px;
position: absolute;
right: 0;
top: 50%;
margin: -20px .5em .5em .5em;
padding: .5em;
}
JS Fiddle demo
#David’s correct in that the position: relative on the .content items is giving them a z-index, meaning they’re “on top” of the link you’ve floated to the right.
I think a better solution though is to add position: relative; to the link you’ve floated right as well, and give it a z-index higher than .content:
#rightBox
{
...
position: relative;
z-index: 2;
}
.content
{
position: relative;
z-index: 1;
}
See http://jsfiddle.net/gBchZ/6/