Mozilla/Firefox ignoring width for SPAN/DIV

[lac@myrealbox.com]

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.

Thanks,
Lac

[Jukka K. Korpela]

Re: Mozilla/Firefox ignoring width for SPAN/DIV

lac@myrealbox.c om 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/

[RobG]

Re: Mozilla/Firefox ignoring width for SPAN/DIV

lac@myrealbox.c om 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#th e-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

[Gus Richter]

Re: Mozilla/Firefox ignoring width for SPAN/DIV

lac@myrealbox.c om 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%;heigh t:1em; /* width and height required */
vertical-align:top; /* Gecko needs this */
} /* IE, Opera & Gecko slight diff */
</style>

--
Gus

[Rijk van Geijtenbeek]

Re: Mozilla/Firefox ignoring width for SPAN/DIV

On Mon, 05 Sep 2005 13:01:31 +0200, Gus Richter <gusrichter@net scape.net>
wrote:[color=blue]
> lac@myrealbox.c om 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%;heigh t: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

[Sander Tekelenburg]

Re: Mozilla/Firefox ignoring width for SPAN/DIV

In article <op.swmq5zfy554 87u@rijk-01.lan>,
"Rijk van Geijtenbeek" <rijk@removethi zopera.com> wrote:
[color=blue]
> On Mon, 05 Sep 2005 13:01:31 +0200, Gus Richter <gusrichter@net scape.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/>

[Gus Richter]

Re: Mozilla/Firefox ignoring width for SPAN/DIV

Sander Tekelenburg wrote:[color=blue]
> In article <op.swmq5zfy554 87u@rijk-01.lan>,
> "Rijk van Geijtenbeek" <rijk@removethi zopera.com> wrote:
>
>[color=green]
>>On Mon, 05 Sep 2005 13:01:31 +0200, Gus Richter <gusrichter@net scape.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

[Rijk van Geijtenbeek]

Re: Mozilla/Firefox ignoring width for SPAN/DIV

On Mon, 05 Sep 2005 22:31:08 +0200, Gus Richter <gusrichter@net scape.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

[lacibaci]

Re: Mozilla/Firefox ignoring width for SPAN/DIV

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

[Gus Richter]

Re: Mozilla/Firefox ignoring width for SPAN/DIV

Rijk van Geijtenbeek wrote:[color=blue]
> On Mon, 05 Sep 2005 22:31:08 +0200, Gus Richter
> <gusrichter@net scape.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

[Gus Richter]

Re: Mozilla/Firefox ignoring width for SPAN/DIV

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

Of course, that should be

--
Gus