Difference between revisions of "User:Eabrace/Sandbox"

From Ouroboros Portal
Jump to: navigation, search
(Experiment #1: suggestion from Steiner)
m (fix img I broke on deletion)
 
(12 intermediate revisions by one other user not shown)
Line 44: Line 44:
  
  
Suggestion from Titan forums:
+
==== Suggestion from Titan forums ====
  
 
  <nowiki><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;">
 
  <nowiki><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;">
Line 54: Line 54:
  
 
<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;">
 
<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>
 +
 +
 +
Removing background image from code:
 +
 +
<nowiki><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></nowiki>
 +
 +
<table style="width:450px;height:320px;border: solid 1px #000000;border-collapse: collapse;">
 
   <tr>
 
   <tr>
 
     <td>sd54f6s5df4
 
     <td>sd54f6s5df4
Line 67: Line 84:
 
Further reading from outside sources indicates that MediaWiki invalidates style tags with "url" components.
 
Further reading from outside sources indicates that MediaWiki invalidates style tags with "url" components.
  
== Experiment #2 ==
+
=== Experiment #2 ===
 
Using an HTML table with wiki images.
 
Using an HTML table with wiki images.
  
Line 125: Line 142:
 
</CENTER>
 
</CENTER>
  
== Experiment #3 ==
+
=== Experiment #3 ===
 
Line spacing between badge rows using CSS font-size and line-height properties.
 
Line spacing between badge rows using CSS font-size and line-height properties.
  
Line 141: Line 158:
 
http://smg.photobucket.com/albums/v623/cohosi/badges/th_BADGE_OSI_Activity.jpg
 
http://smg.photobucket.com/albums/v623/cohosi/badges/th_BADGE_OSI_Activity.jpg
 
</div>
 
</div>
 +
 +
=== Experiment #4 ===
 +
Using Div tags to create an overlay.
 +
 +
<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}}
 +
 +
The upper half of the content (character image and info) are disappearing.  It appears that they are being slid behind the background image instead of appearing on top of it.
 +
 +
In fact, if I substitute in a different image:
 +
 +
<div style="float:right; width:450; height:320;" align="center">
 +
[[File:Blankperson.png]]
 +
<div align="center" style="width:450; height:320; margin-top:-225px;">
 +
<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}}
 +
 +
It's more obvious who's obscuring who.
 +
 +
This probably isn't helping, though:
 +
<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}}
 +
 +
Those two sections should be bound within a 375 pixel container.  Instead, they are being forced to the outer right and left margins.
 +
 +
Floating the entire container to the right:
 +
 +
<div align="center" style="float:right; 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}}
 +
 +
The left side should be 160 pixels wide with the image centered.  The image is 86 pixels wide, which should leave 74 pixels for margin, 37 on each side.  Instead, the image is pressing right up against the right side content.
 +
 +
Adding the badge icons on the bottom provides an anchor for the margins of the container, but shouldn't be required as the width is already specified in the container's definition.
 +
 +
<div align="center" style="float:right; 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>
 +
{{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>
 +
{{clr}}
 +
 +
Very frustrating.  Time to take a break.
 +
 +
=== Experiment #5 ===
 +
Combining div tags with an HTML table.
 +
 +
<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>
 +
 +
That appears to work, but the final parsed HTML produces a lot of extra <nowiki><p></nowiki> tags that I think are causing some slight differences in how I want the content to lay out and how it actually does lay out.  I suspect I ''can'' do something about that, but that it will make the markup even more difficult to read/maintain than it already is.
 +
 +
{{clr}}
 +
 +
=== Experiment #6 ===
 +
Removing extraneous <nowiki><p></nowiki> tags.
 +
 +
<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:-345px;">
 +
<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>
 +
 +
The extra tags are gone in this example, making enough of a difference in the vertical spacing of the content that I had to change the margin-top parameter in the table container to compensate for the shift.  While the resulting markup is semi-readable to me, I imagine someone unfamiliar with the content (and how it evolved) would have a very hard time reading it.  Further, I having to cram everything into single lines would make turning this into a template with #if logic particularly ugly.  I may have to try that later just to see how bad it is.

Latest revision as of 19:21, 30 July 2009

Experiments

Experiment #1

Question:

Can a wikitable be created with a background image?


CSS for background images:

background-image:url('<image>')


Test image:

OSI_ID.jpg


Test table code:

{| style="width:75%; height:200px; background-image:url('http://img.photobucket.com/albums/v623/cohosi/badges/OSI_ID.jpg')" border="1"
|-
|Test
|}


Test table:

Test


Test table code (without background image specification):

{| style="width:75%; height:200px" border="1"
|-
|Test
|}


Test table:

Test


Suggestion from Titan forums

<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>
sd54f6s5df4 s5df4s6d5f4



S4d6f5


Removing background image from code:

<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>
sd54f6s5df4 s5df4s6d5f4



S4d6f5


Conclusion:

It would appear that wikitables do not allow background images. Either that or this just isn't the right way to make it work. Based on the loss of size formatting in the first table, it would seem that inserting the background image specification invalidates the entire style spec.

Further reading from outside sources indicates that MediaWiki invalidates style tags with "url" components.

Experiment #2

Using an HTML table with wiki images.

th_B_Samson.jpg

B. Samson
DIRECTOR
Archetypeicon tanker.png Originicon natural.png Invulnerability ResToPhysicalDmg.png SuperStrength Jab.png
Date of Activation: 2004 DEC 06
@B Samson

Badge respec stalwart.pngBadge respec statesman.pngBadge respec freedom.png

Badge task force 01.pngBadge task force 02.pngBadge task force 03.png

Badge task force 04.pngBadge task force 05.pngBadge task force 06.png

Badge task force HonoraryPeacebringer.pngBadge council robot.pngBadge croatoa cabalist.pngBadge temporal strife.pngBadge task force PSmasher.pngBadge task force DestroyerOfStrength.pngBadge task force ProtectorOfKindness.pngBadge task force SlayerOfMadness.pngBadge task force apocalyptic.pngBadge defeatrecluse.pngBadge task force master statesman.png

Badge trial zone 01.pngBadge trial zone 01.pngBadge trial zone 01.png

th_BADGE_OSI_Activity.jpg

Experiment #3

Line spacing between badge rows using CSS font-size and line-height properties.

Badge respec stalwart.pngBadge respec statesman.pngBadge respec freedom.png

Badge task force 01.pngBadge task force 02.pngBadge task force 03.png

Badge task force 04.pngBadge task force 05.pngBadge task force 06.png

Badge task force HonoraryPeacebringer.pngBadge council robot.pngBadge croatoa cabalist.pngBadge temporal strife.pngBadge task force PSmasher.pngBadge task force DestroyerOfStrength.pngBadge task force ProtectorOfKindness.pngBadge task force SlayerOfMadness.pngBadge task force apocalyptic.pngBadge defeatrecluse.pngBadge task force master statesman.png

Badge trial zone 01.pngBadge trial zone 01.pngBadge trial zone 01.png

th_BADGE_OSI_Activity.jpg

Experiment #4

Using Div tags to create an overlay.

OSI_ID.jpg

th_B_Samson.jpg

B. Samson
DIRECTOR
Archetypeicon tanker.pngOriginicon natural.pngInvulnerability ResToPhysicalDmg.pngSuperStrength Jab.png
Date of Activation: 2004 DEC 06
@B Samson


Badge respec stalwart.pngBadge respec statesman.pngBadge respec freedom.png

Badge task force 01.pngBadge task force 02.pngBadge task force 03.png

Badge task force 04.pngBadge task force 05.pngBadge task force 06.png

Badge task force HonoraryPeacebringer.pngBadge council robot.pngBadge croatoa cabalist.pngBadge temporal strife.pngBadge task force PSmasher.pngBadge task force DestroyerOfStrength.pngBadge task force ProtectorOfKindness.pngBadge task force SlayerOfMadness.pngBadge task force apocalyptic.pngBadge defeatrecluse.pngBadge task force master statesman.png

Badge trial zone 01.pngBadge trial zone 01.pngBadge trial zone 01.png

th_BADGE_OSI_Activity.jpg


The upper half of the content (character image and info) are disappearing. It appears that they are being slid behind the background image instead of appearing on top of it.

In fact, if I substitute in a different image:

Blankperson.png

th_B_Samson.jpg

B. Samson
DIRECTOR
Archetypeicon tanker.pngOriginicon natural.pngInvulnerability ResToPhysicalDmg.pngSuperStrength Jab.png
Date of Activation: 2004 DEC 06
@B Samson


Badge respec stalwart.pngBadge respec statesman.pngBadge respec freedom.png

Badge task force 01.pngBadge task force 02.pngBadge task force 03.png

Badge task force 04.pngBadge task force 05.pngBadge task force 06.png

Badge task force HonoraryPeacebringer.pngBadge council robot.pngBadge croatoa cabalist.pngBadge temporal strife.pngBadge task force PSmasher.pngBadge task force DestroyerOfStrength.pngBadge task force ProtectorOfKindness.pngBadge task force SlayerOfMadness.pngBadge task force apocalyptic.pngBadge defeatrecluse.pngBadge task force master statesman.png

Badge trial zone 01.pngBadge trial zone 01.pngBadge trial zone 01.png

th_BADGE_OSI_Activity.jpg


It's more obvious who's obscuring who.

This probably isn't helping, though:

th_B_Samson.jpg

B. Samson
DIRECTOR
Archetypeicon tanker.pngOriginicon natural.pngInvulnerability ResToPhysicalDmg.pngSuperStrength Jab.png
Date of Activation: 2004 DEC 06
@B Samson


Those two sections should be bound within a 375 pixel container. Instead, they are being forced to the outer right and left margins.

Floating the entire container to the right:

th_B_Samson.jpg

B. Samson
DIRECTOR
Archetypeicon tanker.pngOriginicon natural.pngInvulnerability ResToPhysicalDmg.pngSuperStrength Jab.png
Date of Activation: 2004 DEC 06
@B Samson


The left side should be 160 pixels wide with the image centered. The image is 86 pixels wide, which should leave 74 pixels for margin, 37 on each side. Instead, the image is pressing right up against the right side content.

Adding the badge icons on the bottom provides an anchor for the margins of the container, but shouldn't be required as the width is already specified in the container's definition.

th_B_Samson.jpg

B. Samson
DIRECTOR
Archetypeicon tanker.pngOriginicon natural.pngInvulnerability ResToPhysicalDmg.pngSuperStrength Jab.png
Date of Activation: 2004 DEC 06
@B Samson


Badge respec stalwart.pngBadge respec statesman.pngBadge respec freedom.png

Badge task force 01.pngBadge task force 02.pngBadge task force 03.png

Badge task force 04.pngBadge task force 05.pngBadge task force 06.png

Badge task force HonoraryPeacebringer.pngBadge council robot.pngBadge croatoa cabalist.pngBadge temporal strife.pngBadge task force PSmasher.pngBadge task force DestroyerOfStrength.pngBadge task force ProtectorOfKindness.pngBadge task force SlayerOfMadness.pngBadge task force apocalyptic.pngBadge defeatrecluse.pngBadge task force master statesman.png

Badge trial zone 01.pngBadge trial zone 01.pngBadge trial zone 01.png

th_BADGE_OSI_Activity.jpg


Very frustrating. Time to take a break.

Experiment #5

Combining div tags with an HTML table.

OSI ID background.png

B Samson ID 01.jpg

B. Samson
DIRECTOR
Archetypeicon tanker.png Originicon natural.png Invulnerability ResToPhysicalDmg.png SuperStrength Jab.png
Date of Activation: 2004 DEC 06
@B Samson

Badge respec stalwart.pngBadge respec statesman.pngBadge respec freedom.png
Badge task force 01.pngBadge task force 02.pngBadge task force 03.png
Badge task force 04.pngBadge task force 05.pngBadge task force 06.png
Badge task force HonoraryPeacebringer.pngBadge council robot.pngBadge croatoa cabalist.pngBadge temporal strife.pngBadge task force PSmasher.pngBadge task force DestroyerOfStrength.pngBadge task force ProtectorOfKindness.pngBadge task force SlayerOfMadness.pngBadge task force apocalyptic.pngBadge defeatrecluse.pngBadge task force master statesman.png
Badge trial zone 01.pngBadge trial zone 01.pngBadge trial zone 01.png
OSI Donovan Medallion.png

That appears to work, but the final parsed HTML produces a lot of extra <p> tags that I think are causing some slight differences in how I want the content to lay out and how it actually does lay out. I suspect I can do something about that, but that it will make the markup even more difficult to read/maintain than it already is.


Experiment #6

Removing extraneous <p> tags.

OSI ID background.png
B Samson ID 01.jpg
B. Samson
DIRECTOR
Archetypeicon tanker.pngOriginicon natural.pngInvulnerability ResToPhysicalDmg.pngSuperStrength Jab.png
Date of Activation: 2004 DEC 06
@B Samson
Badge respec stalwart.pngBadge respec statesman.pngBadge respec freedom.png
Badge task force 01.pngBadge task force 02.pngBadge task force 03.png
Badge task force 04.pngBadge task force 05.pngBadge task force 06.png
Badge task force HonoraryPeacebringer.pngBadge council robot.pngBadge croatoa cabalist.pngBadge temporal strife.pngBadge task force PSmasher.pngBadge task force DestroyerOfStrength.pngBadge task force ProtectorOfKindness.pngBadge task force SlayerOfMadness.pngBadge task force apocalyptic.pngBadge defeatrecluse.pngBadge task force master statesman.png
Badge trial zone 01.pngBadge trial zone 01.pngBadge trial zone 01.png
OSI Donovan Medallion.png

The extra tags are gone in this example, making enough of a difference in the vertical spacing of the content that I had to change the margin-top parameter in the table container to compensate for the shift. While the resulting markup is semi-readable to me, I imagine someone unfamiliar with the content (and how it evolved) would have a very hard time reading it. Further, I having to cram everything into single lines would make turning this into a template with #if logic particularly ugly. I may have to try that later just to see how bad it is.