Last modified: 2008-12-18 01:16:27 UTC

Wikimedia Bugzilla is closed!

Wikimedia migrated from Bugzilla to Phabricator. Bug reports are handled in Wikimedia Phabricator.
This static website is read-only and for historical purposes. It is not possible to log in and except for displaying bug reports and their history, links might be broken. See T18694, the corresponding Phabricator task for complete and up-to-date bug report information.
Bug 16694 - html div bug
html div bug
Status: RESOLVED INVALID
Product: MediaWiki
Classification: Unclassified
General/Unknown (Other open bugs)
unspecified
PC All
: Normal minor (vote)
: ---
Assigned To: Nobody - You can work on this!
http://en.wikipedia.org/w/index.php?t...
:
Depends on:
Blocks:
  Show dependency treegraph
 
Reported: 2008-12-17 22:31 UTC by ipatrol
Modified: 2008-12-18 01:16 UTC (History)
1 user (show)

See Also:
Web browser: ---
Mobile Platform: ---
Assignee Huggle Beta Tester: ---


Attachments

Description ipatrol 2008-12-17 22:31:18 UTC
== HTML span display error ==

I think I may have found a bug with the wiki software, but I wanted to ask people that probably know a little bit more about the subject than I do in case I'm doing something wrong instead of the software. On [[User:Dudemanfellabra/Sandbox2]], I'm trying to get each column to display as ''inline-block''. I can do this with divs (which is the current state), but this doesn't work in IE. IE only applies ''display:inline-block'' to tags that originally display inline (such as span). When I change the div of each column to a span, though, I get unexpected results. Instead of surrounding the entire column, the span is broken up and applied to each individual bit of text inside the column. After a little looking around, I came across what I think to be the culprit. The code entered into the editbox is first, followed by the actual HTML code rendered by the software (found by viewing the source of the page):

My code (with some extra line breaks so the page isn't stretched too far):
<source lang="html4strict">
<span style="width:60%; border:1px solid #ccc; background-color:#FCFCFC; vertical-align:top; padding:2px; display:inline-block">
<!--FEATURED ARTICLES-->
<div style="background-color:#DAE5F2; border:1px solid #ccc; padding-left:7px">
[[image:Cscr-featured.svg|18px|Today's featured article]]&nbsp;'''[[Wikipedia:Today's featured article|Today's featured article]]'''</div>
<div style="padding:2px">{{Wikipedia:Today's featured article/{{#time:F j, Y}}}}
<!--FEATURED MEDIA-->
<div style="background-color:#DAE5F2; border:1px solid #ccc; padding-left:7px">
[[image:Emblem-camera.svg|20px|Today's featured media]]&nbsp;'''[[Wikipedia:Picture of the day|Today's featured media]]'''</div>
<div style="padding:2px"><!--New code to allow POTD to be displayed in one column instead of full page width-->{{User:Dudemanfellabra/Sandbox1}}</div>
<!--DID YOU KNOW-->
<div style="background-color:#DAE5F2; border:1px solid #ccc; padding-left:7px">
[[image:QA icon.svg|20px|Did you know]]&nbsp;'''[[Wikipedia:Did you know|Did you know]]'''</div>
<div style="padding:2px">{{Did you know}}</div>
</span>
</source>

And the output code (again with some extra line breaks so the page isn't stretched too far):
<source lang="html4strict">
<div style="background-color:#DAE5F2; border:1px solid #ccc; padding-left:7px">
<span style="width:60%; border:1px solid #ccc; background-color:#FCFCFC; vertical-align:top; padding:2px; display:inline-block">
<a href="/wiki/File:Cscr-featured.svg" class="image" title="Today's featured article">
<img alt="Today's featured article" src="http://upload.wikimedia.org/wikipedia/commons/thumb/e/e7/Cscr-featured.svg/18px-Cscr-featured.svg.png" width="18" height="17" border="0" /></a>&#160;<b>
<a href="/wiki/Wikipedia:Today%27s_featured_article" title="Wikipedia:Today's featured article">Today's featured article</a></b></span></div>
<div style="padding:2px">
<div style="float:left;margin-right:0.9em">
<p><span style="width:60%; border:1px solid #ccc; background-color:#FCFCFC; vertical-align:top; padding:2px; display:inline-block">
<a href="/wiki/File:Steve_Sandvoss_November_2008.jpg" class="image" title="Lead actor Steve Sandvoss stars as Elder Aaron Davis">
<img alt="Lead actor Steve Sandvoss stars as Elder Aaron Davis" src="http://upload.wikimedia.org/wikipedia/en/thumb/c/c0/Steve_Sandvoss_November_2008.jpg/100px-Steve_Sandvoss_November_2008.jpg" width="100" height="113" border="0" /></a></span></p>
</div>
<span style="width:60%; border:1px solid #ccc; background-color:#FCFCFC; vertical-align:top; padding:2px; display:inline-block">
<i><b><a href="/wiki/Latter_Days" title="Latter Days">Latter Days</a></b></i> is a <a href="/wiki/Gay" title="Gay">gay</a> 
<a href="/wiki/Romantic_love" title="Romantic love" class="mw-redirect">romantic</a> <a href="/wiki/Drama" title="Drama">drama</a> 
released in <a href="/wiki/2003_in_film" title="2003 in film">2003</a>. Set in <a href="/wiki/Los_Angeles" title="Los Angeles">Los 
Angeles</a>, <a href="/wiki/California" title="California">California</a>, it portrays the seduction of Aaron Davis, a <a href="/wiki
/Mormon" title="Mormon">Mormon</a> <a href="/wiki/Missionary_(LDS_Church)" title="Missionary (LDS Church)">missionary</a>, by Christian 
Markelli, a party animal who falls in love with him. The film, written and directed by <a href="/wiki/C._Jay_Cox" title="C. Jay Cox">C. 
Jay Cox</a>, stars <a href="/wiki/Steve_Sandvoss" title="Steve Sandvoss">Steve Sandvoss</a> <i>(pictured)</i> as Aaron, <a href="/wiki
/Wes_Ramsey" title="Wes Ramsey">Wes Ramsey</a> as Christian, <a href="/wiki/Joseph_Gordon-Levitt" title="Joseph Gordon-Levitt">Joseph 
Gordon-Levitt</a> as Elder Ryder, and <a href="/wiki/Rebekah_Johnson" title="Rebekah Johnson">Rebekah Johnson</a> as Julie Taylor. <a 
href="/wiki/Mary_Kay_Place" title="Mary Kay Place">Mary Kay Place</a>, <a href="/wiki/Amber_Benson" title="Amber Benson">Amber 
Benson</a> and <a href="/wiki/Jacqueline_Bisset" title="Jacqueline Bisset">Jacqueline Bisset</a> have supporting roles. <i>Latter 
Days</i> premiered at the <a href="/wiki/Philadelphia_International_Gay_%26_Lesbian_Film_Festival" title="Philadelphia International 
Gay &amp; Lesbian Film Festival">Philadelphia International Gay &amp; Lesbian Film Festival</a> on July 10, 2003. It was released 
across America over the next 12 months, and was released, mostly at gay film festivals, in a few other countries. It was the first film 
to openly show the clash between the principles of the <a href="/wiki/The_Church_of_Jesus_Christ_of_Latter-day_Saints" title="The 
Church of Jesus Christ of Latter-day Saints">Mormon church</a> and <a href="/wiki/Homosexuality" 
title="Homosexuality">homosexuality</a>, and its exhibition in some states was <a href="/wiki/Polemic" title="Polemic">polemic</a>. 
Various religious groups demanded that the movie be withdrawn from theatres and <a href="/wiki/DVD" title="DVD">DVD</a> stores under <a 
href="/wiki/Boycott" title="Boycott">boycott</a> threats. The movie was not well received by film critics, although it was popular with 
most film festival attendees. In 2004 T. Fabris made <i>Latter Days</i> into a novel, which was published by <a href="/wiki
/Alyson_Publications" title="Alyson Publications">Alyson Publications</a>. (<b><a href="/wiki/Latter_Days" title="Latter Days">more...
</a></b>)</span></div>

<p><span style="width:60%; border:1px solid #ccc; background-color:#FCFCFC; vertical-align:top; padding:2px; display:inline-block">
Recently featured: <a href="/wiki/LaRouche_criminal_trials" title="LaRouche criminal trials">LaRouche criminal trials</a> – 
<a href="/wiki/Getting_It:_The_psychology_of_est" title="Getting It: The psychology of est">Getting It: The psychology of est</a> – 
<a href="/wiki/Riverina" title="Riverina">Riverina</a></span></p>
<div align="right" class="noprint"><span style="width:60%; border:1px solid #ccc; background-color:#FCFCFC; vertical-align:top; padding:2px; display:inline-block">
<b><a href="/wiki/Wikipedia:Today%27s_featured_article/December_2008" title="Wikipedia:Today's featured article/December 2008">Archive</a></b> – 
<b><a href="https://lists.wikimedia.org/mailman/listinfo/daily-article-l" class="extiw" title="mail:daily-article-l">By email</a></b> – 
<b><a href="/wiki/Wikipedia:Featured_articles" title="Wikipedia:Featured articles">More featured articles...</a></b></span></div>

<div style="background-color:#DAE5F2; border:1px solid #ccc; padding-left:7px"><span style="width:60%; border:1px solid #ccc; background-color:#FCFCFC; vertical-align:top; padding:2px; display:inline-block">
<a href="/wiki/File:Emblem-camera.svg" class="image" title="Today's featured media">
<img alt="Today's featured media" src="http://upload.wikimedia.org/wikipedia/commons/thumb/4/48/Emblem-camera.svg/20px-Emblem-camera.svg.png" width="20" height="20" border="0" /></a>&#160;
<b><a href="/wiki/Wikipedia:Picture_of_the_day" title="Wikipedia:Picture of the day">Today's featured media</a></b></span></div>
<div style="padding:2px">
<div class="floatleft"><span style="width:60%; border:1px solid #ccc; background-color:#FCFCFC; vertical-align:top; padding:2px; display:inline-block">
<a href="/wiki/File:Mammothterracetrees.jpg" class="image" title="Dead trees, Mammoth Hot Springs">
<img alt="Dead trees, Mammoth Hot Springs" src="http://upload.wikimedia.org/wikipedia/commons/thumb/f/fc/Mammothterracetrees.jpg/155px-Mammothterracetrees.jpg" width="155" height="160" border="0" /></a></span></div>
<p><span style="width:60%; border:1px solid #ccc; background-color:#FCFCFC; vertical-align:top; padding:2px; display:inline-block">Dead 
trees in the terraces of Mammoth Hot Springs, one of the <b><a href="/wiki/Geothermal_areas_of_Yellowstone" title="Geothermal areas of 
Yellowstone">geothermal areas of Yellowstone National Park</a></b>, <a href="/wiki/Wyoming" title="Wyoming">Wyoming</a>, United States. 
These trees grew during inactivity of the mineral-rich <a href="/wiki/Hot_spring" title="Hot spring">hot springs</a>, and were killed 
when <a href="/wiki/Calcium_carbonate" title="Calcium carbonate">calcium carbonate</a> carried by spring water clogged the 
<a href="/wiki/Vascular_tissue" title="Vascular tissue">vascular systems</a> of the trees. The same process also effectively preserves 
the trees by preventing decay.</span></p>

<p><span style="width:60%; border:1px solid #ccc; background-color:#FCFCFC; vertical-align:top; padding:2px; display:inline-block">
<small>Photo credit: <a href="/wiki/User:Thegreenj" title="User:Thegreenj">Thegreenj</a></small></span></p>
<p><span style="width:60%; border:1px solid #ccc; background-color:#FCFCFC; vertical-align:top; padding:2px; display:inline-block">
Recently featured: <a href="/wiki/Template:POTD/2008-12-16" title="Template:POTD/2008-12-16">Tunnel rat</a> - 
<a href="/wiki/Template:POTD/2008-12-15" title="Template:POTD/2008-12-15">Emperor Penguin</a> - 
<a href="/wiki/Template:POTD/2008-12-14" title="Template:POTD/2008-12-14">Tank schematic</a></span></p>
<div align="right"><span style="width:60%; border:1px solid #ccc; background-color:#FCFCFC; vertical-align:top; padding:2px; display:inline-block">
<b><a href="/wiki/Wikipedia:Picture_of_the_day/December_2008" title="Wikipedia:Picture of the day/December 2008">Archive</a></b> – 
<b><a href="/wiki/Wikipedia:Featured_pictures" title="Wikipedia:Featured pictures">More featured media...</a></b></span></div>

</div>
<div style="background-color:#DAE5F2; border:1px solid #ccc; padding-left:7px">
<span style="width:60%; border:1px solid #ccc; background-color:#FCFCFC; vertical-align:top; padding:2px; display:inline-block">
<a href="/wiki/File:QA_icon.svg" class="image" title="Did you know"><img alt="Did you know" src="http://upload.wikimedia.org/wikipedia/commons/thumb/e/eb/QA_icon.svg/20px-QA_icon.svg.png" width="20" height="20" border="0" /></a>&#160;
<b><a href="/wiki/Wikipedia:Did_you_know" title="Wikipedia:Did you know">Did you know</a></b></span></div>
<div style="padding:2px">
<p><span style="width:60%; border:1px solid #ccc; background-color:#FCFCFC; vertical-align:top; padding:2px; display:inline-block">
<i>From Wikipedia's <a href="/wiki/Wikipedia:Recent_additions" title="Wikipedia:Recent additions">newest articles</a>:</i></span></p>
<div style="float:right;margin-left:0.5em;">
<p><span style="width:60%; border:1px solid #ccc; background-color:#FCFCFC; vertical-align:top; padding:2px; display:inline-block">
<a href="/wiki/File:LordHoweIslandPigeonByGeorgeRaper_cropped.jpg" class="image" title="A painting of the Lord Howe Island Pigeon by George Raper">
<img alt="A painting of the Lord Howe Island Pigeon by George Raper" src="http://upload.wikimedia.org/wikipedia/en/thumb/e/e8/LordHoweIslandPigeonByGeorgeRaper_cropped.jpg/66px-LordHoweIslandPigeonByGeorgeRaper_cropped.jpg" width="66" height="100" border="0" /></a></span></p>
</div>
<ul>
<li style="-moz-float-edge: content-box"><span style="width:60%; border:1px solid #ccc; background-color:#FCFCFC; vertical-align:top; padding:2px; display:inline-block">
... that no <a href="/wiki/Type_specimen" title="Type specimen" class="mw-redirect">type specimen</a> of the <b>
<a href="/wiki/Lord_Howe_Island_Pigeon" title="Lord Howe Island Pigeon">Lord Howe Island Pigeon</a></b> exists, as it was described 
from a painting <i>(pictured)</i> by <a href="/wiki/George_Raper" title="George Raper">George Raper</a>?</span></li>

<li style="-moz-float-edge: content-box"><span style="width:60%; border:1px solid #ccc; background-color:#FCFCFC; vertical-align:top; padding:2px; display:inline-block">
... that during the trial for the <b><a href="/wiki/Toa_Payoh_ritual_murders" title="Toa Payoh ritual murders">Toa Payoh ritual murders</a></b> in 
<a href="/wiki/Singapore" title="Singapore">Singapore</a>, Howard Cashin received death threats for defending the accused, Adrian Lim?</span></li>
<li style="-moz-float-edge: content-box"><span style="width:60%; border:1px solid #ccc; background-color:#FCFCFC; vertical-align:top; padding:2px; display:inline-block">
... that the <b><a href="/wiki/Philadelphia_Phillies_(NFL)" title="Philadelphia Phillies (NFL)">Philadelphia Phillies</a></b> was the name of a football team in the 
<b><a href="/wiki/National_Football_League_(1902)" title="National Football League (1902)">first National Football League</a></b>?</span></li>
<li style="-moz-float-edge: content-box"><span style="width:60%; border:1px solid #ccc; background-color:#FCFCFC; vertical-align:top; padding:2px; display:inline-block">
... that <a href="/wiki/Opera" title="Opera">operatic</a> <a href="/wiki/Soprano" title="Soprano">soprano</a> <b><a href="/wiki/Romilda_Pantaleoni" title="Romilda Pantaleoni">Romilda Pantaleoni</a></b>
 sang the role of Desdemona in the original 1887 production of <a href="/wiki/Giuseppe_Verdi" title="Giuseppe Verdi">Giuseppe Verdi</a>'s <i><a href="/wiki/Otello" title="Otello">Otello</a></i>?</span></li>

<li style="-moz-float-edge: content-box"><span style="width:60%; border:1px solid #ccc; background-color:#FCFCFC; vertical-align:top; padding:2px; display:inline-block">
... that <b><a href="/wiki/Charter_08" title="Charter 08">Charter 08</a></b>, a declaration signed by hundreds of Chinese intellectuals, was modeled on 
<a href="/wiki/Czechoslovakia" title="Czechoslovakia">Czechoslovakian</a> <a href="/wiki/Charter_77" title="Charter 77">Charter 77</a>?</span></li>
<li style="-moz-float-edge: content-box"><span style="width:60%; border:1px solid #ccc; background-color:#FCFCFC; vertical-align:top; padding:2px; display:inline-block">
... that <b><a href="/wiki/Charles_D%27Arcy" title="Charles D'Arcy">Archbishop D'Arcy</a></b> of <a href="/wiki/Diocese_of_Armagh_(Church_of_Ireland)" title="Diocese of Armagh (Church of Ireland)">Armagh</a>
 was a member of the <a href="/wiki/Senate_of_Southern_Ireland" title="Senate of Southern Ireland">Senate of Southern Ireland</a> and a supporter of the <a href="/wiki/Eugenics" title="Eugenics">Eugenics</a> movement?</span></li>

<li style="-moz-float-edge: content-box"><span style="width:60%; border:1px solid #ccc; background-color:#FCFCFC; vertical-align:top; padding:2px; display:inline-block">
... that <a href="/wiki/Gene_Krupa" title="Gene Krupa">Gene Krupa</a> was asked to be in the 1947 <a href="/wiki/Race_film" title="Race film" class="mw-redirect">race film</a> 
<i><b><a href="/wiki/Boy!_What_a_Girl!" title="Boy! What a Girl!">Boy! What a Girl!</a></b></i> when he stopped by to visit cast member <a href="/wiki/Sid_Catlett" title="Sid Catlett">Sid Catlett</a> on the film's set?</span></li>
<li style="-moz-float-edge: content-box"><span style="width:60%; border:1px solid #ccc; background-color:#FCFCFC; vertical-align:top; padding:2px; display:inline-block">
... that <a href="/wiki/Norway" title="Norway">Norwegian</a> jurist and peace activist <b><a href="/wiki/Fredrik_Heffermehl" title="Fredrik Heffermehl">Fredrik Heffermehl</a></b>
 claimed that 45&#160;percent of <a href="/wiki/Nobel_Peace_Prize" title="Nobel Peace Prize">Nobel Peace Prize</a> awards after 1945 are "illegal"?<br clear="all" />

<br /></span>
<div style="text-align: right;" class="noprint"><span style="width:60%; border:1px solid #ccc; background-color:#FCFCFC; vertical-align:top; padding:2px; display:inline-block">
<b><a href="/wiki/Wikipedia:Recent_additions" title="Wikipedia:Recent additions">Archive</a></b> – 
<b><a href="/wiki/Wikipedia:Your_first_article" title="Wikipedia:Your first article">Start a new article</a></b> – 
<b><a href="/wiki/Template_talk:Did_you_know" title="Template talk:Did you know">Nominate an article</a></b></span></div>
</li>
</ul>
</div>
</source>

As you can see, the span should surround all the inner divs, but is instead applied to every element in the column. I went a step further also and tested my code in an external editor, and it worked fine. The column was 60% width, the divs were all in the right place, etc. Back in the wiki editbox, I tried to figure out what was causing the problem, so I played around with the display tag, and found that anytime a value is set to display (in this case ''inline-block''), the code breaks; removing the display parameter fixes the problem. I think there may be a bug with wiki software and how it interprets the span tag with a display parameter. --[[User:Dudemanfellabra|Dudemanfellabra]] ([[User talk:Dudemanfellabra|talk]]) 21:09, 17 December 2008 (UTC)
Comment 1 Danny B. 2008-12-18 01:16:27 UTC
According to XHTML 1.0 DTD (besides it's according to any previous HTML) - <div> as a block element can't be in <span> which is inline. Fix the code first.

Note You need to log in before you can comment on or make changes to this bug.


Navigation
Links