ansaurus

Question

Why is adding overflow:hidden causing an element to shrink

Answer 1

A:

Chances are the size of the label or some other element is smaller than the total size of elements inside it, and adding overflow: hidden prevents it from stretching to accommodate its larger children, but rather stays at the predefined size.

nearlymonolith 2010-06-29 14:45:48

Answer 2

A:

Hi,

overflow:hidden, hides vertical and horizontal overflow, its possible that you are stretching box vertically

you need to check margin, padding, line-height and fontsizes used.

Fire-Bug is very helpful in these cases to see what going on, and where is extra space coming from as you can toggle css properties on/off.

Hope it helps. P.S. you can send me IP i will take a quick look...

Borik 2010-06-29 14:52:25

I've looked at it with firebug, can't see anything change with and without though. Looks like there isn't a PM system here... If you send me an email to [removed] I'll forward you the IP. Thanks!

Josh 2010-06-29 17:33:41

Answer 3

A:

Well, without even sample HTML/CSS that replicates the problem, it's going to be very hard to resolve this, but one thing that could be a problem is that your HTML is invalid here. A <label> does not allow block-level elements inside it, which both <iframe> and <p> are. The various browsers may not have a consistent handling of this situation because they don't need to in order to be compliant with the spec.

Charles Boyung 2010-06-29 15:02:42

Span is also an inline element, so as such you cannot legally put block elements inside that either. You aren't supposed to put any block element inside any inline element. Not sure if this is the cause of the problem here at all, but it could cause other issues as well.

Charles Boyung 2010-06-29 15:22:39

sent you an email

Charles Boyung 2010-06-29 15:25:27

Answer 4

A:

If you give the paragraph the style overflow-x: hidden so it's just the width the overflow affects?

aligreene 2010-06-29 15:11:33

Sounds like that should work, but it didn't, did the same thing :S

Josh 2010-06-29 15:18:16

I've emailed you there if you want to send on the IP? Wouldn't mind seeing the code.

aligreene 2010-06-29 15:58:52

Answer 5

+1 A:

Removing the invalid HTML, I can duplicate the issue, so that clearly means the invalid HTML isn't the cause :)

This appears to be an issue with inline-block styled elements with overflow set to anything other than visible. Check out this simple example:

<html>
<head>
<style>
span
{
    display: inline-block;
    border: 1px solid red;
    margin: 0;
    padding: 0;
    width: 50px;
}
#b
{
    overflow-x: hidden;
}

</style>
</head>

<body>
<span id="a">test</span>

<span id="b">test2test2test2test2test2test2test2test2test2test2test2test2test2</span>
</body>

</html>

The second span shows up just how you describe. However, if you change those spans to display: block, and float them, they will line up vertically.

It looks like this is a bug in the two browsers where it doesn't work as expected. Unfortunately, I don't think there's a way to fix it the way you are styling it now, but you should be able to redo your styles to use floats to get the same overall look for that box.

Charles Boyung 2010-06-29 16:03:03

Very helpful, thanks! I've now overridden the toolbar using display:block and float:inline as suggested, everythings lining up nicely! Noticed a minor issue I should be able to sort, the toolbar div is 4px taller than the tallest span in all browsers, but it doesn't seem to have anything to do with padding or margins.

Josh 2010-06-29 16:26:49

Also, wasn't aware of the no block-elements inside inline-element rule, thanks for pointing that out!

Josh 2010-06-29 16:27:43

ansaurus

tags:

views:

answers:

Why is adding overflow:hidden causing an element to shrink

related questions