Join the AMA (Ask Me Anything) with the Firefox leadership team to celebrate Firefox 20th anniversary and discuss Firefox’s future on Mozilla Connect. Mark your calendar on Thursday, November 14, 18:00 - 20:00 UTC!

This site will have limited functionality while we undergo maintenance to improve your experience. If an article doesn't solve your issue and you want to ask a question, we have our support community waiting to help you at @FirefoxSupport on Twitter and/r/firefox on Reddit.

Avatar for Username

Search Support

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

This thread was archived. Please ask a new question if you need help.

Is <span> broken, or is that just my imagination?

  • 4 replies
  • 2 have this problem
  • 16 views
  • Last reply by jpallen

jpallen
jpallen
more options

This site doesn't seem to render properly in Firefox 11. There are a number of boxes used to float information off to the right or left margins. Some work, some don't - on either right or left. These pages do work correctly in older versions of FF on a Fedora 6 or Fedora 14 box. When the box works, the data in it is displayed in a side box which the main text flows around. When it doesn't work, there is a little tiny horizontal colour box on the side and the text interrupts the main text. MSIE gets the boxes right but doesn't want to implement the clear:both property. Google Chrome has the same problem as FF.

This site doesn't seem to render properly in Firefox 11. There are a number of <span> boxes used to float information off to the right or left margins. Some work, some don't - on either right or left. These pages do work correctly in older versions of FF on a Fedora 6 or Fedora 14 box. When the box works, the data in it is displayed in a side box which the main text flows around. When it doesn't work, there is a little tiny horizontal colour box on the side and the text interrupts the main text. MSIE gets the boxes right but doesn't want to implement the clear:both property. Google Chrome has the same problem as FF.

All Replies (4)

jscher2000 - Support Volunteer
jscher2000 - Support Volunteer
  • Top 25 Contributor
more options

Are you the webmaster/developer?

One thing I noticed is that many spans have "clear:both" which can force them lower than intended (i.e., they might only need clear:left or clear:right).

There are some other problems with the tags in the page that may be causing unexpected results. You might want to try the W3C validator to help in developing a list of issues to address: The W3C Markup Validation Service. It can be pretty ugly the first time, so you might first want to take a scan through the code and add in the missing quotation marks for attribute values, and address other obvious XHTML requirements.

cor-el
cor-el
  • Moderator
  • Top 10 Contributor
more options

You are trying to place a block element (DIV) in a SPAN and that doesn't work, so the span is closed and a DIV is opened in current Firefox version. Older Firefox versions probably ignored the DIV.

You can see that part of the code as red text in the page source.
You can select the text and use View > Selection Source to see what Firefox makes of it. 

<span >
<div align=center>
<b><u><font size=2 face="Verdana, sans-serif">
What Is ...
</font></u></b>
</div>
<p align=justify style="margin-bottom: 0in">
<font size=2 face="Verdana, sans-serif">
<B>Targum Onkelos:</B> An early (1<sup><small>st</small></sup>-2<sup><small>nd</small></sup> Century CE) translation/paraphrase of the Torah into Aramaic; attributed to a Roman convert to Judaism, Onkelos; used in Babylonian synagogues during the Talmudic era
</font>
<br>
</p>
</span>Targum Onkelos seems to agree, translating this word as
"excrements".
</p>
<p align=justify style="text-indent: .25in">
The <span style="float: right; clear: both; width: 2.6in; border: 1px solid #000000; padding: 0.06in 0.11in;
margin-left: 0.1in; text-indent: 0in;
margin-top: 0.1in; margin-bottom: 0.1in; background: #ffffa0">
<div align=center>
<b><u><font size=2 face="Verdana, sans-serif">
Who Is ...
</font></u></b>
</div>
<p align=justify style="margin-bottom: 0in">
<font size=2 face="Verdana, sans-serif">
<B>The Rashbam:</B> Rabbi Samuel ben Asher (1085-1174), a grandson of Rashi; lived in Northern France; worked from the plain meaning of the Hebrew text even when this contradicted established rabbinic interpretaton
</font>
<br>
</p>
</span>
jpallen
jpallen Question owner
more options

> Are you the webmaster/developer?

Guilty as charged.

I've run it through the W3C validator as you suggested and have made a number of changes - the error count has gone down from 320+ to about 32. Some may take a little more time to fix. Since all the HTML code is actually in m4 files and the individual pages are largely macro calls and plain text, the roll-out is fairly painless across 450 pages. However (see my second reply), the problem hasn't completely cleared ...

BTW, why does Firefox have the symbol &nbsp; in red in Tools->WebDeveloper->PageSource? It does for same for &copy;

Modified by jpallen

jpallen
jpallen Question owner
more options

OK, so I have taken out DIV inside SPAN and the result, as you'll see is now quite a lot better. At least all the text is now inside the boxes. However, in doing that I have lost one (relatively) important formatting feature - centering the title line of each box.

You'll see that now ... 

  http://www.messianictrust.org.uk/parashiyot/vayikra-9.htm

although I have arranged two inner SPANs to hold the two pieces of text - heading and body - the heading is (incorrectly) left-aligned, while the body is (correctly) justified. Why has it obeyed one style and not the other? 

  <SPAN STYLE="TEXT-ALIGN: CENTER">

as opposed to 

  <SPAN STYLE="TEXT-ALIGN: JUSTIFY">

Modified by jpallen