How do I reduce empty space between photo and text

I am actually using this photo in a table format and cannot seem to lessen the space around the photo and the surrounding text.


<p>In a recent interview with the Daily Telegraph, English Heritage&#8217;s Chief Executive Simon Thurley, called for stiffer penalties for those found guilty of committing heritage crime. He was reported as saying that there was evidence that many of those who targeted historic monuments for a variety of criminal 
reasons,  including metal detector users who dug up archaeologically rich sites looking for valuable artefacts, were <i>&#8220;habitual&#8221;</i> offenders. He went on to allege that some thieves trawled English Heritage&#8217;s databases of protected sites looking for places likely to contain rich pickings. How does he know?
Where are the supporting figures and stats? Unimpressive stuff, but clearly showing he&#8217;d been badly briefed. In-House sabotage perhaps????</p>



<table class="image" align="left"> 
		<td><img src="images/Thurley3.jpg" height="310" width="425" border="4"> 
  
	<tr>
       
		</td>
	</tr>
	<tr>
		<td class="caption"><center><b>Simon Thurley
        </b></center></td>
	</tr>
</table>

<p>It was, Thurley further claimed, <i> &#8220;disappointing&#8221;</i> when those brought to justice got away with a <i>"slapped wrist."</i> Presumably he&#8217;s anxious to deny judges and magistrates the autonomy to fit the punishment to the crime. In calling for the judiciary to mete out custodial sentences for the most
serious heritage offences, he further complained that many of those found guilty received only conditional discharges, or a fine, though failed to spell 
out exactly what constituted  &#8216;serious heritage crime.&#8217;</p>

Hi,

That’s some pretty “old school” code you have there but you can try the following:


.image{border-collapse:collapse;}
.image td{padding:0}
.image img{display:block}


You may also have to address the defaulkt top and bottom margins on the p element that surrounds the table if that is what you arealso talking about.

e.g.


p{margin:0}

That will affect all p elements so you may need to add classes to those 2 p elements and style them via the class.
Of course it does depend on what styles you already have applied.

Unfortunately I am indeed old school. 72 years old, and cannot afford to take classes. I know my code is terrible, and I am not proud of it, but I am just trying to keep my website up and running as best I know how. I tried your suggestions, and nothing changed. Will keep looking at things and maybe something will jump out at
me. Thanks for your reply…it’s appreciated.

If I do this I can correct the space problem, but now I am stumped on how to align this photo and caption to the left?

<div style=“width:image width px; font-size:80%; text-align:center;”><img src=“images/Thurley3.jpg” alt=“alternate text”
width=“425” height=“310”> <style=“padding-bottom:0.5em;”><br />Simon Thurley<br /></div>

Your original code had a stray <tr> tag which might have been messing things up:

<table class="image" align="left"> 
		<td><img src="images/Thurley3.jpg" height="310" width="425" border="4"> 
  
	[COLOR="#FF0000"]<tr>[/COLOR]
       
		</td>
	</tr>
	<tr>
		<td class="caption"><center><b>Simon Thurley
        </b></center></td>
	</tr>
</table>

Anyhow, that latest code you have isn’t real HTML code. But if you want the image and caption set to the left, remove this on the div:

text-align:center;

That specifically tells the image and the <p> to be centered.

Barnum,

In message #4, the following line contains some invalid code, too, as noted in red:


<div style="[COLOR="#FF0000"]width:image width px;[/COLOR] font-size:80%; text-align:center;">

Perhaps you just wrote that symbolically for our benefit.

You do not have to be ashamed of old code.

It would be easiest for us to help if you could post a link to your site.

Don’t worry I’m not that far away from you I was 60 last year :slight_smile:

I tried your suggestions, and nothing changed.

I’m afraid you must have done something wrong because even on the snippet you gave above the code I gave reduces all space completely. It may be that you have more specific styles as I mentioned above so we would need to see more code and css. Do you have a link perhaps?

If I do this I can correct the space problem, but now I am stumped on how to align this photo and caption to the left?

<div style=“width:image width px; font-size:80%; text-align:center;”><img src=“images/Thurley3.jpg” alt=“alternate text”
width=“425” height=“310”> <style=“padding-bottom:0.5em;”><br />Simon Thurley<br /></div>

Please don’t do that :slight_smile:

I’m not sure whether the above is a bad copy and paste but most of the rules within are broken. You can’t have a style tag in there and I guess you meant to use a style attribute in a span or something. I’m not sure what “width:image width px;” is either as its not valid css. However, you should avoid inline styles at all costs as they just create spaghetti code and its easy to make errors like that when the code is messy as you can’t spot the obvious mistakes. Keep the rules in an external stylesheet and control the elements with classes.

If you simply want an image floated left and a small caption under it then all you really need is this:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
.image-caption {
	float:left;
	margin:0;
	text-align:center;
}
.image-caption span, .image-caption img { display:block }
</style>
</head>

<body>
<p class="image-caption"> <img src="images/Thurley3.jpg" alt="image description" width="425" height="310"> <span>Caption</span> </p>
</body>
</html>


To give more specific help I would need to see more code and css or a link to the page would be best and then we can offer specific advice. Don’t worry if the code is a mess as we can help you tidy it up - as long as you don’t mind us picking holes in things :slight_smile:

Please understand I know I am “plundering” along here…have been for the past three years, and just want to keep my site going for those few who enjoy it. I tried removing the orphaned “tr” and that did nothing, and removing the text align center, moved the image, but the caption is also way left.

As has been the case for sometime now I will figure it out in due time…

Well spotted Ralph :). It’s not stray though its just in the wrong place. It should go before the first td.


<table class="image" align="left">
		[B]<tr>[/B]
				<td><img src="images/Thurley3.jpg" height="310" width="425" border="4"></td>
		</tr>
		<tr>
				<td class="caption"><center>
								<b>Simon Thurley </b>
						</center></td>
		</tr>
</table>


Even with that change, the caption and the text leaves much too much empty space…

Could you please post a link to your site? It would really be helpful.

If you cannot post a link, then perhaps you can post ALL of your code between [noparse]

 

[/noparse] tags so it will retain its format. In that way, we can copy it to a file and view it in our browsers, sans images.

Here is one page that reflects the image/caption/text problem I currently have…

This is what your first posting of code looks like on my P/C in Firefox. The browser window is intentionally narrow to show how the text wraps. Is this what you see? If not, perhaps we should ask what browser and version you are using.

EDIT: Ninja’d by Barnum !!! :slight_smile:
That’s perfect. Will get back to you shortly.

Sorry, nothing shows up. I use IE9…

Barnum,

The attached code replaces the top 225 lines of your page ENTIRELY.

To insert it, delete EVERYTHING above <div id=“wrap”> and replace it with the attached code.

Carry out this change on a backup copy of your page, then test to see if it works as desired before committing to it.

The changes made are not as dramatic as it sounds, but I combined a number of near-duplicate rules. It is easier to just replace the entire block rather than describe each of the little items.

I did not touch the list code. Just the body, table, img and anchor code.

The reason Paul’s code did not help may well be because later css code further down the page overrode his code.

There are plenty of opportunities for further improvements in the HTML section, but this should fix the table-caption spacing problem and make further CSS changes more predictable/reliable.

Please let us know if this works for you.


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <meta name="keywords" content="Coinhunting, Dick Stout, Metal Detecting, FMDAC, Treasure Hunting">
    <title>Malamute</title>
    <style type="text/css">

body {
    background-color:#DEB887;
    font-family: Verdana, impress, sans-serif;
    margin-left:100px;
    margin-right:100px;
}

h1 {font-size:25px;}
h2 {font-size:35px;}
h3 {font-size:30px;}
h4 {font-size:40px;} 
h5 {font-size:20px;}
h6 {font-size:15px;}
h7 {font-size:19;}

text {font-weight: bold;}

p:first-letter {
    font-size: large;
    color: black;
}

table {
    border 1px solid black;
    border-spacing:2px 0;    /* ADDED */
    margin:10px auto;        /* CHANGED */
    padding:10px;
}

th {
    border 1px solid black;
}
td {
    padding:0 10px;          /* CHANGED */
}

img {
    border:4px solid black;
    padding:0px;
    margin:0px 10px;          /* CHANGED */
}

.flag-pic {
    border: none;
}

ul {
    list-style-type: none;
    line-height: 1.5em;
}
#navbar {
    margin: 0;
    padding: 0;
    height: 1em; 
}
#navbar li {
    list-style: none;
    float: left; 
}
#navbar li a {
    display: block;
    padding: 3px; 
    background-color: #DEB887;
    color: #000;
    text-decoration: none; 
} 
#navbar li ul {
    display: none; 
    width: 10em;       /* Width to help Opera out */
    background-color:#69f;
}
#navbar li:hover ul, 
#navbar li.hover ul {
    display: block;
    position: absolute;
    margin: 0;
    padding: 0; 
} 
#navbar li:hover li,
#navbar li.hover li {
    float: none;
}
#navbar li:hover li a,
#navbar li.hover li a {
    background-color: #F5DEB3;
    border-bottom: 1px solid #fff;
    color: #000; 
}
#navbar li a:hover {
    background-color: #8db3ff;
}
a:link,
a:visited {
    color:blue;
    text-decoration:none;
}
a:hover {
    text-decoration:underline;
}
a:active {
    color:red;
}

      </style>
<script type="text/javascript">  var _gaq = _gaq || [];  _gaq.push(['_setAccount', 'UA-19821548-1']);  _gaq.push(['_trackPageview']);  (function()
{    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;    ga.src = ('https:' == document.location.protocol ? 
'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();</script>
</head>
  
<body>  


Good work Ron. Things are always solved quicker when we have access to the full code.:slight_smile:

Sorry to just be getting back on this… I appreciate the work and the changes to my code. My only concern was the text (font)…it’s different from what I have used over the past three years…?

Do you mean the font inside the yellow boxes?

I’m not sure which font you are referring to, Barnum. It may have been an oversight on my part. Please identify a particular paragraph or area that I can see and describe how it is different. BTW - you didn’t change browsers or change your default font during the past week, did you? Just checking. :slight_smile:

No the entire page…text is much bolder, and a different font.