WordPress.com

1. lanceolot
   Member
   Dec 3, 2012, 1:24 PM

   Hi,

   I am trying to create a 3x3 table grid with an image in each cell. In a normal HTML page, there is no space between each cell in the table I have created but the same code inserted into a wordpress.com page or post, is displayed with spaces between the cell.

   See http://lanceolot.wordpress.com/testtable/ for an example.

   I want the same grid - just without the space between the cells. I have used every HTML tag I can think of (including deprecated ones) and inline CSS but nothing seems to work. The HTML I am using works perfectly in a normal HTML page - but the moment its loaded in a wordpress.com page, the problem is visible.

   Anyone able to help?

   Thanks

   Lance

   The blog I need help with is lanceolot.wordpress.com.

2. lanceolot
   Member
   Dec 3, 2012, 1:43 PM

   Additional info - I found that the line-height property on the TR has removed the horizontal gaps between rows... This is a step in the right direction, now I need to figure out how to remove the gap between the columns.

   Anyone got any suggestions?

3. lanceolot
   Member
   Dec 3, 2012, 2:20 PM

   Another update - I created a 3x3 grid using DIV and pure CSS... the SAME problem happens.... there is a space between the columns.

   very frustrating.... especially considering everything works perfectly in a normal HTML (i.e. not hosted on WordPress.com) page...

4. justpi
   Member
   Dec 3, 2012, 3:46 PM

   It's not wordpress.com in general, it's the quirks of some themes. You've added lots of unnecessary stuff to your code but you're missing one crucial quirk: each image on your page isn't 160px wide, it's 156px (plus 4px of space inside the 160px wide cell), because the CSS of the theme specifies a 97.5% max width for inserted images. So you need to turn these:
   <img ETC ETC
   to
   <img style="max-width:100%;" ETC ETC

   But why do you need a grid with no space at all between the cells?

5. lanceolot
   Member
   Dec 3, 2012, 4:36 PM

   Brilliant... Thank you for this.

   I did not know that this was a theme specific issue and did not know anything about the 97.5 % max image size (where is that documented?) - but now that you mention it, I did experience an issue where I thought I was going blind because the odd image looked a little blurry - now I realise its due to the scaling.

   Yes. I have added unnecessary code - it was all in an attempt to try and resolve the issue - i.e. try anything till it works. I can now rip it all out and create something that may just pass muster.

   What do I need it for? Well, I want to create borderless galleries for images that link to artists work. I cannot use the Gallery feature because it does not allow for external URL linking directly off the image. I need to do this because I don't want to have to duplicate the a large version of any artists work on the WordPress.com servers - its not mine so while an icon and link would be fine, just copying their work onto my blog is not something I am comfortable with.

   You can see what I am doing on an existing page (which will shortly be updated with the new code)...

   http://lanceolot.wordpress.com/2012/11/29/inspire-realistic-portraits/

   Thanks for your help.

   Lanceolot

6. lanceolot
   Member
   Dec 3, 2012, 5:02 PM

   Just a note before the thread is closed - I have removed the test page.

   Key items for anyone else having this issue:

   Beyond the normal margin etc CSS tags, the following also affect the 2011 theme and image spacing.
   line-height on the div or tr
   max-width on the img tag

   Thanks again justpi.

7. 1tess
   Moderator
   Dec 3, 2012, 5:09 PM

   Just another idea: why not make a composite image and then use image mapping to make the "thumbnails" clickable?

8. lanceolot
   Member
   Dec 3, 2012, 5:13 PM

   I have not used an Image Map for anything in almost a decade.. but yes, that would also work - not ideal if I needed to change something but it would serve the same end result.

9. 1tess
   Moderator
   Dec 3, 2012, 5:17 PM

   You are right about the difficulty of changing a thumbnail. But you might find you want to switch themes and your tables could be messed up by other quirky table CSS coding…

10. lanceolot
    Member
    Dec 3, 2012, 5:23 PM

    True. I had not thought of that.. but to be honest, I think that any change of theme is likely to mess up more than just a few tables. I decided to use divs for this (more flexible - i can replicate the Gallery Rectangle style easily and I am not really displaying tabular data more suited to tables) and I have done a few live previews with other themes and it seems to work or degrade gracefully. It works on android and safari (iOS) too so I can live with that.

11. justpi
    Member
    Dec 3, 2012, 6:11 PM

    @Lanceolot:
    You're welcome.
    "did not know anything about the 97.5 % max image size (where is that documented?)"
    I thought I answered that when I wrote "the CSS of the theme specifies" etc: you can find it if you examine the stylesheet of the theme, or if you examine your page using a utility such as Firebug (in Firefox). That's what you should do in general to find what you need and what you don't need to override instead of trying all the commands you can think of.

    @Tess:
    "why not make a composite image and then use image mapping"?
    That's exactly why I asked my question! (But I would suggest it only if Lanceolot wanted to break one actual image into pieces.)

12. 1tess
    Moderator
    Dec 3, 2012, 6:29 PM

    @justpi
    It was only a suggestion. At any rate Lanceolot came up with a nice alternative.

Topic Closed

This topic has been closed to new replies.