inline-block

inline-block messes up with relative positioning

Hi, I have the following code: <HTML> <head> <style>div{border:dashed 1px silver}</style> </head> <BODY style="background: #fff;"> <div style="position: absolute; background: #0f0; width: 256px; height: 96px; overflow: scroll;"> <DIV style=" display: inline-block;position: relative;top: 64px; left: 32px;"> <DIV style="width: 18px...

Trouble with using jQuery remove() on elements that are inline-block

I have a horizontal line of div elements that are display:inline-block and top aligned. I can add elements, and the line expands. When I remove elements by animating the width to 0, the line doesn't retain it's single line appearance, but rather forces a second line to temporarily appear during the animation. The behavior is the same i...

Prevent inline-block from wrapping on white-space: pre?

It seems Chrome is wrapping an inline-block element if it is at the end of a line even if there is a white-space:pre container around it with overflow: auto. Is there a workable solution to prevent this from happening without changing the content? <div style="width:400px;height:200px;overflow:auto;white-space:pre"> The span should be at...

Stretching width correctly to 100% of an inline-block element in IE6 and IE7

I have the following markup, where I am attempting to get the right hand side of the second table to align with the right hand side of the heading above it. This works in IE8, Firefox and Chrome, but in IE6/7 the table is incorrectly stretched to fill the width of the page. I'm using the Trip Switch hasLayout trigger to apply inline-blo...

CSS display: inline-block and width: 100% does not work on IE6 and IE7

CSS display: inline-block and width: 100% does not work on IE6 and IE7. Does anyone have some solution? Thanks! <style> nav {text-align: justify;} nav li {display: inline-block; white-space: nowrap;} nav span {display: inline-block; width: 100%;} </style> ... <nav> <ul> <li>Home Page</li> <li>Services</li> <li>Clients</li>...

Developing custom buttons with "drop-down" feature but having problems in - what else - Internet Explorer 7+

I'm trying to create a set of custom buttons that include a button with a "down arrow" icon to indicate that when you click it a drop-down menu will appear underneath it. The functionality works fine in all the browsers I'm supporting (IE7+, FF3+, Chrome, Safari 4+, Opera 10+), but the appearance is screwed up in IE7. I can deal with th...