SPAN 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, funnily enough).

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 then revert to SPAN behaviour anyway, and ignores the height attribute once again.

Answer 1

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

Answer 2

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 3

Inline elements can't have heights (nor widths) like that. SPANs are already display: inline by default. Internet Explorer is actually the broken browser in this case.

Answer 4

Since you're displaying it inline, the height should be set at the height of your line-height attribute.

Depending on how it's laid out, you could always use float:left or float:right on the span/div to prevent the line break. But if you want it in the middle of a sentence, that option is out.

Answer 5

The problem is that 'display: inline' can't get a height associated because, being inline, it gets its height from its the content. Anyway, how do you define the height of a box that is broken at the end of a line?

You might try to set 'line-height' instead, or if this doesn't work to your satisfaction, set a padding:

/* makes the whole box higher by inserting a space between the border and the content */
padding: 0.5em 0;

Answer 6

You can only change the height (and width) of a span element when it is set to display: block;. This is because it is an inline element normally. div is set to display: block; normally.

A solution could be to use:

<div style="background: #f00;">
    Text <span style="padding: 14px 0 14px 0; background: #ff0;">wooo</span> text.
</div>

Answer 7

To set height of span following should work in firefox

span {
  display: block;
  height: 50px;
}

Answer 8

text alignment inside the element you can adjust using the padding and block-inline attributes. display:inline-block; padding-top:3px; for example

Answer 9

height in em = relative line-height

for example height:1.1em with line-height:1.1

= 100% filled