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

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 2

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 3

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 4

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 5

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

@Ross - that example breaks down when you have longer content, though, as the span's background flows into the next line of text. @Cade's floating might be a better solution in some cases.

Answer 7

@ceejayox

You're right. This could be fixed by either adding a line-height to the span or the text wrapper (<p> or <div> in my example). However this would make the surrounding text the same height, thus rendering the span useless (aside from adding a background or other decoration).

This could be made neater by reducing the (crazy) amount of padding on the span as well.

---

@Steve M

How are you trying to apply this? What context?

Answer 8

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 selector. 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. All other browsers allow this as far as I know. If you want to set text-alignment, 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 9

@Dan - another thing to be careful of is wrapping. If, as I suspect, the questioner's intent is to have some text in a paragraph have some sort of background colour emphasis, inline-block is going to make things look really odd as it wraps.

Answer 10

height in em = relative line-height

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

= 100% filled

Answer 11

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

Answer 12

To set height of span following should work in firefox

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