MediaWiki, Tables, and CSS

[eabrace]

*cracks knuckles*

OK, toying with some ideas today over on the O-portal.  (For me, not for the site in general.)

What I'd like to do is set up a personal template for characters that creates an information box that looks like an ID card.  The easiest method I can think of to accomplish this (and one I've used before, but with HTML, not MediaWiki) is to create a table with a background image.

So, the next question is whether or not MediaWiki actually allows this.

I put together a little experiment for myself here.  Now, while my wiki-fu may have improved greatly over the last couple of years, my CSS-jitsu still stinks - and my ability to combine the two isn't exactly what I'd venture so far as to even call subpar.

So, before I just give up and say, "Meh," does anyone else have any ideas either on how to make my original idea work or a different approach to get the same results?

(Example of what I'm going for in the end located here (with apologies for any popups or banners, but it's free hosting and you get what you pay for, right?))

[Steiner]

Try this out.

Code: [Select]

<table style="background: url(http://img.photobucket.com/albums/v623/cohosi/badges/OSI_ID.jpg) center center no-repeat transparent;width:450px;height:320px;border: solid 1px #000000;border-collapse: collapse;">
  <tr>
    <td>sd54f6s5df4
    s5df4s6d5f4<br /><br /><br /><br />S4d6f5</td>
  </tr>
</table>
Notice a few things:
"background:" can have all the variables of background-img, background-position, etc in one string.

Setting exact dimensions is usually better practice then %, I have a 1680x1050 resolution on both of my monitors, and when I browse, 75% looks like crap.

"border:" just like background can have all the borders' params in one string.
Setting borders-collapse: collapse, will force a single line border, for a simple classy look, you can take that off if you wish to have the bordered tables.

CSS keeps changing its standards, and with CSS3 coming out "soon" it will change yet again.
Keep yourself up to date on it with this site http://www.w3schools.com/css/  comes in REAL handy when playing with CSS, plus they give you test areas to verify ideas.

[eabrace]

Setting exact dimensions is usually better practice then %, I have a 1680x1050 resolution on both of my monitors, and when I browse, 75% looks like crap.

Duly noted.  I'll have to keep that in mind.

"border:" just like background can have all the borders' params in one string.
Setting borders-collapse: collapse, will force a single line border, for a simple classy look, you can take that off if you wish to have the bordered tables.

For this particular application, I'll be aiming for no lines if I get this rolling.  Would setting the border to 0px do that, or is there something else I'd need to do?

CSS keeps changing its standards, and with CSS3 coming out "soon" it will change yet again.

Now I remember why I hate CSS. 

Keep yourself up to date on it with this site http://www.w3schools.com/css/  comes in REAL handy when playing with CSS, plus they give you test areas to verify ideas.

I'll keep that one handy.

I went ahead and plugged your example into the my experiment.  No dice, unfortunately.  The whole style section was apparently thrown out.  This would seem to fit with what I've been reading as I dig through the internet.  Most indications I've found state that MediaWiki will completely invalidate style tags with arguments that use URL specifications.  In fact, checking the page source after it's parsed by MediaWiki, here's what it dumped out:

Code: [Select]

<table>
  <tr>
    <td>sd54f6s5df4
    s5df4s6d5f4<br /><br /><br /><br />S4d6f5</td>
  </tr>
</table>
Using your same example, I modified it to remove only the background image specification and inserted it again.  This time the rest of the formatting took.

Code: [Select]

<table style="width:450px;height:320px;border: solid 1px #000000;border-collapse: collapse;">
  <tr>
    <td>sd54f6s5df4
    s5df4s6d5f4<br /><br /><br /><br />S4d6f5</td>
  </tr>
</table>
I wonder if there's a way to specify a background image without a URL, referencing a locally resident image, instead.

[Steiner]

With borders, if you use the "borders: " element in the style tag, you can just change the value to none and though you don't have to, you can probably get rid of the border-collapse element and it's value as well.

As for the background url tag, as long as it is pointing to an image, it will take relative or absolute values, while trapping the link in quotes or apostrophes is optional in CSS sheet, it is however not applicable in an in-line style tag.

Absolute: http://site.com/imgs/fartfanugen.png
Relative: /imgs/fartfanugen.png

With relative, you can do it a few ways.

• "/img/img.png"  a leading slash will have the image seek starting in the site root
• "img/img.png"  NO leading slash will have the seek starting from the page it is on, meaning there would have to be an image folder in the same folder that page is being view from.
• "../img/img.png" for each ../ that you use it steps back one folder in the directory tree and starts looking from there.

But yea, you can even put php files as an image reference in there, as long as it is an image being parsed, it will parse it.

[eabrace]

As for the background url tag, as long as it is pointing to an image, it will take relative or absolute values, while trapping the link in quotes or apostrophes is optional in CSS sheet, it is however not applicable in an in-line style tag.

OK.  I had a feeling that was probably the case.  MediaWiki still isn't going to like that, though.  Apparently as soon as it sees "url()", it tosses the whole style tag.  I think what I need to do to get this to work is to find way to get a background image either without the background-image part of the tag or (if it's even possible) using background-image without the "url()".

I also put together another little experiment using only HTML and no CSS.  MediaWiki tossed the background image out of that, too.  It took this:

Code: [Select]

<TABLE WIDTH=375 HEIGHT=320 BACKGROUND="http://img.photobucket.com/albums/v623/cohosi/badges/OSI_ID.jpg">
and parsed it into this:

Code: [Select]

<table width="375">
I played around with it a little bit.  MediaWiki just does some odd things with that Table tag.  These examples:

Code: [Select]

<TABLE BACKGROUND="http://img.photobucket.com/albums/v623/cohosi/badges/OSI_ID.jpg">

Code: [Select]

<TABLE HEIGHT=320>
both parse to:

Code: [Select]

<table>
I may have to outsmart this thing and find a way to do this with Div tags or something.

[Steiner]

it's not liking extra elements in there...

[eabrace]

Decided to play around a bit with nested <div> tags today and see how that turned out.  The results are promising, but I'm still missing something.

Code: [Select]

<div style="float:right; width:450; height:320;" align="center">
http://img.photobucket.com/albums/v623/cohosi/badges/OSI_ID.jpg
<div align="center" style="width:450; height:320; margin-top:-320px;">
<div align="center" style="width:375; height:160;">
<div align="center" style="float:left; width:160; height:160;">
http://smg.photobucket.com/albums/v623/cohosi/roster/th_B_Samson.jpg
</div>
<div class="right info" align="center" style="float:right;">
<FONT SIZE = "+2">
<B>B. Samson</B>
</FONT>
<BR>DIRECTOR
<BR>[[File:Archetypeicon tanker.png|25px]][[File:Originicon natural.png|25px]][[File:Invulnerability ResToPhysicalDmg.png|25px]][[File:SuperStrength Jab.png|25px]]
<BR>Date of Activation:  2004 DEC 06
<BR>@B Samson
</div>
</div>
{{clr}}
<div align="center" style="float:center; font-size:0; line-height:0;">
[[File:Badge respec stalwart.png|100px]][[File:Badge respec statesman.png|100px]][[File:Badge_respec_freedom.png|100px]]

[[File:Badge task force 01.png|100px]][[File:Badge task force 02.png|100px]][[File:Badge task force 03.png|100px]]

[[File:Badge task force 04.png|100px]][[File:Badge task force 05.png|100px]][[File:Badge task force 06.png|100px]]

[[File:Badge task force HonoraryPeacebringer.png|25px]][[File:Badge council robot.png|25px]][[File:Badge croatoa cabalist.png|25px]][[File:Badge temporal strife.png|25px]][[File:Badge task force PSmasher.png|25px]][[File:Badge task force DestroyerOfStrength.png|25px]][[File:Badge task force ProtectorOfKindness.png|25px]][[File:Badge task force SlayerOfMadness.png|25px]][[File:Badge task force apocalyptic.png|25px]][[File:Badge defeatrecluse.png|25px]][[File:Badge task force master statesman.png|25px]]

[[File:Badge trial zone 01.png|25px]][[File:Badge trial zone 01.png|25px]][[File:Badge trial zone 01.png|25px]]

http://smg.photobucket.com/albums/v623/cohosi/badges/th_BADGE_OSI_Activity.jpg
</div>
</div>
</div>
{{clr}}
In this experiment, everything seems to be positioned pretty close to where I want it, but the problem is that the float:left for the character image and float:right for the info seem to have disappeared.  They've got to be there somewhere, but I have no idea where they're hiding.  If I take the float arguments out of those to tags, the contents show up just fine.

So, now I need to figure out how to bring those two divs back into view.  Then I can clean up some of the other stuff (i.e. FONT and BR tags), and then look into why MediaWiki parses extra <p> tags into some of the strangest places and try getting rid of those.

[eabrace]

Well, I think I've finally hit on something that will work, but I wouldn't say it's ideal by any means.

Code: [Select]

<div style="float:right; width:550; height:345;" align="center">
[[File:OSI ID background.png]]
<div align="center" style="width:550; height:345; margin-top:-355px;">
<TABLE WIDTH=525 HEIGHT=320>
<TR>
<TD>
<TABLE WIDTH=100%>
<TR>
<TD HEIGHT=160  WIDTH=160>
<div align="center">
[[File:B Samson ID 01.jpg|160x160px]]
</div>
</TD>
<TD>
<div align="center">
<span style="font-size:x-large;">'''B. Samson'''</span><br />
DIRECTOR<br />
[[File:Archetypeicon tanker.png|25px]]
[[File:Originicon natural.png|25px]]
[[File:Invulnerability ResToPhysicalDmg.png|25px]]
[[File:SuperStrength Jab.png|25px]]<br />
Date of Activation:  2004 DEC 06<br />
@B Samson
</div>
</TD>
</TR>
</TABLE>
</TD>
</TR>
<TR>
<TD>
<div align="center" style="float:center; font-size:0; line-height:0;">
[[File:Badge respec stalwart.png|100px]][[File:Badge respec statesman.png|100px]][[File:Badge_respec_freedom.png|100px]]<br />
[[File:Badge task force 01.png|100px]][[File:Badge task force 02.png|100px]][[File:Badge task force 03.png|100px]]<br />
[[File:Badge task force 04.png|100px]][[File:Badge task force 05.png|100px]][[File:Badge task force 06.png|100px]]<br />
[[File:Badge task force HonoraryPeacebringer.png|25px]][[File:Badge council robot.png|25px]][[File:Badge croatoa cabalist.png|25px]][[File:Badge temporal strife.png|25px]][[File:Badge task force PSmasher.png|25px]][[File:Badge task force DestroyerOfStrength.png|25px]][[File:Badge task force ProtectorOfKindness.png|25px]][[File:Badge task force SlayerOfMadness.png|25px]][[File:Badge task force apocalyptic.png|25px]][[File:Badge defeatrecluse.png|25px]][[File:Badge task force master statesman.png|25px]]<br />
[[File:Badge trial zone 01.png|25px]][[File:Badge trial zone 01.png|25px]][[File:Badge trial zone 01.png|25px]]<br />
[[File:OSI Donovan Medallion.png|50x25px]]
</div>
</TD>
</TR>
</TABLE>
</div>
</div>
It appears that the table sits at a higher z-index than the image in the container div.  The table itself then becomes a sort of second container sitting on top of the rest of the container div contents.  Visually, that would be like stacking two boxes on top of each other.  That's a little confusing to me since it would seem like having the table inside the container div would be more like stacking two boxes inside one another.  I can see that it works, though, so I suppose that'll have to do for now.  I would like to figure out at some point why this works and my previous attempts without the table definition didn't, though.

I still have a couple of minor issues with the markup for this thing.  First of all, it just doesn't feel clean to me.  Something about mixing pure HTML inside a CSS markup feels strange.  I also get the feeling if I do a little digging out on the net I'll find that this was a common practice that's been deprecated or something.  Just a guess.

The other thing that annoys me about this is the way MediaWiki translates it all into HTML in the end.  It's really difficult to get something looking exactly the way you want it when there's an interpreter sitting on top of your code and throwing a bunch of extra <p> tags in all over the place.  I wonder if there isn't a way to get rid of those without jumbling the wiki markup and making it even less readable than it already is.  In fact, it seems like it'd be nice if there were a <htmlonly> tag or something similar that told the MediaWiki interpreter to read the text between the start and end of the tag as raw HTML rather than trying to translate it from text into HTML.  I'm sure there are a ton of potential security issues that make that unrealistic, though.

Code: [Select]

<div style="float:right; width:550; height:345;" align="center">
<p><a href="/w/index.php/File:OSI_ID_background.png" class="image" title="File:OSI ID background.png"><img alt="File:OSI ID background.png" src="/w/images/b/b8/OSI_ID_background.png" width="550" height="345" border="0" /></a>
</p>
<div align="center" style="width:550; height:345; margin-top:-355px;">
<table width="525">
<tr>
<td>
<table width="100%">
<tr>
<td height="160" width="160">
<div align="center">
<p><a href="/w/index.php/File:B_Samson_ID_01.jpg" class="image" title="B Samson ID 01.jpg"><img alt="" src="/w/images/thumb/f/ff/B_Samson_ID_01.jpg/95px-B_Samson_ID_01.jpg" width="95" height="159" border="0" /></a>
</p>
</div>
</td>

<td>
<div align="center">
<p><span style="font-size:x-large;"><b>B. Samson</b></span><br />
DIRECTOR<br />
<a href="/w/index.php/File:Archetypeicon_tanker.png" class="image" title="Archetypeicon tanker.png"><img alt="" src="http://paragonwiki.com/w/images/thumb/1/1b/Archetypeicon_tanker.png/25px-Archetypeicon_tanker.png" width="25" height="25" border="0" /></a>
<a href="/w/index.php/File:Originicon_natural.png" class="image" title="Originicon natural.png"><img alt="" src="http://paragonwiki.com/w/images/thumb/7/7e/Originicon_natural.png/25px-Originicon_natural.png" width="25" height="25" border="0" /></a>
<a href="/w/index.php/File:Invulnerability_ResToPhysicalDmg.png" class="image" title="Invulnerability ResToPhysicalDmg.png"><img alt="" src="http://paragonwiki.com/w/images/thumb/6/61/Invulnerability_ResToPhysicalDmg.png/25px-Invulnerability_ResToPhysicalDmg.png" width="25" height="25" border="0" /></a>
<a href="/w/index.php/File:SuperStrength_Jab.png" class="image" title="SuperStrength Jab.png"><img alt="" src="http://paragonwiki.com/w/images/thumb/a/ab/SuperStrength_Jab.png/25px-SuperStrength_Jab.png" width="25" height="25" border="0" /></a><br />
Date of Activation:  2004 DEC 06<br />
@B Samson
</p>
</div>
</td>
</tr>

</table>
</td>
</tr>
<tr>
<td>
<div align="center" style="float:center; font-size:0; line-height:0;">
<p><a href="/w/index.php/File:Badge_respec_stalwart.png" class="image" title="Badge respec stalwart.png"><img alt="" src="http://paragonwiki.com/w/images/thumb/1/15/Badge_respec_stalwart.png/100px-Badge_respec_stalwart.png" width="100" height="27" border="0" /></a><a href="/w/index.php/File:Badge_respec_statesman.png" class="image" title="Badge respec statesman.png"><img alt="" src="http://paragonwiki.com/w/images/thumb/a/ac/Badge_respec_statesman.png/100px-Badge_respec_statesman.png" width="100" height="27" border="0" /></a><a href="/w/index.php/File:Badge_respec_freedom.png" class="image" title="Badge respec freedom.png"><img alt="" src="http://paragonwiki.com/w/images/thumb/5/50/Badge_respec_freedom.png/100px-Badge_respec_freedom.png" width="100" height="27" border="0" /></a><br />
<a href="/w/index.php/File:Badge_task_force_01.png" class="image" title="Badge task force 01.png"><img alt="" src="http://paragonwiki.com/w/images/thumb/2/27/Badge_task_force_01.png/100px-Badge_task_force_01.png" width="100" height="30" border="0" /></a><a href="/w/index.php/File:Badge_task_force_02.png" class="image" title="Badge task force 02.png"><img alt="" src="http://paragonwiki.com/w/images/thumb/e/eb/Badge_task_force_02.png/100px-Badge_task_force_02.png" width="100" height="30" border="0" /></a><a href="/w/index.php/File:Badge_task_force_03.png" class="image" title="Badge task force 03.png"><img alt="" src="http://paragonwiki.com/w/images/thumb/b/ba/Badge_task_force_03.png/100px-Badge_task_force_03.png" width="100" height="30" border="0" /></a><br />
<a href="/w/index.php/File:Badge_task_force_04.png" class="image" title="Badge task force 04.png"><img alt="" src="http://paragonwiki.com/w/images/thumb/1/16/Badge_task_force_04.png/100px-Badge_task_force_04.png" width="100" height="30" border="0" /></a><a href="/w/index.php/File:Badge_task_force_05.png" class="image" title="Badge task force 05.png"><img alt="" src="http://paragonwiki.com/w/images/thumb/2/2a/Badge_task_force_05.png/100px-Badge_task_force_05.png" width="100" height="30" border="0" /></a><a href="/w/index.php/File:Badge_task_force_06.png" class="image" title="Badge task force 06.png"><img alt="" src="http://paragonwiki.com/w/images/thumb/8/8d/Badge_task_force_06.png/100px-Badge_task_force_06.png" width="100" height="30" border="0" /></a><br />
<a href="/w/index.php/File:Badge_task_force_HonoraryPeacebringer.png" class="image" title="Badge task force HonoraryPeacebringer.png"><img alt="" src="http://paragonwiki.com/w/images/thumb/a/a6/Badge_task_force_HonoraryPeacebringer.png/25px-Badge_task_force_HonoraryPeacebringer.png" width="25" height="25" border="0" /></a><a href="/w/index.php/File:Badge_council_robot.png" class="image" title="Badge council robot.png"><img alt="" src="http://paragonwiki.com/w/images/thumb/c/c8/Badge_council_robot.png/25px-Badge_council_robot.png" width="25" height="25" border="0" /></a><a href="/w/index.php/File:Badge_croatoa_cabalist.png" class="image" title="Badge croatoa cabalist.png"><img alt="" src="http://paragonwiki.com/w/images/thumb/a/a7/Badge_croatoa_cabalist.png/25px-Badge_croatoa_cabalist.png" width="25" height="25" border="0" /></a><a href="/w/index.php/File:Badge_temporal_strife.png" class="image" title="Badge temporal strife.png"><img alt="" src="http://paragonwiki.com/w/images/thumb/5/57/Badge_temporal_strife.png/25px-Badge_temporal_strife.png" width="25" height="25" border="0" /></a><a href="/w/index.php/File:Badge_task_force_PSmasher.png" class="image" title="Badge task force PSmasher.png"><img alt="" src="http://paragonwiki.com/w/images/thumb/1/1f/Badge_task_force_PSmasher.png/25px-Badge_task_force_PSmasher.png" width="25" height="25" border="0" /></a><a href="/w/index.php/File:Badge_task_force_DestroyerOfStrength.png" class="image" title="Badge task force DestroyerOfStrength.png"><img alt="" src="http://paragonwiki.com/w/images/thumb/1/1d/Badge_task_force_DestroyerOfStrength.png/25px-Badge_task_force_DestroyerOfStrength.png" width="25" height="25" border="0" /></a><a href="/w/index.php/File:Badge_task_force_ProtectorOfKindness.png" class="image" title="Badge task force ProtectorOfKindness.png"><img alt="" src="http://paragonwiki.com/w/images/thumb/b/be/Badge_task_force_ProtectorOfKindness.png/25px-Badge_task_force_ProtectorOfKindness.png" width="25" height="25" border="0" /></a><a href="/w/index.php/File:Badge_task_force_SlayerOfMadness.png" class="image" title="Badge task force SlayerOfMadness.png"><img alt="" src="http://paragonwiki.com/w/images/thumb/0/00/Badge_task_force_SlayerOfMadness.png/25px-Badge_task_force_SlayerOfMadness.png" width="25" height="25" border="0" /></a><a href="/w/index.php/File:Badge_task_force_apocalyptic.png" class="image" title="Badge task force apocalyptic.png"><img alt="" src="http://paragonwiki.com/w/images/thumb/2/21/Badge_task_force_apocalyptic.png/25px-Badge_task_force_apocalyptic.png" width="25" height="25" border="0" /></a><a href="/w/index.php/File:Badge_defeatrecluse.png" class="image" title="Badge defeatrecluse.png"><img alt="" src="http://paragonwiki.com/w/images/thumb/9/93/Badge_defeatrecluse.png/25px-Badge_defeatrecluse.png" width="25" height="25" border="0" /></a><a href="/w/index.php/File:Badge_task_force_master_statesman.png" class="image" title="Badge task force master statesman.png"><img alt="" src="http://paragonwiki.com/w/images/thumb/c/ca/Badge_task_force_master_statesman.png/25px-Badge_task_force_master_statesman.png" width="25" height="25" border="0" /></a><br />
<a href="/w/index.php/File:Badge_trial_zone_01.png" class="image" title="Badge trial zone 01.png"><img alt="" src="http://paragonwiki.com/w/images/thumb/9/97/Badge_trial_zone_01.png/25px-Badge_trial_zone_01.png" width="25" height="25" border="0" /></a><a href="/w/index.php/File:Badge_trial_zone_01.png" class="image" title="Badge trial zone 01.png"><img alt="" src="http://paragonwiki.com/w/images/thumb/9/97/Badge_trial_zone_01.png/25px-Badge_trial_zone_01.png" width="25" height="25" border="0" /></a><a href="/w/index.php/File:Badge_trial_zone_01.png" class="image" title="Badge trial zone 01.png"><img alt="" src="http://paragonwiki.com/w/images/thumb/9/97/Badge_trial_zone_01.png/25px-Badge_trial_zone_01.png" width="25" height="25" border="0" /></a><br />
<a href="/w/index.php/File:OSI_Donovan_Medallion.png" class="image" title="OSI Donovan Medallion.png"><img alt="" src="/w/images/thumb/c/cb/OSI_Donovan_Medallion.png/36px-OSI_Donovan_Medallion.png" width="36" height="25" border="0" /></a>
</p>
</div>
</td>
</tr>
</table>

</div>
</div>