Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New Coder
    Join Date
    Feb 2009
    Location
    South Africa and USA
    Posts
    63
    Thanks
    30
    Thanked 0 Times in 0 Posts

    Macintosh Unwanted borders on pictures in blog post

    I recently posted six pictures to a blog post all of which were edited with the same online program. five of the pictures are fine. One picture is showing white space between the edge of the image and the border on three sides only. The fourth side shows the border as it should be, flush with the edge of the image.

    I submitted a request for help with the online site and following was the answer:

    "Looking at the underlying JPGs for those images, they do not have borders at all. So Picnik has not added them.

    It appears that your blog software is automatically adding a whitespace and border around those images. When I view your page with styles turned off, the borders disappear.

    You might need to check your stylesheet for how it styles images that are linked ie, images that are inside of <a> tags.
    "
    I removed the following code from the offending pic (this code was the only diff between it and the others) and it solved the problem:

    Code:
    <a href="http://nowthinkaboutit.com/wp-content/uploads/2010/08/Mom-chick-225.jpg"> </a>
    My questions: Why was this inserted in the first place and why does it make a difference? Also, how do you view a page with styles turned off?

    I am using a WordPress platform for a stand alone blog with the "Revolution Code Blue" theme and working with a MacBook.

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,862
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Can we have a link to that erroneous post?
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    New Coder
    Join Date
    Feb 2009
    Location
    South Africa and USA
    Posts
    63
    Thanks
    30
    Thanked 0 Times in 0 Posts
    Yes, the URL is here

  • #4
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,862
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Okay, so your original markup was
    Code:
    <a href="http://nowthinkaboutit.com/wp-content/uploads/2010/08/Mom-chick-225.jpg"> <img width="225" height="168" src="http://nowthinkaboutit.com/wp-content/uploads/2010/08/Mom-chick-225.jpg" alt="" title="Mother with Chick" style="float: left; margin-right: 10px; margin-top: 5px; border: 1px solid grey;" class="alignnone size-full wp-image-1481"></a>
    and you removed it for the time being, right?

    You've the following rule in your CSS file, which is causing that extra padding. When you remove the wrapper anchor element, the CSS selector becomes idle to this particular image. The same would happen if you opt to place the thumbnail of other images, when you insert into the post
    Code:
    /*  amazon reloaded */
     #contentleft p a img { float: left; padding-top: 10px; padding-right: 15px; padding-bottom: 10px; }
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #5
    New Coder
    Join Date
    Feb 2009
    Location
    South Africa and USA
    Posts
    63
    Thanks
    30
    Thanked 0 Times in 0 Posts
    Below is what I found on the style sheets:

    Code:
    img.alignnone {
    	padding: 0px;
    	margin: 0px 0px 10px 0px;
    	display: inline;
    	}
    There was code for left, right and center alignments but I use alignnone and then type in code for placement. I have no idea why there are four px settings.

    Yes, I removed the <a href> tag for the time being. That solved the padding problem.
    Last edited by EnnisP; 09-01-2010 at 03:54 PM. Reason: Left something out

  • #6
    Regular Coder Lerura's Avatar
    Join Date
    Aug 2005
    Location
    Denmark
    Posts
    946
    Thanks
    0
    Thanked 129 Times in 128 Posts
    Quote Originally Posted by EnnisP View Post
    I have no idea why there are four px settings.
    there is one "px" for each side in this order: top , left , bottom , right
    if there are only 3 "px"s, then it is: top , left and right, bottom
    2 "px"s is: top and bottom , left and right.
    1 "px" is: all four sides

  • Users who have thanked Lerura for this post:

    EnnisP (09-02-2010)


  •  

    Posting Permissions

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