span tag height in Firefox

Question

Using CSS,

I'm trying to specify the height of a span tag in Firefox, but it's just not accepting it (IE does).

Firefox accepts the height if I use a div, but the problem with using a div is the annoying line break after it, which I can't have in this particular instance.

I tried setting the CSS style attribute of:

display: inline

for the div, but Firefox seems to revert that to span behavior anyway and ignores the height attribute once again.

Answer 1

You can set any element to display: inline-block to allow it to receive a height or width. This also allows you to apply any other "block styles" to an element.

One thing to be careful about however is that Firefox 2 does not support this property. Firefox 3 is the first Mozilla-based browser to support this property. All other browsers support this property, including Internet Explorer.

Keep in mind that inline-block does not allow you to set text alignment inside the element on Firefox if running in quirks mode. All other browsers allow this as far as I know. If you want to set text-alignment while running in quirks mode, you'll have to use the property -moz-inline-stack instead of inline-block. Keep in mind this is a Mozilla-only property so you'll have to do some browser detection to ensure only Mozilla gets this, while other browsers get the standard inline-block.

Answer 2

<style>
#div1 { float:left; height:20px; width:20px; }
#div2 { float:left; height:30px; width:30px }
</style>

<div id="div1">FirstDiv</div>
<div id="div2">SecondDiv</div>

As long as the container for whatever is holding div's 1 and 2 is wide enough for them to fit, this should be fine.