I have noticed that both IE6 and IE7 push the parent div down when an element inside has padding-bottom ... what is the best fix for this? Is it possible to fix this with valid css?
EDIT
The solution I used was to set overflow: auto in the child element (as mentioned below in the accepted answer). I went with this approach because my child element height was dynamic, and thus I couldn't set it.
padding-bottom is added to the child elements total height, so even if the child element is empty, padding-bottom:10px; will give it a total height of 10px. And in all modern browsers, the parent element will expand to give space to it's child(s).
But if you wish to have a set height on the parent, you could just set a height on the parent and control the child's content by overflow:auto/hidden/scroll..
Or you could set parent as position:relative; and set position:absolute; to the child element.
Kinda depends on exactly what you want..
Check your setting a doctype and not running into quirksmode, next use a reset stylesheet to make sure that all your elements start of on the same foot.
If your still getting additional padding in a certain version of IE, use a conditional comment to add an additional stylesheet for that browser.
I haven't seen IE8 or Firefox "push the parent down" when padding is applied to a child element; it's just that the parent element's height expands to accommodate the child. This is the correct automatic behaviour in CSS. I made a brief demo:
http://robertgrant.org/testbed/paddingbottom.xhtml
Feel free to try it in IE6/IE7 and see what happens (needs Javascript enabled to make the link work, but you can see what's going on even without that).
If you want to constrain the parent's height, then set it (e.g. height: 100px) and set its overflow property to hidden.
Related
I am building a lightbox which contains an article and some nav buttons which are positioned relative to the article (see pic). The article can be a variable length/height, but no bigger than the parent - the content should scroll with overflow:auto.
I've tried to build this using max-height:100%, but as mentioned in this question- Child with max-height: 100% overflows parent , if the parent element doesn't have an explicit height set, max-height resolves to none, so overflow:auto doesn't trigger. However, setting a height on the parent means the buttons are no longer positioned relative to the dynamic article height.
You can see a demo of this here: https://jsbin.com/hepivelele/edit?html,css,js,output
Click 'run with JS' then click anywhere in the demo to add more content to the article so it's longer than the page. Giving #wrap height:100% shows the opposite problem mentioned above.
Is there a solution to this problem?
You may add max-height: 90vh; to article element. Than it starts working without any other changes to markup or style.
Check modified example: https://jsbin.com/kofepotiji/edit?css,output
Current browser support is rather good: http://caniuse.com/#search=vw
The only drawback is that on really small heights padding of #lightbox becomes bigger than 10vh. This may be fixed by changing padding from px to vw and vh, but it occurs if height of viewport is less than 600-700px.
I've found some CSS templates where some classes have the overflow:hidden property, but no size defined. If I recall correctly, block elements stretch to fit their content unless otherwise specified. Since this is not the case, I feel that putting the overflow:hidden is pointless and I can delete it without hesitation. Is this right or am I missing something?
While that's the main purpose of the overflow property, it's not the only effect it has on rendering. The other major effect it has is that setting overflow to anything other than visible (the default) causes a block box to establish its own block formatting context.
This is mainly used to contain floats without the need for a clearfix; however that isn't the only effect of having a new BFC; there are a number of other corner cases that are better described elsewhere in the spec. Also see this lengthy write-up on the reasoning for this behavior (which, oddly enough, has very little to do with containing floats; that actually ends up being nothing more than a side effect).
So if you remove that overflow declaration, you may break float layouts, among other things. I suggest avoiding doing so unless it's absolutely necessary or you're sure it won't affect the layout.
If there are floating children inside that div, then overflow: hidden is probably there to contain them.
overflow: hidden creates a new block formatting context, and elements that create new block formatting contexts contain floats.
It may depend. if your div contains some floated elements you could use
div {
height: auto;
overflow : hidden;
}
as a workaround for the clearing. So I wouldn't delete that rule without seeing the effect on the layout
overflow:hidden can come in handy if you have a child element with a width specified which is greater than the container's max allowed width. Otherwise it will stretch the container.
See example
A common use of this is when displaying a carousel, with floated child elements. The elements need to appear inline, but hidden, so that they can come into vision when the left CSS property is changed.
I've set up a JS fiddle of what I'm working with. http://jsfiddle.net/bjankord/2EKQv/
It seems if I add a height to one of the child elements of a parent with display:box set, all the other child elements stretch to that height. I don't know if this is how the display:box and box-ordinal-group properties are supposed to work, if so that's unfortunate. I was hoping to be able to reorder my html markup with CSS using box-ordinal-group when working on responsive web designs, but this height issues is killing me.
I am by no means a flexbox expert but from some quick testing I think you might need to change your layout to be three vertical columns and add box-orient:vertical to each of the parent elements. In order to have one child element taller than the others set the box-flex: property to 2 on your withHeight class and set the min-height of that class to 300px;
Fiddle:
So I messed with your code a bit. I added a parent container with box-orient:horizontal to line up the three columns and gave each column box-orient:vertical. This seemed to fix the issue with height not being respected.
http://jsfiddle.net/mdJ2L/1/
I have a form that uses a div that is positions over some input elements. For some reason, those input elements are above the positioned div, even though the div has a high z-index. Really not sure why this is happening, as the input fields don't even use absolute positioning, so I would think they would never be on top of another element.
Example (Click into Person, Status or Residence field):
http://www.puc.edu/puc-life/funnybook/little-black-funnybook
It looks like you don't even need to set a high stacking order for the .item .answer selector, at least in the Gecko engine. Try removing the position and z-index and see if it's consistent x-browser?
Edit: Ah I forgot I had applied position:relative to the div.item element, can you try toggling that when it shows up and unset it when you hide it?
That or leave position:relative on all div.items through external CSS and toggle the z-index to be '2' when the stuff pops ups and back to auto when it's hidden.
z-index is the solution but it does not work proper with youtube movie iframe, for that you would have to use wmode='transparent'
I have a form I'm floating. When there is an error, via jquery, I'm adding some content to a p within the form. However, the form doesn't vertically resize to fit the new content. Is there something I have to do to get a floated element to resize when the content within it changes?
Do you have height or other css styling applied that would prevent it from vertically resizing?
Also, what browser(s) is it happening in? It may be a browser bug.
If the is floated, too, then depending on the styling (position: absolute), its dimensions may not be considered to be "in" the form.
Is there a height set on the content? When float is on, the default is to fix height to line height. It is possible that your width on the form is set too low, and the text is trailing off through the block element containing your form Try messing with the line-height property and see what you get. Also, position absolute will mess with you (as Richard mentions below)
Also, consider min-height. This won't work in IE6, but you can substitute with a height in IE6 which acts like min-height in certain circumstances.
Post you code so I can be more specific.