https://bugzilla.wikimedia.org/show_bug.cgi?id=16694
Summary: html div bug
Product: Wikimedia
Version: unspecified
Platform: PC
URL: http://en.wikipedia.org/w/index.php?title=Wikipedia:Vill
age_pump_(technical)&oldid=258644611
OS/Version: All
Status: NEW
Severity: minor
Priority: Normal
Component: General/Unknown
AssignedTo: [email protected]
ReportedBy: [email protected]
== 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]] '''[[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]] '''[[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]] '''[[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> <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 & Lesbian Film Festival">Philadelphia International Gay & 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> 
<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> 
<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 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)
--
Configure bugmail: https://bugzilla.wikimedia.org/userprefs.cgi?tab=email
------- You are receiving this mail because: -------
You are the assignee for the bug.
You are on the CC list for the bug.
_______________________________________________
Wikibugs-l mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/wikibugs-l
![http://upload.wikimedia.org/wikipedia/commons/thumb/e/e7/Cscr-featured.svg/18px-Cscr-featured.svg.png"](https://upload.wikimedia.org/wikipedia/commons/thumb/e/e7/Cscr-featured.svg/18px-Cscr-featured.svg.png"){kind=link}
![http://upload.wikimedia.org/wikipedia/en/thumb/c/c0/Steve_Sandvoss_November_2008.jpg/100px-Steve_Sandvoss_November_2008.jpg"](https://upload.wikimedia.org/wikipedia/en/thumb/c/c0/Steve_Sandvoss_November_2008.jpg/100px-Steve_Sandvoss_November_2008.jpg"){kind=link}
![http://upload.wikimedia.org/wikipedia/commons/thumb/4/48/Emblem-camera.svg/20px-Emblem-camera.svg.png"](https://upload.wikimedia.org/wikipedia/commons/thumb/4/48/Emblem-camera.svg/20px-Emblem-camera.svg.png"){kind=link}
![http://upload.wikimedia.org/wikipedia/commons/thumb/f/fc/Mammothterracetrees.jpg/155px-Mammothterracetrees.jpg"](https://upload.wikimedia.org/wikipedia/commons/thumb/f/fc/Mammothterracetrees.jpg/155px-Mammothterracetrees.jpg"){kind=link}
![http://upload.wikimedia.org/wikipedia/commons/thumb/e/eb/QA_icon.svg/20px-QA_icon.svg.png"](https://upload.wikimedia.org/wikipedia/commons/thumb/e/eb/QA_icon.svg/20px-QA_icon.svg.png"){kind=link}
![http://upload.wikimedia.org/wikipedia/en/thumb/e/e8/LordHoweIslandPigeonByGeorgeRaper_cropped.jpg/66px-LordHoweIslandPigeonByGeorgeRaper_cropped.jpg"](https://upload.wikimedia.org/wikipedia/en/thumb/e/e8/LordHoweIslandPigeonByGeorgeRaper_cropped.jpg/66px-LordHoweIslandPigeonByGeorgeRaper_cropped.jpg"){kind=link}