SitePoint Sponsor

User Tag List

Results 1 to 25 of 25
  1. #1
    SitePoint Evangelist Barnum's Avatar
    Join Date
    Oct 2008
    Posts
    418
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    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.
    Code:
    <p>In a recent interview with the Daily Telegraph, English Heritage’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>“habitual”</i> offenders. He went on to allege that some thieves trawled English Heritage’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’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> “disappointing”</i> when those brought to justice got away with a <i>"slapped wrist."</i> Presumably he’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  ‘serious heritage crime.’</p>
    Last edited by Paul O'B; Jan 4, 2013 at 13:46. Reason: code tags added

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    That's some pretty "old school" code you have there but you can try the following:

    Code:
    .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.
    Code:
    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.

  3. #3
    SitePoint Evangelist Barnum's Avatar
    Join Date
    Oct 2008
    Posts
    418
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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.

  4. #4
    SitePoint Evangelist Barnum's Avatar
    Join Date
    Oct 2008
    Posts
    418
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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>

  5. #5
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,200
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Your original code had a stray <tr> tag which might have been messing things up:

    Code:
    <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>
    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:

    Code:
    text-align:center;
    That specifically tells the image and the <p> to be centered.

  6. #6
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,521
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    Barnum,

    In message #4, the following line contains some invalid code, too, as noted in red:
    Code:
    <div style="width:image width px; 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.

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by Barnum View Post
    Unfortunately I am indeed old school. 72 years old, and cannot afford to take classes.
    Don't worry I'm not that far away from you I was 60 last year

    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

    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:

    Code:
    <!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

  8. #8
    SitePoint Evangelist Barnum's Avatar
    Join Date
    Oct 2008
    Posts
    418
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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...

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Your original code had a stray <tr> tag which might have been messing things up:
    Well spotted Ralph . It's not stray though its just in the wrong place. It should go before the first td.

    Code:
    <table class="image" align="left">
    		<tr>
    				<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>

  10. #10
    SitePoint Evangelist Barnum's Avatar
    Join Date
    Oct 2008
    Posts
    418
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Even with that change, the caption and the text leaves much too much empty space.....

  11. #11
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,521
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    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 [code] [/code] 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.

  12. #12
    SitePoint Evangelist Barnum's Avatar
    Join Date
    Oct 2008
    Posts
    418
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Here is one page that reflects the image/caption/text problem I currently have.....

    http://www.stoutstandards.com/Malamute.html

  13. #13
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,521
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    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.

    Barnum.jpg

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

  14. #14
    SitePoint Evangelist Barnum's Avatar
    Join Date
    Oct 2008
    Posts
    418
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Sorry, nothing shows up. I use IE9.....

  15. #15
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,521
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    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.

    Code:
    <!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>

  16. #16
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Good work Ron. Things are always solved quicker when we have access to the full code.

  17. #17
    SitePoint Evangelist Barnum's Avatar
    Join Date
    Oct 2008
    Posts
    418
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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....?

  18. #18
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,200
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Barnum View Post
    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?

  19. #19
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,521
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    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.

  20. #20
    SitePoint Evangelist Barnum's Avatar
    Join Date
    Oct 2008
    Posts
    418
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    No the entire page....text is much bolder, and a different font.

  21. #21
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,521
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    Barnum, can you post the page with the revised css as a separate test URI? Or just post it to the working site temporarily? I can't see the differences that you are describing between the before and after versions in Firefox or IE8. Both look the same except for the margins. It sounds like something may have been copied and pasted incorrectly, or something else is interfering with the rendering of the page. I just can't tell without seeing your revised copy.

  22. #22
    SitePoint Evangelist Barnum's Avatar
    Join Date
    Oct 2008
    Posts
    418
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Will do tomorrow....too much going on tonight to go through all that. Thanks....

  23. #23
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,200
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    The text inside the yellow boxes is wrapped in <b> tags, which will make it look bold. That's all I can see.

  24. #24
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,521
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    We may not have to go through all that work. What is the name of the font that you have been using for years? And can you post screen shots of how the page is supposed to look vs. what it looks like with the revised css? Finally, what is the default font in your browser?

  25. #25
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,521
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    The problem with the font amounts to an oversight.

    Your original css contains a broken font-family declaration. I repaired it by changing the errant semicolons to commas which in turn made Verdana the default font for the site. Heretofore, the site had NO default font; thus, the user set his own font. The font that you have been enjoying for years is the font that you set as your default in your browser.

    You can delete the font-family declaration from the css body element and restore the choice to the user, OR you can replace "Verdana" with the name of the default font in your browser, if you wish.

    Cheers


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •