1

I'm trying to get an div with its display property set to inline (or inline-block if I want a margin) to behave correctly in IE (it does in most others). My situation is this - imagine a workspace in which an item container contains inline items laid out in a horizontal fashion. These items can hold things like text, or images, but also be composite types, say for example a 'fraction', whose numerator and denominator are themselves item containers, containing more horizontal items.

So for example, I might have the HTML:

<div class='item-container'>
    <div id='statictext' class='item'>x = </div>

    <div id='fraction' class='item'>
        <div id='numerator' class='item-container'>...</div>
        <hr/>
        <div id='denominator' class='item-container'>...</div>
    </div>
</div>

Clearly, I don't want fixed width or height for an item or item-container, because they can contain nested content which will increase the amount of space needed (e.g. imagine an fraction inside another fraction), and similarly if I want the width of a static text 'item' to be just big enough to contain the text on one line, i.e. inline.

The problem I think is that it's hard to avoid putting block elements inside my inline 'item'/'item-container' elements, for example the <hr> in the fraction, or if I want say a menu bar at the top of an 'item' that uses the whole width after the width of the rest of the item's contents has been calculated. I know it's invalid syntax to put an actual block item inside an inline one, although setting the block element's display attribute to inline or inline-block makes things behave correctly in Firefox/Chrome at least. But alas, not in IE.

Is there an adequate fix?

EDIT: I actually used inline-block (with the appropriate IE hack) for 'item' and 'item-container' to get it to work spiffingly in Firefox et al, but IE still treats them as inline, which then subsequently gets converted into block because one of its children is a block.

scessor
  • 15,995
  • 4
  • 43
  • 54
user1137080
  • 11
  • 2

1 Answers1

0

Don’t use <hr>. You can draw a line using text-decoration: underline or using a bottom border or using an image (say, a one-pixel image stretched to the desired width). Then you can work with inline elements.

Jukka K. Korpela
  • 195,524
  • 37
  • 270
  • 390
  • Thanks. I've endeavouring to make all internal elements inline, but it's somewhat annoying their isn't a cross-browser supported way of making elements fill whatever space is used. With the fraction line for example, using a border-bottom on the numerator or using text-decoration doesn't always yield the correct result, in cases where the denominator is wider than the numerator. – user1137080 Jan 08 '12 at 15:21