This works on firefox and chrome:
<div id="popup" style="display: block;">
<div id="contentWrapper">
<div id="popHeader">
<span id="popupQuestion">The nature.</span>
<a id="popupYes" href="#"> </a>
<a id="popupNo" href="/">Leave</a>
</div>
</div>
</div>
#contentWrapper {
background-image: url("http://bestcamctory.com/images/warning/warning_bg.png");
height: 100%;
position: relative;
width: 100%;
}
But on ie the background image isnt shown. Why is that?
If your child elements are positioned absolutely, then #contentWrapper has collapsed because there's no elements within the normal flow of the document to tell it how tall to be. A height: 100% is relative: the element will only be as tall as its parent, which will only be as tall as its child elements by default (which are currently 0).
There are a few things you can try to work around this.
Add a minimum height to #contentWrapper (try 1em to start with)
Remove the absolute positioning from one or all of the child
elements.
You could also try adding height: 100% to each of the ancestor elements.
IIRC, you might need to define a size for the contentWrapper or the popup divs.
Related
I am trying to position a div along a line with a position that is calculated at runtime. I've set the div's display to inline-block (in the full code there are elements inside the div) and the position to relative, but the position doesn't update properly in IE11 when resizing the window.
https://jsfiddle.net/cpmckinn/ys4zjLam/2/
<div class="container">
<div class="marker">
A
</div>
<div class="line">
</div>
</div>
.container {
width: 50%;
}
.marker {
position: relative;
display:inline-block;
width: auto;
}
$(".marker").css("left","50%")
Everything checks out in Chrome and Firefox, and I can force the div's position to update in IE11 by disabling and re-enabling the "left" style with the developer tools. Is there a workaround to this particular issue or a better way to handle positioning the div?
As far as I know for the height to work as percentage the container element must have a specific height mentioned. But this doesn't hold true for absolutely positioned element with the ancestor being relatively positioned. Here is a working example of what I meant:
.container {
width: 400px;
background: cyan;
text-align: right;
position: relative;
color: white;
}
.child {
width: 90%;
height: 100%;
background: blue;
}
.absolute {
position: absolute;
}
.second {
margin-top: 30px;
}
<div class="container">
<div class="child absolute">Absolute</div>
one <br> two <br> three <br> one <br> two <br> three <br>
</div>
<div class="container second">
<div class="child">Static</div>
one <br> two <br> three <br> one <br> two <br> three <br>
</div>
As you can see the absolutely placed div applied 100% height onto it but not the statically positioned div. Why?
From MDN
relative
This keyword lays out all elements as though the element were not positioned, and then adjusts the element's position, without changing layout (and thus leaving a gap for the element where it would have been had it not been positioned). The effect of position:relative on table-*-group, table-row, table-column, table-cell, and table-caption elements is undefined.
Read more. Is very nicely described.
Here is a great read about the different position types:
Absolute is relative to the parent element and is not affected by other elements and are removed from the flow of the page i.e. you can see the list with one, two, three unaffected.
It's height is 100% as .child specifies.
I need to animate my ng-view with a slide effect. Therefore I got 3 divs
<div style="overflow:hidden">
<div ng-view style="position:absolute">
<div style="position:relative"> LONG CONTENT </div>
</div>
</div>
I´m testing these effect. The outer div needs to be overflow:hidden to let my slide effekt work.The inner div needs to be absolute. If the inner div contains some text, the other 2 divs should expand the height according to the very inner div. Same like when all divs would be relative. How to achieve this?
Like in my example link but with variable height.
EDIT: This is a complete other question then the "possible" duplicate.
The problem is the size of your contents, you`re making your inner div absolute, so the parents it won’t
have any height. First thing you have to do is define size to your elements and than you can use absolute elements to make your layout.
see the example below, i define a div named .page with min-height:200px, that will be enough to appear your element (.slide), because if you don’t do this, your element(.page) height will be 0, and it will be cut by overflow:hidden.
<style>
.page {
background-color: #DDD;
overflow: hidden;
position: relative;
min-height: 200px;
}
.slider{
position: absolute;
}
.slide{
position: relative;
}
</style>
<div class="page">
<div class="slider" ng-view>
<div class="slide"> LONG CONTENT </div>
</div>
</div>
In IE 10, I have a relatively positioned wrapper div with some content (an image / text). Inside of that div is an absolutely positioned anchor tag which is positioned to "cover" the entire wrapper div. It has a z-index set. So the entire area inside the wrapper div should be clickable. However, only the areas in the wrapper div that don't have content are clickable. The entire wrapper div is clickable in all other browsers except for IE 10. Here is a fiddle: http://jsfiddle.net/NUyhF/3/. Help?
<div class="wrapper">
<div class="imgWrapper">
<img src="http://www.google.com/images/srpr/logo4w.png" />
</div>
<p>Here is some text</p>
</div>
.wrapper { position : relative; width: 500px; height: 300px; }
.wrapper a { position: absolute; top: 0px; width: 500px; height: 300px; z-index: 2; }
It is now semantically correct to wrap block level elements in an anchor tag (using the html5 doctype). I would suggest amending your markup to this.
HTML
<a href="#">
<div class="imgWrapper">
<img src="http://www.google.com/images/srpr/logo4w.png" />
</div>
<p>Here is some text</p>
</a>
I have found this to be an annoying trait of IE for some time, to solve it I had to make a transparent image and use it as the background of the anchor tag:
background:url(transparent1x1.gif) repeat;
http://jsfiddle.net/NUyhF/6/
I have a container div. Inside that div are three graphs aligned at 700px intervals (the width of the container). The idea is that the other 2 graphs will be hidden off screen which I can then, with jQuery, slide across when a user interacts with various controls on the web page.
A simplified version of my code is like so:
Style
#graphcontainer {
height: 260px;
overflow: hidden;
width: 700px;
}
.graph {
position: absolute;
}
HTML
<div id="graphcontainer">
<div class="graph" style="left: 0px;"></div>
<div class="graph" style="left: 700px;"></div>
<div class="graph" style="left: 1400px;"></div>
</div>
For some reason the second and third graphs, which are positioned off to the right, are still visible! How do I ensure they are not visible?
First you have to set, position:relative for the parent. Then, you have to set the height of the parent.
Demo: http://jsfiddle.net/Scfdk/
You need to add position: relative; and set a height to the element you have overflow set to hidden on.
if you want to hide a div, have you considered "display: none"? For example,
<div class="graph" style="display: none"/>