Welcome to WebmasterWorld Guest from 23.23.53.177

Forum Moderators: incrediBILL

Message Too Old, No Replies

Unwanted vertical spacing under images

verticle spacing padding images

   
3:56 pm on Jun 28, 2011 (gmt 0)



Good afternoon!

My query is about how to remove the unwanted verticle spacing from an image. I am using Wordpress.

I have read various articles about removing such a space with the display:block method. However these articles seem to be in the context of an image which is in a table cell. My image is not in a table.

A simplified chunk of my code:

<strong>The legal team</strong></p>
<img class="alignleft" style="float: left; margin-left: 4px; margin-right: 4px; display: block;" title="Andrew Bonell" src="http://www.bonellaw.co.uk/wp-content/uploads/2010/10/andrew-Bonell.jpg" alt="Andrew Bonell" height="226" width="150"></a><strong>Andrew Bonell</strong> grew up and qualified in the Black Country.</p>
<p>Andrew leads Bonell &amp; Co’s non-contentious and property practice..</p>

As you can see I have already attempted the display:block but to no avail.

This is the website where the offending pictures are: [bonellaw.co.uk ]

You'll notice a significant white space above and below the photos which I can't get rid of!

Can you tell me what the code is to get rid of this space, and WHERE it goes in my html. I just want the standard tight wrap that hubspot does.

Thank you for your help!
4:12 pm on Jun 28, 2011 (gmt 0)

WebmasterWorld Senior Member rocknbil is a WebmasterWorld Top Contributor of All Time 10+ Year Member



Welcome aboard StrangePR, you should install the Firebug extension for Firefox - a right click->Inspect Element on the images shows a 33/20 pixel padding above and below them and points to this selector:

#innercontent img {
margin: 0;
padding: 33px 0 20px;
}
4:30 pm on Jun 28, 2011 (gmt 0)



Hi!

Right. Any ideas how I get to this piece of code on word press?
Obviously by using this program I have issues at getting to the bare bones of the html.
I'm pretty sure this code you found doesnt feature on the html available for me to edit (from that module box at least).
4:35 pm on Jun 28, 2011 (gmt 0)



I shall write an email to my web designer and see if he can change it for me, or else change the settings on word press so i can get to that bit of code!
4:14 pm on Jun 29, 2011 (gmt 0)

WebmasterWorld Senior Member rocknbil is a WebmasterWorld Top Contributor of All Time 10+ Year Member



Umm, there should be an area right in WordPress where you can directly edit the CSS, if the server is set up with the permissions to write the file. Log in and try Appearance -> Editor, you should see at the top [Site Name]: Stylesheet (style.css) and at the right "Select theme to edit" if it's not the currently active theme (which it should be.)
8:39 pm on Jul 13, 2011 (gmt 0)

WebmasterWorld Administrator 5+ Year Member Top Contributors Of The Month



If you have not managed to take care of this yet, the vertical space under images can be a result of using the media library in WP and its interface. In the html editor for your page, look for the image code:
<img etc
follow it along to where you find
caption=""
and remove that. It adds a frame with a vertical space under images if it is left blank.