Re: Firefox ignores the style width attribute in the SPAN tag?

Frank Rizzo 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>

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,

The width property "... does not apply to non-replaced inline-level elements.". (http://www.w3.org/TR/CSS21/visudet.html#propdef-width) It appears that your example represents a non-replaced inline element, so Firefox is correct. (In a disagreement between IE and Browser X, IE is usually wrong.)

Do you want all three items to be on the same line even if the containing block is less than 300px wide? If they are, this will create a horizontal scroll bar, generally viewed as a Bad Thing.

If you replace span with <div style="float: left"> the three items should line up shoulder to shoulder if there is more than 300px of width and will gracefully stack themselves if the containing block width is reduced below that. If you also change the width from 100px to 33%, they will each occupy 1/3 of the containing block, regardless of its width.

You will also want to look at the clear: property to ensure that your three items don't overlap preceding and following elements.

Chris Beall


.

Relevant Pages

  • Firefox ignores the style width attribute in the SPAN tag?
    ... 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 ... I can't use the DIV tag because it ...
    (alt.html)
  • Re: Drop specific color
    ... lest say i wont to switch all pixels with red color to white or ... have a look at the ColorMap class and ... want to do but I think the LockBits example could have some advantages (and ...
    (microsoft.public.dotnet.framework.drawing)
  • Re: Drop specific color
    ... lest say i wont to switch all pixels with red color to white or ...
    (microsoft.public.dotnet.framework.drawing)