min-width doesn't work in Firefox

[Tarscher]

Hi all,

I try to give a span a minimum width:
span.vote
{
min-width: 150px;
}

this doesn't seem to work in Firefox.

Someone knows whats wrong here?

Thanks
Stijn

 

[Andy Dingley]

I try to give a span a minimum width:
span.vote { min-width: 150px; }

http://www.w3.org/TR/CSS21/visudet.html#min-max-widths

"Applies to: all elements but non-replaced inline elements, table
rows, and row groups"

<span> is an inline element (by default, unless you've changed it in
your CSS)

It's also not a "replaced element", as explained here.
http://www.w3.org/TR/CSS21/conform.html#replaced-element


So setting the width shouldn't have the "obvious" effect you expect,
when applied to these inline elements. If you want it to, either use a
different element, or change their CSS display behaviour.

For any more detail, please post a URL to your example. It's
impractical to debug partial fragments.

 

[Tarscher]

http://www.w3.org/TR/CSS21/visudet.html#min-max-widths

"Applies to: all elements but non-replaced inline elements, table
rows, and row groups"

<span> is an inline element (by default, unless you've changed it in
your CSS)

It's also not a "replaced element", as explained here.http://www.w3.org/TR/CSS21/conform.html#replaced-element

So setting the width shouldn't have the "obvious" effect you expect,
when applied to these inline elements. If you want it to, either use a
different element, or change their CSS display behaviour.

For any more detail, please post a URL to your example. It's
impractical to debug partial fragments.

Please find sample code at http://dario.dreamhosters.com/

you see a list with events: I want to hide the vote span and show the
indicator id span when the users votes (A or V). To make sure that the
row soesn't change size I have made a span (vote_section) that
contains the vote and indicator. Gicing it a min-width makes sure the
row width doesn't collapse when I hide the vote span.

 

[John Hosking]

Turns out (as it so often does) that although that's what you're
*trying*, it's not really your *goal*.

[...]
For any more detail, please post a URL to your example. It's
impractical to debug partial fragments.

Please find sample code at http://dario.dreamhosters.com/

you see a list with events:

Ah! "A list with events." So mark it up like that. Something like:
<ul>
<li>Event One</li>
<li>Event Two</li>

I want to hide the vote span and show the
indicator id span when the users votes (A or V).

But you can't validly have more than one occurrance of an id on a page.

To make sure that the
row soesn't change size I have made a span (vote_section) that
contains the vote and indicator. Gicing it a min-width makes sure the
row width doesn't collapse when I hide the vote span.

How about markup like this:

<ul>
<li id="event1">
<span class="indicator">show indicator</span>
<span class="vote">A V</span>Title of event 1
</li>
<li id="event2">
<span class="indicator">show indicator</span>
<span class="vote">A V</span>Title of event 2
</li>
<li id="event3">
<span class="indicator">show indicator</span>
<span class="vote">A V</span>Title of event 3
</li>
</ul>

with CSS like this:

body {color:black; background-color:white;}
ul { list-style:none; margin-left:0; padding-left:0; }
..indicator { display:inline; background-color:yellow; }
..vote { margin-left:.5em; margin-right:1em; }
#event2 .indicator { visibility:hidden; }

You won't want to keep the yellow, and you will want to adjust the
margins for the .vote class to simulate your 150px. Be sure to check my
code for valisity and test in multiple browsers (I'm in FF).

Notice that instead of the display property, I used Visibility:
http://www.w3.org/TR/CSS21/visufx.html#visibility

I don't know what to recommend about your
background-image:images/ajax.gif because I don't know what its effect is
supposed to be.

HTH.

 

[Andy Dingley]

Gicing it a min-width makes sure the
row width doesn't collapse when I hide the vote span.

Two comments:

* Study the difference between display: none; and visibility: hidden;
You might want to control visibility here, not display.

* If you want to fix the width of a container, why not fix the
_container's_ width, and stop it depending on its children?