Home/ Questions/Q 900863
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-15T15:27:41+00:00

I’m using jQuery UI, and have built a toolbar (a div element), with button

  • 0

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.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0