Help fix wonky cellpadding

[vaneramos]

First of all I have an HTML question. In order to comply with Flickr "Terms of Service" I am incorporating a link back to the site with each photo. However I want grey borders instead of the colours otherwise associated with links. To do this, I set the photo border to "0" and enclosed it in a single-cell table with cell padding 5, and table background colour set to grey. Can anyone tell me why the bottom padding ends up wider than 5 pixels, and how to fix it? I've experimented with vertical alignment of the "td style", and tried setting the table height to 10 pixels more than the photo, but to no avail.

Feeling tired from the weekend, but managed to go for a nature walk with Mina. We went out Lilac Way and found the lilacs at their peak. I had heard those trails ran as far as Eden Mills, a few kilometres distant, and she confirmed she rode all the way some years ago.

I tend to get caught up in the big picture, so it's nice to go walking with someone who notices little things, the kind of things I like to photograph. So while I snapped photos, she would say, "Oh look at this." It worked nicely. My daughters make good teammates in the same way.

I spotted the hopping leopard frog in a meadow near the Eramosa River, but the buprestid beetle was Mina's find. At least I think that's what it is. These are also known as jewel beetles, because some tropical species are actually incorporated into jewellery. This specimen isn't as showy, but still striking in its own way. It is barely larger than the head of a pin.

I came home with a blowsy, fragrant bouquet of lilacs for the living room.

Comments

[grandiva1968.livejournal.com]

I wouldn't pack it as a table, but that's me; I'm a CSS freak.

I'd do things as much inline placement as I could.

For example, in this entry, you coded this:

<table style="text-align: left;" cellpadding="5" cellspacing="0">
<tbody>
<tr>
<td style="text-align: center; vertical-align: middle; background-color: rgb(102, 102, 102);"><a href="http://www.flickr.com/photos/vaneramos/152129887/" title="Buprestid beetle"><img src="http://static.flickr.com/48/152129887_d42ccef80f.jpg" alt="IMG_2164" border="0" height="328" width="460"></a></td>
</tr>
</tbody>
</table><br><br /><table style="text-align: left;" cellpadding="5" cellspacing="0">
<tbody>
<tr>
<td style="text-align: center; vertical-align: middle; background-color: rgb(102, 102, 102); height: 338px;"><a href="http://www.flickr.com/photos/vaneramos/152129947/" title="Leopard frog"><img src="http://static.flickr.com/46/152129947_8a9112a096.jpg" border="0" width="460" height="329" alt="IMG_2181" /></a></td>
</tr>
</tbody>
</table>

I totally wouldn't do that.  Rather than laying things out as a table, I'd simply create the three objects fully formatted unto themselves.  The third picture would be coded like this, then:

<p style="text-align:center">
<a href="http://www.flickr.com/photos/vaneramos/152129947/" title="Leopard frog">
<img src="http://static.flickr.com/46/152129947_8a9112a096.jpg" style="border:5px solid rgb(102,102,102);width:460px;height:329px" alt="IMG_2181" />
</a>
</p>

It won't materially change how the object looks, and the border will be even all the way around the picture.

If I add a "margin" argument to the style part of the tag, I can control the space around the photo without all the odd pixels associated with the table.  margin-left, margin-right, so forth and so on.  You can set things up with a bubble of however many pixels.  Look at my code for this page to see how I work it with margins and borders instead of tables.

[grandiva1968.livejournal.com]

It sounds totally harsh when I say it like that, and I need to apologize for sounding so bloody condescending.

I'm sorry.

[vaneramos.livejournal.com]

But I didn't take it that way. My knowledge of HTML is sketchy, so your comment was helpful. I'm too tired to deal with it right now, so I'll fix it tomorrow. Thanks!

[grandiva1968.livejournal.com]

Okay.

Try CSS.

[bigmacbear]

You could try omitting the table and using the "style=" attribute on the <a> tag, like so:

<a href="http://whatever it is" style="border-width: 5px; border-color: grey"><img src="http://whatever it is" height="##px" width="##px" alt="My Picture"></a>

where the links and sizes are, of course, filled in with the appropriate values. I think defining the style directly on the link element overrides the ordinary link properties. It may make a difference what browser you use too.

Re: Try CSS.

[vaneramos.livejournal.com]

Thanks Mike. That looks like the simplest solution. My HTML knowledge is a bit sketchy.

[missprune.livejournal.com]

Oh that shiny beetle is just wonderful! The lilacs are in full bloom everywhere here, their scent feels like uplifting "aromatherapy" to me.

[vaneramos.livejournal.com]

Lilacs and lindens are my favourite aromatherapy!

[susandennis]

That frog is the jigsaw-nest frog I ever did see! Fabulous!!

[vaneramos.livejournal.com]

I think he was posing just because he wanted to be in one of your puzzles.

[tim-e-bear.livejournal.com]

At the risk of sounding like the worst kind of kiss-ass suckup (neither of which I would consider a bad thing ;) ), your photography is breathtaking. Love it...

[vaneramos.livejournal.com]

Kissing and sucking are acceptable forms of appreciation. ;-)

Blog Guelph

[(Anonymous)]

I'd love to add your blog link to Blog Guelph (http://www.blogguelph.blogspot.com).

Sue Richards

[detailbear.livejournal.com]

Strangely enough, it looks fine on my friends page, but has the extra space on your page. The fact that LJ uses a big table to organize the page probably means there's a setting in the master CSS for that style page that you'll need to override, as per the examples above.

[vaneramos.livejournal.com]

Yes, I had similar discrepancies. The table doesn't work for me on LJ, but it looks alright in the comment emails. If I have to override something, I'm going to be up the creek without an HTML, or at least the knowledge to use it. The style I use is difficult to manipulate.

BTW our spring concert will be a week from Saturday. We're also doing one on Friday night at Parkminster United in Waterloo (the church where we did the wedding last fall). Drop a line if you're interested in coming.