Mozilla/Firefox ignoring width for SPAN/DIV

Join Bytes! wrote:
[color=blue]
> I am trying to make horizontal bars of different lengths. I tought
> either SPAN or DIV would work but it only works for IE. I have a small
> example at: http://sedivy.com/test.htm[/color]

By CSS rules, the width property does not apply to (i.e., is ignored for)
non-replaced inline elements. Thus, what IE does is wrong.

It is impossible to guess what you are trying to achieve and what might be
the best way to achieve it. Please provide the URL of a real example,
preferably after you have first designed it by good authoring principles -
in particular, with due consideration of how the page works without CSS and
how it works in non-visual presentation.

--
Yucca, http://www.cs.tut.fi/~jkorpela/

Join Bytes! wrote:[color=blue]
> Hello all,
> I am trying to make horizontal bars of different lengths. I tought
> either SPAN or DIV would work but it only works for IE. I have a small
> example at: http://sedivy.com/test.htm
> Let me know if I missed something.
>[/color]

You have used the 'width' property on inline elements, but the CSS spec
says:

"This property does not apply to non-replaced inline-level elements."

<URL:http://www.w3.org/TR/CSS21/visudet.html#the-width-property>

Your spans have no content, so although the backgrounds have been set to
the colours you define, you can't see them. Put some text inside the
spans or divs and Firefox will show your background colour (but still no
honour your width suggestion).

I think IE is wrong in this case - it should not show empty inline
elements the way it does.

If what you are trying to show really should be in a table, then use
table cells and not spans or inline divs.

--
Rob

Join Bytes! wrote:[color=blue]
> Hello all,
> I am trying to make horizontal bars of different lengths. I tought
> either SPAN or DIV would work but it only works for IE. I have a small
> example at: http://sedivy.com/test.htm
> Let me know if I missed something.[/color]

<style type="text/css">
span {display:-moz-inline-box; /* Gecko proprietary */
display:inline-block; /* supported by Opera and ? */
width:25%;height:1em; /* width and height required */
vertical-align:top; /* Gecko needs this */
} /* IE, Opera & Gecko slight diff */
</style>

--
Gus

On Mon, 05 Sep 2005 13:01:31 +0200, Gus Richter <gusrichter@netscape.net>
wrote:[color=blue]
> Join Bytes! wrote:[/color]
[color=blue][color=green]
>> I am trying to make horizontal bars of different lengths. I tought
>> either SPAN or DIV would work but it only works for IE. I have a small
>> example at: http://sedivy.com/test.htm
>> Let me know if I missed something.[/color][/color]
[color=blue]
>
> <style type="text/css">
> span {display:-moz-inline-box; /* Gecko proprietary */
> display:inline-block; /* supported by Opera and ? */[/color]

Opera and MSIE 6 (partly, only elements that start as 'inline') and MacIE
and Safari.
Source: http://www.quirksmode.org/css/display.html#inlineblock
[color=blue]
> width:25%;height:1em; /* width and height required */
> vertical-align:top; /* Gecko needs this */
> } /* IE, Opera & Gecko slight diff */
> </style>
>[/color]



--
Get Opera 8 now! Speed, Security and Simplicity.
http://my.opera.com/Rijk/affiliate/

Rijk van Geijtenbeek

In article <op.swmq5zfy55487u@rijk-01.lan>,
"Rijk van Geijtenbeek" <rijk@removethizopera.com> wrote:
[color=blue]
> On Mon, 05 Sep 2005 13:01:31 +0200, Gus Richter <gusrichter@netscape.net>
> wrote:[/color]

[...]
[color=blue][color=green]
> > display:inline-block; /* supported by Opera and ? */[/color]
>
> Opera and MSIE 6 (partly, only elements that start as 'inline') and MacIE
> and Safari.[/color]

And iCab 3.0 of course.

--
Sander Tekelenburg, <http://www.euronet.nl/%7Etekelenb/>

Sander Tekelenburg wrote:[color=blue]
> In article <op.swmq5zfy55487u@rijk-01.lan>,
> "Rijk van Geijtenbeek" <rijk@removethizopera.com> wrote:
>
>[color=green]
>>On Mon, 05 Sep 2005 13:01:31 +0200, Gus Richter <gusrichter@netscape.net>
>>wrote:[/color]
>
>
> [...]
>
>[color=green][color=darkred]
>>> display:inline-block; /* supported by Opera and ? */[/color]
>>
>>Opera and MSIE 6 (partly, only elements that start as 'inline') and MacIE
>>and Safari.[/color]
>
>
> And iCab 3.0 of course.
>[/color]

Thank you, Rijk and Sander, for the updates.

--
Gus

On Mon, 05 Sep 2005 22:31:08 +0200, Gus Richter <gusrichter@netscape.net>
wrote:[color=blue]
> Sander Tekelenburg wrote:[color=green]
>> "Rijk van Geijtenbeek" wrote:[color=darkred]
>>> On Mon, 05 Sep 2005 13:01:31 +0200, Gus Richter wrote:[/color]
>> [...]
>>[color=darkred]
>>>> display:inline-block; /* supported by Opera and ? */
>>>
>>> Opera and MSIE 6 (partly, only elements that start as 'inline') and
>>> MacIE and Safari.[/color]
>> And iCab 3.0 of course.
>>[/color]
>
> Thank you, Rijk and Sander, for the updates.[/color]

It is an odd case of something useful actually working in IE and Opera and
not in Mozilla :)

--
Get Opera 8 now! Speed, Security and Simplicity.
http://my.opera.com/Rijk/affiliate/

Rijk van Geijtenbeek

What I am trying to do is to draw a different length bars. I know I
can use a table with one row and a bunch of columns but I thought the
use of SPAN/DIV would be simpler.
For a small example see:
http://sedivy.com/test.jpg

Thanks for all the suggestions
Lac

Rijk van Geijtenbeek wrote:[color=blue]
> On Mon, 05 Sep 2005 22:31:08 +0200, Gus Richter
> <gusrichter@netscape.net> wrote:
>[color=green]
>> Sander Tekelenburg wrote:
>>[color=darkred]
>>> "Rijk van Geijtenbeek" wrote:
>>>
>>>> On Mon, 05 Sep 2005 13:01:31 +0200, Gus Richter wrote:
>>>
>>> [...]
>>>
>>>>> display:inline-block; /* supported by Opera and ? */
>>>>
>>>>
>>>> Opera and MSIE 6 (partly, only elements that start as 'inline') and
>>>> MacIE and Safari.
>>>
>>> And iCab 3.0 of course.
>>>[/color]
>>
>> Thank you, Rijk and Sander, for the updates.[/color]
>
>
> It is an odd case of something useful actually working in IE and Opera
> and not in Mozilla :)
>[/color]

As odd as for Soft Hyphen (shy;).

Moz buggily supports:
display:-moz-inline-block;
display:-moz-inline-box;
Moz does NOT support:
display:inline-block;

https://bugzilla.mozilla.org/show_bug.cgi?id=9458

--
Gus

> As odd as for Soft Hyphen (shy;).

Of course, that should be &shy;

--
Gus