I don't use Bootstrap or reset.css/reboot.css, I am trying to built a website with generic css.
I am doing pretty basic things but I get "This element is causing an element to overflow" literally everywhere. I haven't done layouts without any css framework for quite some time and I can not find anything about this issue. Even a br is causing an overflow! What is this? I don't see any scorlls and everything looks just like I expect. This message is just annoying.
I inspected a little bit more and discovered that images are causing this. But I have
.img-responsive, .responsive {
height: auto;
max-width: 100%;
}
.img-thumbnail, .thumbnail {
padding: 0.25rem;
background-color: white;
border: 1px solid #dee2e6;
border-radius: 0.25rem;
box-sizing: border-box;
}
And if I delete this image, overflow message will go away for a few elements below. Can anybody tell me what's going on?
This will help.
html {
width: 100%;
}
From MDN:
A scroll container is created by applying overflow: scroll to a container, or overflow: auto when there is enough content to cause overflow. The Firefox DevTools make it easy to discover both scrollable elements and any elements that are causing overflow.
In the HTML Pane, a scrollable element has the scroll badge next to it...
You can toggle the scroll badge to highlight elements causing an overflow, expanding nodes as needed to make the nodes visible...
You will also see an overflow badge next to the node causing the overflow.
So, if the container has content that is overflowing, it'll be marked with overflow, as you've noticed. Either adjust the content to not overflow, or adjust the container itself to allow for the content without overflowing. The DevTools badges you've noted can be used to identify which items are overflowing which container.
I suggest to create a reset in html
/* ------------ Reset CSS ------------ */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
width: 100vw;
height: 100vh;
}
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.
Long time learner, first time poster.
Here's my dev site: http://kcyc.webstuffdepot.com
I'm using a bit of jquery to add a class - 'sticky-header' - to the header of the site. Sticky-header makes the header scroll with the user. Here's my CSS:
.sticky-header {
z-index: 99999;
position: fixed;
width: 100%;
border-bottom: 1px solid #ccc;
min-height: 60px !important;
background: #fff;
}
I've used this setup many times with the same Genesis theme and it's been great. With this application, however, something weird is happening. As you scroll, the header flickers in and out, interacting with elements below it.
The part of the header that blinks in and out is always consistent, as though it is being interrupted by an unseen page element. I can't find any page element that is consistent throughout the site that would be causing this behavior.
I'm wondering if you fine fellows could point something out to me, or know some aspect of the CSS I'm trying to use that's causing confusion in the display.
You would have to set the width and position on your wrapper div as well because you are floating your aside and setting it at a width of 50%.
Since the wrapper div does not have a set width, the wrapper doesn't know what width to take (50% of what?). The wrapper div also needs to be relative to the header position to inherit the z-index. I used the below code and it fixed the problem.
.sticky-header .wrap {
padding: 10px 0px;
width: 100%;
position: relative;
}
I've run into what seems like a very specific bug in IE9 layout rendering, where the height of a div with box-sizing: border-box and a min-height is calculated incorrectly when the inner content is resized.
Given the following markup and CSS:
<div class="constrained">
<div class="content">Content</div>
</div>
* { box-sizing: border-box; }
.constrained {
border: 1px solid blue;
min-height: 300px;
padding: 10px;
overflow-x: auto;
}
The div.constrained renders appropriately at 300px height (278px inner height) when the page loads. When new content is injected into div.content via JavaScript, the div.constrained container grows to 322px height, as if the box-sizing were no longer applied.
JSFiddle demonstration:
http://jsfiddle.net/eafztwb2/16/
This only occurs with overflow values of auto, visible or scroll. Setting the overflow-x to hidden, or inherit (so long as inherit doesn't end up evaluating to one of the former) does not show the problem.
This isn't a question so much as knowledge-sharing, but I'd be interested in solutions that work around this while still allowing overflow-x: auto.
This definitely does look like a layout bug, but fortunately the work-around is pretty simple. Apply a height to your element, along with the min-height. For example:
.constrained {
height: 100%;
min-height: 300px;
}
The issue exists in Internet Explorer 10 as well. This solution works for both IE 9 and 10. Internet Explorer 11 appears to have resolved this on its own - I was unable to repro the issue there.
Fiddle: http://jsfiddle.net/eafztwb2/23/
I have here a code in Dabblet: http://dabblet.com/gist/5705036
I wanted to have these segment to stick at their position even if the browser is re-sized without using absolute positioning. Like for example, The main content container breaks a new line when the browser is re-sized [I use CSS Floats in most of my containers].
Is there something wrong with my coding?
Do floats proper for layouts ? or I need to use anything else?..
I just can't fix it by myself and by doing a lot of research , still, haven't got a good idea to use it as a way to fix this. [Also, I use HTML5 tags such as: section, article, nav, etc.. ]
Just remove the float:left; from maincontent id and apply a display:table-cell;. Your issue will be resolved.
Here is the code.
#maincontent {
border: 1px solid #BBBBBB;
border-radius: 5px 5px 5px 5px;
display: table-cell;
margin-top: 15px;
min-height: 400px;
padding: 2px 6px;
width: 700px;
}
Hope this helps.
First of all You should always clear parent element if You use floats inside the parent element. Your right element go down because You don't have minimal width of container, ther is sample of code:
#contentWrapper {
width: 1000px;
overflow: hidden; /*scroll / auto it's depends on You */
}
I noticed that in your code you had a space in <div id="contentWrapper "> which stopped your CSS for that element from appearing. Also, you needed 2 more pixels of width on your #contentWrapper.
#contentWrapper {
width: 992px;
}
Removing the space and changing the width of #contentWrapper worked for me. I had a quick look at the maths but haven't worked out why it needs to be 992px. Anyone?
So, in answer to your question, I'd say floats are fine and your approach is good, there were just those two minor errors.
I have a margin below my footer in most browsers. Not in Chrome though. See enter link description here
Both body and my page wrapper have margin: 0. Wrapper is also height: 100%.
Here's the footer code:
#colophon {
clear: both;
display: table;
width: 960px;
max-width: 960px;
background: #131313;
border-top: 3px solid #0099cc;
border-collapse: collapse;
}
Adding margin: 0 there doesn't help. Shouldn't be necessary anyway. What am I missing?
In the bottom of your code I found this
<img alt="" src="http://stats.wordpress.com/g.gif?host=atlanticsentinel.com&rand=0.059020346471435614&blog=28342037&v=ext&post=0&ref=" id="wpstats">
If you remove that it works. What you should do is add display: none to that image in the CSS.
I saw that you have added visibility: hidden. When you do that it hides the image but the image will still take up room in the DOM.
Your wordpress stats tracker image is set to visibility: hidden, and follows your body tag. It is this image which creates your extra footer spacing, as you can see by changing the image like so img#wpstats { display: none; } (don't leave it like this - see below)
I'd move that image within your main footer (ie #colophon) somewhere it won't cause a problem. Alternatively, you could set it to position: absolute to remove it from the flow entirely. You can't set it as display: none as the browser needs to load the image in order for your tracking to work.
the issue is caused by your latest image img#wpstats because its visibility property is hidden
if you set display: none to that image (or make it absolutely positioned adjusting negative top or left properties) you solve the problem