This bug has now been fixed. 25/06/2019

First, a demonstration of the problem:

In traditional Ripley skins (Classic Goo, Plain, Alabaster or Brunel), this table of colour names has a border around each cell and a border around the table. Due to a bug in Pliny, the table currently shows with no border. If you can see a border in Pliny, then the problem has been fixed.

Switch to Pliny View

Switch to Plain View

Background

When the BBC wrote the new 'Barlesque' version of h2g2, they introduced a lot of new features. One was the cool borders on tables, which were one pixel wide. This was done by a clever use of Cascading Style Sheets (CSS files). When h2g2 was bought by NPL, not all the code got transferred across because some bits had BBC proprietary stuff. The NPL programmers (mainly Pastey) rewrote huge chunks of the system to get it working without the BBC proprietary stuff and created the Pliny system we now have as the default. They didn't get the tables with borders working, though. In Pliny the tables have no borders.

A Workaround

By adding code to the "table", "td" and "th" tags, you can achieve the effect. This is tedious as it needs to be added to every single cell in your table. If you have 2,000 cells in the table, then you must add the same code 2,000 times. This is best done by using a text editor with global replace.

If you make the lines black, then the table will look good in Pliny and in the Alabaster, Plain and Brunel skins but the lines will be almost invisible in the Classic Goo skin. I therefore recommend you use grey lines, which are visible in all skins.

How to do it

1. Instead of a <table border="1"> tag, put the following:

   
   <table style="border-collapse:collapse;border: 1px solid grey">
   

2. Instead of each <td> tag, put the following:

   
   <td style="border: 1px solid grey">
   

   If your td tag has other attributes, be sure to include them.

3. Instead of each <th> tag, put the following:

   
   <th style="border: 1px solid grey">
   

   If your th tag has other attributes, be sure to include them.

This will give you a "workaround table" which will look like this:

Investigating the Cause of the Pliny Borders Bug

The single-line borders are caused either by a mistake in a CSS file or by a missing CSS file.

If we look at an entry in Pliny, the system translates this into HTML which is sent to the browser. We can see the HTML code by using the View Source option. In Firefox this is Menu (three horizontal lines) / Web Developer / Page Source (or just by pressing Ctrl+U). The HTML is displayed in a separate tab. In Internet Explorer, press F12 and the code will be displayed in a separate pane at the bottom of the screen.

Looking at the HTML, the first item of note is that there are only two CSS files referenced:

<link href="/css/themes/eddie/eddie.css" rel="stylesheet" type="text/css">

<link href="/css/themes/pliny/pliny.css" rel="stylesheet" type="text/css">

So any reference styles used in the rest of the HTML must be defined in one or other of these.

The contents of these can be seen by putting the following addresses into your browser:

http://h2g2.com/css/themes/eddie/eddie.css

http://h2g2.com/css/themes/pliny/pliny.css

The code for the table at the top of this entry is:

<table border="1">

<tr>

<td>Red</td>

<td>Green</td>

</tr>

<tr>

<td>Blue</td>

<td>Yellow</td>

</tr>

</table>

In the HTML, this appears as follows (I've added some line breask to make it more readable):

<table class="border1">

<tr>

<td>Red</td>

<td>Green</td>

</tr>

<tr>

<td>Blue</td>

<td>Yellow</td>

</tr>

</table>

The only thing the HTML translator does is change the border="1" to class="border1", relying entirely on the definition of the class "border1" in the CSS file.

But there is no "border1" defined in either of the two CSS files. This is the cause of the problem.

Search for other CSS files

Are there other CSS files on the system which have "border1" defined? If so, the simplest solution would be to copy the relevant sections from that CSS file to Pliny.CSS which is where you would expect the class to be defined.

By poking around I've uncovered 8 CSS files, two of which are the ones already mentioned. I've searched each of them for a definition of "border1":

• h2g2.com/css/main.css
• h2g2.com/css/guideml.css
• h2g2.com/css/themes/pliny/pliny.css
• h2g2.com/css/themes/eddie/eddie.css
• pliny.h2g2.com/css/main.css
• pliny.h2g2.com/css/guideml.css
• pliny.h2g2.com/css/fixed_all_browsers_gvl3.css
• pliny.h2g2.com/css/themes/default/all_browsers.css

Of these, only the following have any mention of "border1":

• h2g2.com/css/guideml.css
• pliny.h2g2.com/css/guideml.css

I suspect that GuideML.CSS is used by the older skins and that the pliny.h2g2.com version of it was intended to be used in the new Pliny system but somebody never finished implementing it (it may never have been fully tested).

So could we just lift the lines from either version of GuideML.css and put them into the current pliny.css?

What's the difference between these two CSS files? With the exception of line breaks, spaces and comments, the two CSS files are identical. The pliny.h2g2.com version is easier to read as it has line breaks to give it a shape.

The CSS file has two main sections (although a few lines are in the wrong section - this doesn't affect their function). The .entry_body section defines how HTML is displayed in an entry. The .pspace_body section defines how a user's personal space is displayed. These are almost identical, but text sizes are slightly bigger in a personal space than in an entry.

What are the lines in this which define the border1 class?

.entry_body table.border1 {margin: 0px; border-collapse: separate; border-style: solid; border-width: 1px 1px 0px 0px; border-color: #000; }

.entry_body table.border1 tr {}

.entry_body table.border1 tr td {color: #000; border-style: solid; border-width: 0px 0px 1px 1px; border-color: #000; }

.entry_body table.border1 tr th {font-weight: bold; color: #3B7C92; padding: 8px; border-style: solid; border-width: 0px 0px 1px 1px; border-color: #000; }

These define the behaviour of the table, td and th tags when used with the border1 class. For the table tag, the following things are set:

{ margin: 0px;

border-collapse: separate;

border-style: solid;

border-width: 1px 1px 0px 0px;

border-color: #000;

}

For the td tag, the style is as follows:

{ color: #000;

border-style: solid;

border-width: 0px 0px 1px 1px;

border-color: #000;

}

What I Suggested Back in March 2016

I suggest three changes to fix Pliny bugs in 2016. The first was on 03-March-2016, the other two on 06-March-2016. I also sent a summary of the three changes on 14-October-2017. I never got any response, despite three different h2g2 officials telling they would pursue it. Here's what I wrote:

I have identified a number of bugs in the Pliny system which seem to be caused by information having been omitted from the http://h2g2.com/css/themes/pliny/pliny.css cascading style sheet file. It’s possible that this information was originally in another css file which got deleted by accident in the move from BBC to NPL.

I believe that by inserting lines into the pliny.css file, these bugs will be fixed. I'd appreciate it if you try these changes. If they don't work, please let me know.

1. Bug in Pliny that prevents borders on tables from displaying even when border="1" is specified.

Add the following lines to pliny.css

div#entry_content table { margin:8px 0px; font-size:0.9em; color:#000; background-color:#ffffff; }

div#entry_content table.border1 { margin:0px; border-collapse:collapse; border-style:solid; border-width: 1px 1px 0px 0px; border-color: #000; }

div#entry_content table.border1 tr { }

div#entry_content table.border1 tr td { color:#000; border-collapse:collapse; border-style:solid; border-width: 0px 0px 1px 1px; border-color: #000; }

div#entry_content table.border1 tr th { font-weight:bold; color:#3B7C92; padding:8px; border-collapse:collapse; border-style:solid; border-width: 0px 0px 1px 1px; border-color: #000; }

2. Bug in Pliny that causes smileys to be displayed against the right margin.

Add the following line to pliny.css

div#entry_content img.smiley{float:none;display:inline;}

3. Bug in Pliny that causes all images to be pushed against the right margin.

Add the following lines to pliny.css

div#entry_content img.left,div#entry_content img.Left,div#entry_content img.LEFT {float:left;padding-right:10px;padding-bottom:10px;}

div#entry_content img.right,div#entry_content img.Right,div#entry_content img.RIGHT {float:right;padding-left:10px;padding-bottom:10px;}

div#entry_content img.center,div#entry_content img.Center,div#entry_content img.CENTER {float:none;margin:auto;padding:10px 0px;}

That's all the ones I've identified so far.