FF2 Span width problem

A jquery plugin I use, uses spans with set widths. The HTML was displaying fine on all versions of browsers I got on my main PC, but when I was using my other PC the other day I noticed the spans were not using the width specified.
How can I get around this problem (with css), without changing the code to DIVs. I need them to still be “inline” (like spans) but I also need them to have fixed widths (like DIVs).

Hope that makes sense.

Thanks.

Have a look here.

that’s a good question but I can’t test in FF2 - I don’t bother testing in that browser anymore. It sounds like you are wanting an inline-block to me unfortunately that doesn’t have great support.

Can you provide a link of post example code to demonstrate?

Maybe an inline-block display would work. :slight_smile:


span {
  display: inline-block;
}

Edit)FF2 I missed, sorry. :slight_smile:
[URL=“https://developer.mozilla.org/en/CSS_Reference/Mozilla_Extensions”]
Mozilla CSS extensions


span {
  display: -moz-inline-box; /* FF2 */
  display: inline-block; /* all others incl. IE6+ */
}

Looking at the reference up to and including FF2 doesn’t support inline-block :frowning:

The site is just locally hosted at the moment

Oh this is the jquery plugin I was talking about:
http://dropdown-check-list.googlecode.com/svn/trunk/src/demo.html

Here, In FF2 the span ( I think class=“ui-dropdownchecklist-wrapper” ) width increases/decreases depending on how many options are checked, if all are unchecked, its width is very small etc.

Maybe your issue is covered in this error report?

Anyway back on topic, thanks that fix seems to have worked.
re:http://code.google.com/p/dropdown-check-list/issues/detail?id=37
Couple of parts I dont really understand.
They are:
1)
.ui-dropdownchecklist, x:-moz-any-link
.ui-dropdownchecklist, x:-moz-any-link, x:default
What does the bold part do to the line?

And:
2)
{
display: -moz-inline-block;
width: 155px;
display: block;
overflow: hidden;
}
Why have the 2 different display definitions?

Thanks much

with Asperger’s


Haha, thats me

Thanks I have just seen that, what I don’t understand about the solution is the need to restore:
.*******, x:default {restore styles for Firefox 3.0 and newer}

Eg the following scenario:
.something{ /*general stuff here for all browsers */ }
.something, x:-moz-any-link { /*hack for FF2 */ }
.something, , x:-moz-any-link, x:default
{
/*restore styles for Firefox 3.0 and newer
Why do you then need to restore for FF3 cos the above hack I thought was only relevant for FF2
*/
}

And Q2 from my above post :slight_smile:

Why do you then need to restore for FF3 cos the above hack I thought was only relevant for FF2

It is only relevant to FF2 in the sense that the following rule only applies to FF3+.

The first rule applies to FF2 and FF3 and the second rule only applies to FF3 thereby over-ruling the first rule for the newer browser only.

Makes sense, just the way I read it (from a different site than the one you mentioned) it sounded like first rule x:-moz-any-link ONLY applied to FF2 (and was thus ignored by FF3)
And:
2)
{
display: -moz-inline-block;
width: 155px;
display: block;
overflow: hidden;
}
Why have the 2 different display definitions, insn’t one of them redundent?

Yes that looks weird to me also as the display:block will over-rule any other display values preceeding it in that rule. (The -moz property for inline-block is actually -moz-inline-box anyway as mentioned by Erik earlier.)

I’m guessing it’s an oversight and the second display should be display:inline-block and not display:block.