When I set #wrap {height: 0; overflow: hidden}, the inner anchor tag should be hidden, thus click on the shadow area should have nothing happened.
I tested it on Firefox and IE. Both of them works fine.
But on Chrome, when I click on the shadow area, I still get alert window.
Is it a WebKit bug?
Here is the demo:
http://jsbin.com/ofuxar/3
<div id="wrap">
click
</div>
#wrap {
height: 0;
overflow: hidden;
position: absolute;
box-shadow: 0 10px 10px 10px black;
}
#wrap a {
display: block;
height: 100px;
}
You're setting the height to 0 but it's attributes are still displayed. Ergo, any styles you have applied to that element are still going to be shown. IF you did a 1px border, it would show a 1px with that border color. Probably the most known instance of the occurrence is when you have float elements inside of a parent div and the parent div collapses. All margin and border elements are retained, but the div has a height of 0.
As #Andrew stated in the comment, you should use display:none; to hide elements. If I may ask, what is your reasoning for setting something to height: 0?
EDIT http://jsfiddle.net/bHPFN/ As stated before, the attributes to the element cause it to NOT have a height of 0px, but instead extend the functional dimension of the element to what ever the CSS attributes delegate.
Related
I am trying to understand the rules behind z-index and how it interacts with the overflow property.
I have this html:
<body>
<div class="cell">
Here is some text to keep things interesting
<div class="boxy"></div>
</div>
</body>
And this css:
.boxy {
position: absolute;
z-index: 9999;
top:70px;
width: 50px;
height: 50px;
background: #0FF;
}
.cell {
border: 2px solid #F00;
position: relative;
/* comment these two lines out and the box appears */
/* or change them both to 'visible' */
/* changing only one of them to 'visible' does not work */
overflow-y: auto;
overflow-x: auto;
}
I would have expected that the cyan box appears even though it is out of the size of the div.cell because its z-index and its position are set.
However, the only way to make the cyan box appear is to comment out the overflow-x and -y lines.
My question is: How can I make the cyan box appear on the screen while keeping the overflow as either hidden or auto? But more importantly, I'm looking to understand why this is happening. What are the css and layout rules being applied here?
See my Plunkr. This example, is of course a much simplified version of the HTML/CSS I am actually working with.
EDIT
There seems to be some confusion in the answers below because I didn't explain things well enough. If you comment the two overflow lines out, you can see that the cyan box appears. It appears outside of the border of .cell. Why does this happen? How can I make the cyan box appear, while still hiding overflow and z-index?
The reason the cyan box appears only when overflow-x and overflow-y are visible, and disappears otherwise, is simply because the cyan box is overflowing the cell box. overflow: visible simply means "paint this box even if it is overflowing its containing block" — the cell box is the containing block of the cyan box because its position is relative. Any other values of overflow cause overflowing content to be clipped from view. There is nothing special going on here; in particular, the z-index is completely irrelevant and there is no such interaction as the question title alludes to (and there really is no reason to set it to such a huge number unless you're worried about scripts injecting other elements into the cell).
The only way to allow the cyan box to appear while the cell has a non-visible overflow is to remove position: relative from the cell and apply that declaration to the parent of the cell (in your example, it's the body). Like this:
body {
position: relative;
}
.boxy {
position: absolute;
z-index: 9999;
top: 70px;
width: 50px;
height: 50px;
background: #0FF;
}
.cell {
border: 2px solid #F00;
overflow: auto;
}
<div class="cell">
Here is some text to keep things interesting
<div class="boxy"></div>
</div>
Absolute-positioned elements do not contribute to the dimensions of their parents.
Therefore, the .cell DIV has no content that affects its dimensions, making it 100% wide by 0px high.
To make the element appear, you'll have to add a height to .cell that will encompass the DIV, in this case 120px (70px top + 50px height).
The Parent Class cell need to be set it's height. because height of absolute element doesn't affect it;s parent.
.boxy {
position: absolute;
z-index: 9999;
top:70px;
width: 50px;
height: 50px;
background: #0FF;
}
.cell {
border: 2px solid #F00;
position: relative;
/* comment these two lines out and the box appears */
/* or change them both to 'visible' */
/* changing only one of them to 'visible' does not work */
overflow-y: auto;
overflow-x: auto;
min-height: 120px; /* height 70px(Top)+50px*/
}
Your problem
Your problem is related to cell node that hides boxy when overflow is specified on cell node.
The reason
The reason behind is that boxy with position absolute does not contribute to height of cell and overflow hides it.
Why is it shown without overflow?
By default overflow is visible, which for browser means do not do anything special for overflow functionality and it does not need to render overflow => does not hide boxy.
Z-indices are local inside their clipping hierarchical parent context. This is very non-intuitive. They have their own z-stack context, which normally parallels that of the enclosure hierarchy. But they're still subject to clipping! Which can be a real pain if you're intuitively expecting the z-indices to be absolute.
Note that some jquery containers, such as accordion, quietly specify overflow: auto. Even if it's not explicitly in your code. (This can be overridden locally after it's found.)
Also note that if overflow-x: visible is set, but overflow-y is set to a non-visible, then the rendering engine quietly internally changes overflow-x to be the same as overflow-y for your amusement. But you found this out already.
You probably should be able to circumvent the unwanted non-"visible" overflow clipping, even with your high z-index, by invoking transform: translate(0,0); [or whatever desired offset, % or pixels] inside the style of the div that you want to levitate. Transform should create a new local z-stack for that element and its children. Which will let you get around an overly-restrictive parent or grandparent.
In Firefox (correctly, I believe), no red div is seen due to width: 0 but in Chrome, it is displayed as having 1px width. This seems like an issue with recent versions of Chrome. This fiddle shows the issue.
The code is:
<div id="wrapper">
<div></div>
</div>
#wrapper {
background: yellow;
height: 100px;
width: 100px;
}
#wrapper div {
display: table-cell;
height: 100px;
width: 0px;
background: red;
}
Does anyone know why this happens or a workaround?
Chrome (and other webkit-based browsers) will only allow a table cell to have zero size if it has no content, no background, and no borders. Add any one of those things, and you get the 1px minimum width and height.
In this particular case, you might be able to work around the bug by setting overflow: hidden on the container div and then shifting the table-cell div left 1px via relative positioning. Firefox ignores relative positioning on table cells, so it shouldn't be affected. Don't know about IE, etc.. The downside is that, if any content does ever get added to the table-cell div, its left edge will be cut off by 1px.
I have a div with lots of content in it, and trying to set a width to be 100% of the parent element. This div also uses a padding, so I thought I should be setting the width to auto.
But for some reason it always expands past the parent width. I even have overflow set to scroll.
What I want is the div to have a scroll bar (only horizontal), and its width to fit the parent width.
Does anyone know how I can fix this?
100% width of its parent, with padding:
Given that the padding you mention is applied to the 100% wide element, the problem is within the box model that browsers use. If you apply 100% width and some padding, the element will get width + padding as its complete width, thus causing it to become too large. There are a few ways to solve this:
CSS3 introduces a new property called box-sizing, by setting it to border-box, the padding will be added within the given width of the element, instead of adding to the width causing the element to become "to big". (Notice the lack of support by older browsers).
I believe it would be possible to use left: 0; right: 0; instead of using width: 100%;. In that case you can add padding, without the element becoming to wide.
The second option in practice:
<!-- The markup -->
<div class="parent">
<div class="child">Child</div>
</div>
/* The CSS */
.parent {
width: 200px;
height: 200px;
position: relative;
background-color: #666;
}
.child {
position: absolute;
left: 0;
right: 0;
padding: 10px;
background-color: #888;
}
Here is a working example of the second option: http://jsfiddle.net/mGLRD/
Horizontal scroll-bar:
To get a horizontal scroll-bar, you will have to look in to the overflow-x CSS-property. By setting it to scroll, you will see a disabled scrollbar when there is no content to scroll, so the scrollbar is always visible. Your other option is to set it to auto, where the scrollbar will become visible if needed (may vary between different browsers).
Try:
div#content {
width:auto;
padding:20px;
overflow-x:auto;
}
See my demo: http://jsfiddle.net/HRRsU/3/
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
http://www.w3schools.com/cssref/css3_pr_box-sizing.asp
I have a div container (header)
div.header {
width: 1024px;
height: 115px;
background-color: black;
}
which contains a h1 named header_title with a text inside:
#header_title {
font: 80px 'Oxygen', sans-serif;
letter-spacing: -8px;
margin-left: 25px;
text-shadow: 500px 35px 18px white, 300px -50px 30px lightblue;
}
Exactly below header div i have my menu, like you see in my image.
If I set a text shadow that will go out the div, (the 4th letter, a 'g') ho can I make it displaying anyway and don't be cut off?
I tried overflow: visible, and z-index solution, but it doesn't work =(
Thanks.
Markup for header:
<div class=header>
<h1 id=header_title>Programmazione</h1>
</div> <!-- fine header -->
<div class=menu>
etc......
Try deleting the height property of the header and give it a padding-bottom of about say 15px for the shadow. That should do the trick.
I don't your HTML markup to test and be sure, but I believe that what is happening is that the the shadow is going outside the header div. I see no reason in the CSS you've provided that it wouldn't be.
What is happening is that the menu image that follows is blocking it. For most browsers, if you are positioning items by default (ie not absolutely, not relatively, not fixed) then, in situations where they overlap, the following neighbor is above. Also, if you are positioning elements this way, the z-index does not affect them. z-index only works on relative, absolute, and fixed elements.
One solution is to give both elements position:relative; and then the position your header div higher than the menu using z-index.
I currently have a footer that uses a 3 column layout with a fixed center and fluid sides in order to get a nice box shadow effect. When the window is too small however, it pushes the footer to the left, and messes everything up.
I can't seem to figure out how to make sure the footer divs do not get pushed around. I keep running into this problem with my layouts.
The layout I am working on is here, and a screencast showing the problem is here.
The easiest solution is simply to add min-width:980px to #container.
#container {
background: none repeat scroll 0 0 #A8D9A7;
height: 100%;
min-height: 100%;
position: relative;
z-index: 5;
min-width: 980px; /* add this */
}
The 980px figure comes from the width:960px + padding-left:10px + padding-right:10px of the #content-container.
The container element for your main page body (<div id="body">) has computed padding-left of 10px, and the second container element, (<div id="content-container">) adds another padding-left of 10px, meaning your main body is padded from the left by 20px.
Whereas the container for your footer (<div id="footer-container">) has computed padding-left of 0.
If you add this, it will fix your problem. #footer-container {padding: 0 20px;}
Revised as the above solution messed up bottom box-shadow.
In the #footer-left-outer { rule change:
margin-right:470px;
to:
margin-right:-490px;
In the #footer-right-outer { rule change:
margin-left:-470px;
to:
margin-left:-490px;
In the #footer { rule change:
padding: 10px 10px 10px 10px;
width: 940px;
to:
padding: 10px 30px;
width: 980px;
I now understand why you were using the outer-right and outer-left.
I found a different solution that includes the partial box-shadow effect:
http://jsfiddle.net/nottrobin/Cr4NF/10/
It avoids the need for footer-left-outer and footer-right-outer but I'll leave it up to you to decide if it's neater.
It makes use of :before which only works in IE8 onwards:
http://caniuse.com/#search=:before
But then box-shadow doesn't work in IEs < 9 anyway:
http://caniuse.com/#search=box-shadow