Welcome to WebmasterWorld Guest from 54.162.164.247

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)

New User

5+ Year Member

joined:June 28, 2011
posts:3
votes: 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 June 28, 2011 (gmt 0)

Senior Member

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

joined:Nov 28, 2004
posts:7999
votes: 0


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 June 28, 2011 (gmt 0)

New User

5+ Year Member

joined:June 28, 2011
posts: 3
votes: 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 June 28, 2011 (gmt 0)

New User

5+ Year Member

joined:June 28, 2011
posts: 3
votes: 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 June 29, 2011 (gmt 0)

Senior Member

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

joined:Nov 28, 2004
posts:7999
votes: 0


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 July 13, 2011 (gmt 0)

Administrator from US 

WebmasterWorld Administrator not2easy is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Dec 27, 2006
posts:3332
votes: 162


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.
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members