Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > min-width doesn't work in Firefox

Reply
Thread Tools

min-width doesn't work in Firefox

 
 
Tarscher
Guest
Posts: n/a
 
      02-25-2008
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
 
Reply With Quote
 
 
 
 
Andy Dingley
Guest
Posts: n/a
 
      02-25-2008
On 25 Feb, 16:43, Tarscher <(E-Mail Removed)> 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.h...placed-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.
 
Reply With Quote
 
 
 
 
Tarscher
Guest
Posts: n/a
 
      02-26-2008
On Feb 25, 5:51 pm, Andy Dingley <(E-Mail Removed)> wrote:
> On 25 Feb, 16:43,Tarscher<(E-Mail Removed)> 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.h...placed-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.
 
Reply With Quote
 
John Hosking
Guest
Posts: n/a
 
      02-26-2008
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/
 
Reply With Quote
 
Andy Dingley
Guest
Posts: n/a
 
      02-26-2008
On 26 Feb, 10:09, Tarscher <(E-Mail Removed)> 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?

 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Can Firefox 1.5 be installed along side Firefox 1.0.6? Zygon Curry Firefox 6 09-14-2005 11:28 AM
Firefox/Linux import bookmarks from Firefox/Windows? Marek Williams Firefox 2 06-11-2005 04:22 PM
Yahoo! Toolbar Beta for Firefox - Not Compatible with Firefox 1.0.2? NA Firefox 6 04-02-2005 06:13 PM
Firefox gamed - Drudge getting around Firefox popup blocker Venger Firefox 10 12-22-2004 04:37 AM
so what does IE or any of the IE shells have over firefox ? (any anti firefox ppl bother looking at recent plugins available?) *ProteanThread* Firefox 12 10-20-2004 08:31 AM



Advertisments