HTML - Firefox ignores the style width attribute in the SPAN tag?

12-10-2005, 09:48 PM

I have the following code.
text
test
test

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

12-10-2005, 09:57 PM

Frank Rizzo wrote:

> text

> Firefox ignores the 'width' attribute.

It is a property, not an attribute.
http://www.w3.org/TR/CSS2/visudet.ht...width-property
Applies to:
all elements but non-replaced
inline elements, table rows,
and row groups
And, since you haven't altered its display, the span is a non-replaced
inline element, so the width property doesn't apply. Looks like you have
MSIE in Quirks mode.

> I can't use the DIV tag because it forces a line break. I need all this
> stuff to be on the same line.

Use floats.

--
David Dorward <http://blog.dorward.me.uk/> <http://dorward.me.uk/>
Home is where the ~/.bashrc is

David Dorward

12-10-2005, 10:30 PM

Frank Rizzo wrote:

> I have the following code.
> text
> test
> test
>
> 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

Chris Beall

dojohansen · 09-09-2008, 11:06 AM

Hi,

the reason your document displays differently in the different browsers is because you haven't included a DOCTYPE declaration. In other words, you haven't said which HTML standard you are using, which means that there IS no "correct" interpretation of the document.

Browsers generally go into what is called "quirks mode" whenever they are displaying documents that do not declare their type. I obviously cannot tell you what declaration to use (since I don't know what standard you're using; to be honest I suspect you don't know either and in fact aren't using any), but if you can add one it will help ensure a much more consistent experience for users regardless of browser.

With XHTML 1.0 strict, declared as follows

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >

Internet Explorer would also (correctly) ignore the width attribute, because, as already pointed out, the SPAN is an inline element that is non-replaced. (An example of a replaced element is IMG, where the source of the image "replaces" the tag. Another example is OBJECT for ActiveX controls such as flash.)

The solution of course has also been provided, I'll just point out that you can still use SPAN rather than DIV if you like, as long as you add the float attribute.

Lastly, and you might already know this, you might want to use an external style sheet rather than inline styles. This reduces the size of the page, allows the browser to cash the styles even when the page must be reloaded, and makes it far easier to maintain the site provided you plan your use of styles a bit!

dojohansen

12-10-2005, 09:57 PM	#2
David Dorward Posts: n/a	Re: Firefox ignores the style width attribute in the SPAN tag? Frank Rizzo wrote: > <span style="width:100px;background-color:Red;">text</span> > Firefox ignores the 'width' attribute. It is a property, not an attribute. http://www.w3.org/TR/CSS2/visudet.ht...width-property Applies to: all elements but non-replaced inline elements, table rows, and row groups And, since you haven't altered its display, the span is a non-replaced inline element, so the width property doesn't apply. Looks like you have MSIE in Quirks mode. > I can't use the DIV tag because it forces a line break. I need all this > stuff to be on the same line. Use floats. -- David Dorward <http://blog.dorward.me.uk/> <http://dorward.me.uk/> Home is where the ~/.bashrc is David Dorward

12-10-2005, 10:30 PM	#3
Chris Beall Posts: n/a	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 Chris Beall

09-09-2008, 11:06 AM	#4
dojohansen Junior Member Join Date: Sep 2008 Posts: 1	Doctype! Hi, the reason your document displays differently in the different browsers is because you haven't included a DOCTYPE declaration. In other words, you haven't said which HTML standard you are using, which means that there IS no "correct" interpretation of the document. Browsers generally go into what is called "quirks mode" whenever they are displaying documents that do not declare their type. I obviously cannot tell you what declaration to use (since I don't know what standard you're using; to be honest I suspect you don't know either and in fact aren't using any), but if you can add one it will help ensure a much more consistent experience for users regardless of browser. With XHTML 1.0 strict, declared as follows <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > Internet Explorer would also (correctly) ignore the width attribute, because, as already pointed out, the SPAN is an inline element that is non-replaced. (An example of a replaced element is IMG, where the source of the image "replaces" the tag. Another example is OBJECT for ActiveX controls such as flash.) The solution of course has also been provided, I'll just point out that you can still use SPAN rather than DIV if you like, as long as you add the float attribute. Lastly, and you might already know this, you might want to use an external style sheet rather than inline styles. This reduces the size of the page, allows the browser to cash the styles even when the page must be reloaded, and makes it far easier to maintain the site provided you plan your use of styles a bit! dojohansen

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search

12-10-2005, 09:48 PM	#1
	Firefox ignores the style width attribute in the SPAN tag? 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