CODEWITHSUNDEEP
cssjquery-ui
Josh
Josh

Reputation: 1281

Why is adding overflow:hidden causing an element to shrink

I'm using jQuery UI, and have built a toolbar (a div element), with button groups (span element), each containing buttons, radios etc.

On some of the radio buttons, I have created complex labels to simulate MS Word 2007 style buttons. There is an iframe with a style preview, and a p element with the button name.

E.g. 

<label ... >
   <iframe ... ></iframe>
   <p>Button Name</p>
</label>

Some button names could be very long, so I gave the p class "overflow:hidden". This has corrected the overflow, but the label has shrunk in height slightly in firefox, and in IE8, normal buttons are displayed higher up. Chrome displays exactly how I expect, versions of IE lower than 8 aren't important.

Here is a screenshot showing the problem: http://img155.imageshack.us/img155/1504/layoutissue.jpg

The actual page is fairly complex, and generated with JS, so I can't copy/paste it here. I don't know what other CSS to post to give people an idea either, but if anyones interested I'll PM you my IP so you can have a look.

I'd be grateful for any suggestions.

Upvotes: 0

Views: 2583

Answers (6)

chinanzio
chinanzio

Reputation: 96

bugzilla already knows about this bug, to fix it just set vertical-align: top; to the spans or divs, regards

Upvotes: 0

Charles Boyung
Charles Boyung

Reputation: 2481

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.

Upvotes: 1

aligreene
aligreene

Reputation: 37

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

Upvotes: 0

Charles Boyung
Charles Boyung

Reputation: 2481

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.

Upvotes: 0

Borik
Borik

Reputation: 438

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...

Upvotes: 1

nearlymonolith
nearlymonolith

Reputation: 946

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.

Upvotes: 0

Related Questions