In all major browsers: as the question states, a parent <div> container (whose height is not set) over-sizes its height to fit a child <img> element (for instance, a 300-pixel tall image that is the only thing inside the div). The over-sizing is usually about 3 to 5 pixels, and appears at first as img margin-bottom or div padding-bottom might look.
However, using absolute positioning, it is clearly demonstrated that the bottom of the div is below the bottom of the imgby a few pixels. It might not ruin a website's design, but it is a hurdle to overcome in certain situations. I have made a fairly detailed fiddle demonstrating this issue here.
Why is this standard practice in web browsers?
Is this meant to compensate for something? It seems unnecessary.
Is this a bug, or a soon-to-be antiquated feature?
EDIT: Thanks to the answerers/commentators below, I know the reason is that an <img> is treated by default as CSS
display:inline which preserves whitespace around the element.
Changing it to display:block completely fixes the problem by
eliminating whitespace around the element.
Notes: This over-sizing can be averted by giving the image child element a CSS property of float:left or float:right, etc., but this is a workaround, and as such is not the answer to the question. One reason this can be problematic is if you already have other float elements layered in front of the div child image (float overlap not allowed Firefox, Opera, IE. float overlapping only seems allowed in Chrome and Safari using CSS position settings). Thanks!
Add display:block to your image. I think that will fix the problem.
Related
See My Fiddle:
http://jsfiddle.net/5BEsZ/
I've discovered something very strange that I haven't seen documented anywhere else... Was wondering if you all had a solution.
You'll notice the negative margin hits a limit at around -212% for image elements. Is there a reason for this? Can you think of a work around?
Why I Need This (what I've tried):
I'm making a fluid layout and I want to display a rating system. I have a sprite sheet of stars (similar to the one in the fiddle) that I want to reuse at various sizes.
Because the size changes I can't use a background image. So I decided to use an image inside a container with a variable width and overflow:hidden. The sprite sheet adjusts to the width of the container and the container's viewable content is determined by a padding-top:20%. This is so it can be fluid with its width (since every star is a box, the total height is 20% the width).
Then I try and position the star image inside the container with margin-top. I tried using position:relative and a top:-X%, but because the container technically has no height this was causing issue on mobile phones (-100% of 0 is 0, etc).
So I assumed negative margin would work, but then discovered this strange issue!
NOTE: Because it affects only the last row I can make it work in my situation by using a padding-bottom instead of top (thereby bumping every star row up 1), but this isn't an adequate solution for me because it just ignores the problem. What if I wanted quarter stars?
I've updated your fiddle. img tags are "inline" elements by default, which impacts the way margin is calculated relative to the containing element. By forcing the image element to be rendered like a block (display: block), you're able to achieve the results you were expecting. A div element is a block by default.
As a side note, you'll want to avoid using inline styles (a different sort of "inline"!) wherever possible. Typically your styles would be included in a stylesheet instead of in a style attribute directly on the element. I included the fix (display: block) in the attribute to match the code style of your html.
I don't know why, but if you float the image the problem goes away.
<img src="http://www.whitepages.com/common/images/sprite_stars.gif?1343868502" id="stars" style="width:100%; float: left;" />
So, the answer to fix your problem: http://jsfiddle.net/5BEsZ/2/
If anyone could explain why this happens?
I am trying to absolutely position an element inside a table cell.
The TD has position:relative and the element has position:absolute.
This works great in all browsers except in Firefox where it is positioned relative to an ancestor relative container.
You can see this reproduced in this fiddle: http://jsfiddle.net/ac5CR/1/
Does anyone know if I miss some CSS setting that can fix that in Firefox?
the element is not a block element.
add to the style display:block, you will get the needed behavior.
A possible work around would be to wrap the position:absolute element with another position:relative div. It requires an extra div, which is lame, but will give you the right result.
Example: http://jsfiddle.net/pTJUk/
Note -- this still won't give a completely correct result, as the position:relative div will be relative to the text position in the td -- crazy, right? Giving the cell a vertical-align:top will make it orient to 0,0, but of course this could be at the cost of other formatting your design requires.
It was a very old Firefox bug that have been fixed about 13 years after being reported!
You may refer to the entertaining history here:
https://bugzilla.mozilla.org/show_bug.cgi?id=63895
I'm trying to make a box with rounded corners where the height and width of the div depends on the content, so it's automatically adjust to it...
You can see the example here: http://pastehtml.com/view/1duizyf.html
The problem is that i can't get the "test_mid_left" (black background) and "test_mid_right" (turquoise background) to inherit the height from the "test_mid_center" (green background). I have tried height: 100% and auto, but none of thoose work. So how do I get them to inherit the height from the content?
(The reason why I have used "min-height: xx" in the left and right content on the example is just to show which boxes I am talking about)
As already mentioned this can't be done with floats, they can't inherit heights, they're unaware of their siblings so for example the side two floats don't know the height of the centre content, so they can't inherit from anything.
Usually inherited height has to come from either an element which has an explicit height or if height: 100%; has been passed down through the display tree to it.. The only thing I'm aware of that passes on height which hasn't come from top of the "tree" is an absolutely positioned element - so you could for example absolutely position all the top right bottom left sides and corners (you know the height and width of the corners anyway) And as you seem to know the widths (of left/right borders) and heights of top/bottom) borders, and the widths of the top/bottom centers, are easy at 100% - the only thing that needs calculating is the height of the right/left sides if the content grows -
This you can do, even without using all four positioning co-ordinates which IE6 /7 doesn't support
I've put up an example based on what you gave, it does rely on a fixed width (your frame), but I think it could work with a flexible width too? the uses of this could be cool for those fancy image borders we can't get support for until multiple background images or image borders become fully available.. who knows, I was playing, so just sticking it out there!
proof of concept example is here
The Problem
When an element is floated, its parent no longer contains it because the float is removed from the flow. The floated element is out of the natural flow, so all block elements will render as if the floated element is not even there, so a parent container will not fully expand to hold the floated child element.
Take a look at the following article to get a better idea of how the CSS Float property works:
The Mystery Of The CSS Float Property
A Potential Solution
Now, I think the following article resembles what you're trying to do. Take a look at it and see if you can solve your problem.
Equal Height Columns with Cross-Browser CSS
I hope this helps.
The negative margin trick:
http://pastehtml.com/view/1dujbt3.html
Not elegant, I suppose, but it works in some cases.
You need to take out a float: left; property... because when you use float the parent div do not grub the height of it's children... If you want the parent dive to get the children height you need to give to the parent div a css property overflow:hidden;
But to solve your problem you can use display: table-cell; instead of float... it will automatically scale the div height to its parent height...
Most of the times, the Previous parent has a heigt manually set, so you can use that value as reference, no other dirty tricks will be needed, and if the number is not the same for any reason maybe a comment can be added with the original number so in case you need to change it, by searching at the all the values, this one can be adjusted or even changed, in the time someone resolve this one for us.
I have two divs inside a container, the first one has absolute positioning. In ie7, the second div apparently ignores the top margin. Padding seems to work fine, but for visual reasons I have to use margin.
I know the culprit is the absolute positioned div because if i remove it the following div works fine.
This is only happening in ie7 (not even in ie6).
Help!
Edit: I just found a solution which consists of giving the parent div padding-top just for ie7. So I would just like to know why does this happen, and if there is one, a cleaner solution, but I dont need more dirty hacks..
This is what we call margin collapsing. You could try to positioning the second div too.
You could find more information about margin collapsing.
Just check the conditions below if you have any of them in your code before start reading the whole article.
BODY elements never take part in
margin collapsing, since they are
considered magical, which means
sometimes a strange gap does not show
up in Internet Explorer when it does
in other browsers, when the collapse
happens with the top of the BODY. This
is usually easy to solve; just prevent
the margin collapse for the other
browsers, and it works in Internet
Explorer too. (Note that the HTML
element's margins never collapse in
any browser, this is correct
behaviour.)
In rare cases, margin collapsing where
an inner element has a bottom border
and an outer container has a bottom
border, can cause the background of an
intermediate element to spill into the
container in Internet Explorer.
The more problematic bug is caused by
Internet Explorer's strange hasLayout
behaviour. This is a fundamental bug
in Internet Explorer 7- and affects
several other things as well, but this
article will only deal with margin
collapsing. Setting certain styles on
an element makes it "have layout" (a
concept unique to Internet Explorer,
and not compliant with any standards).
The most common style that causes a
problem is width. When an element
hasLayout it suddenly assumes a
minimum height of 1em, and if set to
something less in Internet Explorer 6,
such as 0.5em, it still uses 1em.
An element has layout when one of the following conditions is true:
It has a width and/or a height specified
It is an inline-block (display: inline-block)
It has absolute positioning (position: absolute)
It is a float (float: left, float: right)
It is a table element
It is transformed (style="zoom: 1")
Height usually does not cause a
problem, since setting height will
prevent collapsing in other browsers
anyway. However, triggering hasLayout
on a nested element where the parent
has prevented margin collapsing using
borders or padding, can cause margins
to disappear, or to collapse through
the parent irrespective of the padding
or borders. Generally, hasLayout is a
mess, and it is best to avoid it in
places where margins are critical.
I hope this will help you to go through with your problems.
In my case nothing above helps. I use the additional DIV between these elements. This additional DIV has clear: both, flot: none etc. See http://starikovs.com/2010/12/24/ie7-margin-top-and-absolute-pos-element/ for more info.
I used position:static; on the larger div (with position:relative on the content inside) on the ignored margin for an IE7 fix. The smaller left hand side column remained position:absolute. This was used on a Jquery vertical tab.
http://code.google.com/p/jquery-vert-tabs/downloads/detail?name=jQuery%20Vertical%20Tabs%201.1.4.zip&can=2&q=
I am making a Web page with a slideshow, using the same technique used on http://zine.pocoo.org/. The person I'm making the site for wants the slideshow to be centered. However, some of the photos are portrait layout and some are landscape. (This was not my choice.) I need a position: absolute to get the li's containing the items in the right place, so centering them does not work. (At least, not by normal methods.)
So, I thought that it might work to insert a 124-pixel "spacer" before the image on the portrait pictures. I tried it with a <span style="width: 124px;"> </span>, but it only inserts a single space, not the full 124 pixels. The slideshow fades in and out OK, though, so I think that it would work if I could get the proper spacing.
My question is this: does anyone know a way to have 124px of space inline in HTML (preferably without using images), or another way to center the pictures in the li items?
This is way old, but I guess it's still worth answering. The reason your span isn't expanding is because it's still an inline element. set display:inline-block to get it to behave more like a block element
I think you need to add margin-left instead of padding-left, because the margin is outside an element, and the padding is inside.
Try to avoid putting large spacers on elements and especially on multiple elements. The only way to add a spacer on your element would be relative positioning or an inline-block element (use carefully.)
Your best bet for the slideshow is to have a relative positioned <ul>. Since the <ul> is relative positioned you can set the <li>s to be position:absolute; within the <ul>. At this point you can set the <li>s to width:100%; and text-align:center; so that anything inside is positioned in the horizontal center (vertical centering in CSS2 is tricky.) Check out http://jquery.malsup.com/cycle/ which outputs inline styling by default but is still really nice.