min-width doesn't work in Firefox

Discussion in 'HTML' started by Tarscher, Feb 25, 2008.

  1. Tarscher

    Tarscher Guest

    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
    Tarscher, Feb 25, 2008
    #1
    1. Advertising

  2. Tarscher

    Andy Dingley Guest

    On 25 Feb, 16:43, Tarscher <> wrote:

    > 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.
    Andy Dingley, Feb 25, 2008
    #2
    1. Advertising

  3. Tarscher

    Tarscher Guest

    On Feb 25, 5:51 pm, Andy Dingley <> wrote:
    > On 25 Feb, 16:43,Tarscher<> wrote:
    >
    > > 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.


    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.
    Tarscher, Feb 26, 2008
    #3
  4. Tarscher

    John Hosking Guest

    Tarscher wrote:
    > On Feb 25, 5:51 pm, Andy Dingley wrote:
    >> On 25 Feb, 16:43,Tarscher wrote:
    >>
    >>> I try to give a span a minimum width:
    >>> span.vote { min-width: 150px; }


    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>
    </ul>

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

    --
    John
    Read about the UIP: http://improve-usenet.org/
    John Hosking, Feb 26, 2008
    #4
  5. Tarscher

    Andy Dingley Guest

    On 26 Feb, 10:09, Tarscher <> wrote:

    > 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?
    Andy Dingley, Feb 26, 2008
    #5
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Paul Furman

    min-width max-width again

    Paul Furman, Feb 9, 2004, in forum: HTML
    Replies:
    10
    Views:
    704
    Beauregard T. Shagnasty
    Feb 9, 2004
  2. Lois
    Replies:
    1
    Views:
    3,220
    Ryan Stewart
    Dec 27, 2004
  3. juergen
    Replies:
    3
    Views:
    566
    opalinski from opalpaweb
    Sep 20, 2006
  4. Albert Hopkins

    When is min(a, b) != min(b, a)?

    Albert Hopkins, Jan 21, 2008, in forum: Python
    Replies:
    31
    Views:
    825
    Albert van der Horst
    Feb 4, 2008
  5. FishGills

    Retrieving width with only min-width set?

    FishGills, Oct 18, 2006, in forum: Javascript
    Replies:
    0
    Views:
    94
    FishGills
    Oct 18, 2006
Loading...

Share This Page