By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
443,760 Members | 1,630 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 443,760 IT Pros & Developers. It's quick & easy.

Mozilla/Firefox ignoring width for SPAN/DIV

P: n/a
lac
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

Sep 5 '05 #1
Share this Question
Share on Google+
10 Replies


P: n/a
la*@myrealbox.com wrote:
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


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/
Sep 5 '05 #2

P: n/a
la*@myrealbox.com wrote:
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.


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
Sep 5 '05 #3

P: n/a
la*@myrealbox.com wrote:
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.


<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
Sep 5 '05 #4

P: n/a
On Mon, 05 Sep 2005 13:01:31 +0200, Gus Richter <gu********@netscape.net>
wrote:
la*@myrealbox.com wrote:
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.


<style type="text/css">
span {display:-moz-inline-box; /* Gecko proprietary */
display:inline-block; /* supported by Opera and ? */
Opera and MSIE 6 (partly, only elements that start as 'inline') and MacIE
and Safari.
Source: http://www.quirksmode.org/css/display.html#inlineblock
width:25%;height:1em; /* width and height required */
vertical-align:top; /* Gecko needs this */
} /* IE, Opera & Gecko slight diff */
</style>


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

Rijk van Geijtenbeek
Sep 5 '05 #5

P: n/a
In article <op***************@rijk-01.lan>,
"Rijk van Geijtenbeek" <ri**@removethizopera.com> wrote:
On Mon, 05 Sep 2005 13:01:31 +0200, Gus Richter <gu********@netscape.net>
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.

--
Sander Tekelenburg, <http://www.euronet.nl/%7Etekelenb/>
Sep 5 '05 #6

P: n/a
Sander Tekelenburg wrote:
In article <op***************@rijk-01.lan>,
"Rijk van Geijtenbeek" <ri**@removethizopera.com> wrote:

On Mon, 05 Sep 2005 13:01:31 +0200, Gus Richter <gu********@netscape.net>
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.


Thank you, Rijk and Sander, for the updates.

--
Gus
Sep 5 '05 #7

P: n/a
On Mon, 05 Sep 2005 22:31:08 +0200, Gus Richter <gu********@netscape.net>
wrote:
Sander Tekelenburg wrote:
"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.


Thank you, Rijk and Sander, for the updates.


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
Sep 5 '05 #8

P: n/a
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

Sep 6 '05 #9

P: n/a
Rijk van Geijtenbeek wrote:
On Mon, 05 Sep 2005 22:31:08 +0200, Gus Richter
<gu********@netscape.net> wrote:
Sander Tekelenburg wrote:
"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.


Thank you, Rijk and Sander, for the updates.

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


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
Sep 7 '05 #10

P: n/a
> As odd as for Soft Hyphen (shy;).

Of course, that should be ­

--
Gus
Sep 7 '05 #11

This discussion thread is closed

Replies have been disabled for this discussion.