span tag with width style attribute doesn't work in Firefox

I have the following code.
<span style="width:100px;background-color:Red;">text</span>
<span style="width:100px;background-color:Green;">test</span>
<span style="width:100px;background-color:Blue;">test</span>

In IE, it displays just like I intended: 100 pixels of red color,
followed by 100 pixels of green color, followed by 100 pixels of blue
color all on the same line.

Firefox ignores the 'width' attribute. It only displays the red color
enough to display the word 'test'. I can't use the DIV tag because it
forces a line break. I need all this stuff to be on the same line.

What can I do to replicate the behaviour above in Firefox?

Thanks.

Frank Rizzo <none (AT) none (DOT) com> wrote:

I have the following code.
span style="width:100px;background-color:Red;">text</span
span style="width:100px;background-color:Green;">test</span
span style="width:100px;background-color:Blue;">test</span

It's very poor code. It's actually completely wrong. Besides, your question
is about CSS, not about HTML tags.

In IE, it displays just like I intended:

IE misbehaves as usual.

Firefox ignores the 'width' attribute.

That's correct.

Try googling for "CSS FAQ". Try posting to the right group if problems
remain, and don't forget to include a URL and to explain what you are really
trying to achieve.

--
Yucca, http://www.cs.tut.fi/~jkorpela/
Pages about Web authoring: http://www.cs.tut.fi/~jkorpela/www.html

Jukka K. Korpela wrote:

Frank Rizzo <none (AT) none (DOT) com> wrote:


I have the following code.
span style="width:100px;background-color:Red;">text</span
span style="width:100px;background-color:Green;">test</span
span style="width:100px;background-color:Blue;">test</span


It's very poor code. It's actually completely wrong. Besides, your question
is about CSS, not about HTML tags.


In IE, it displays just like I intended:


IE misbehaves as usual.


Firefox ignores the 'width' attribute.


That's correct.

Try googling for "CSS FAQ". Try posting to the right group if problems
remain, and don't forget to include a URL and to explain what you are really
trying to achieve.

hey, are you a sadist or what? Sometimes, posters do make a genuine
mistake and post to the wrong list. But so what. Can't you just kindly
accept that? No need for agressive response. You might even know the
answer to the prob that is reported..

Ed

On 12/11/05 3:08 PM, "Ed" <ex@directory> wrote:

hey, are you a sadist or what? Sometimes, posters do make a genuine
mistake and post to the wrong list. But so what. Can't you just kindly
accept that? No need for agressive response. You might even know the
answer to the prob that is reported..

Ed

You don't know him very well, do you?

It's nice to know that some things never change: water flows downhill and
Jukka is surly. For years, I've wanted to ask him why, but I have decided
that it doesn't really matter.

If his attitude offends you, ignore him -- but you should realize that doing
this will cause you to miss out on his advice, which is usually on-the-mark.

Eventually, you have to choose which bothers you more.

Kurtis
Sacramento, CA, USA

"Frank Rizzo" <none (AT) none (DOT) com> wrote

I have the following code.
span style="width:100px;background-color:Red;">text</span
span style="width:100px;background-color:Green;">test</span
span style="width:100px;background-color:Blue;">test</span

I don't suppose a table is out of the question... yeah, it forces a line
break. you can set the width attribute on td cells and on the table.

try float:left on a div - it took the line breaks right out of my div tags.
see if it works cross-browser. I got great results with
<div style="width:100px;background-color:Red;float:left;">text</div>
<div style="width:100px;background-color:Green;float:left;">test</div>
<div style="width:100px;background-color:Blue;float:left;">test</div>

In IE, it displays just like I intended: 100 pixels of red color,
followed by 100 pixels of green color, followed by 100 pixels of blue
color all on the same line.

Firefox ignores the 'width' attribute. It only displays the red color
enough to display the word 'test'. I can't use the DIV tag because it
forces a line break. I need all this stuff to be on the same line.

What can I do to replicate the behaviour above in Firefox?

Thanks.