WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Why is this border extending so far? (8 posts)

  1. davincim
    Member
    Posted 7 years ago #

    In several of my posts I've added an image where via CSS a border is added and the text wraps around it. The CSS for a left and right image are below:

    .imgborderR {
    	float: right;
    	margin: 0px 0px 10px 10px;
    	background-color: #ffffff;
    	border: 1px solid #999;
    	padding: 2px;
    	line-height: 0;
    }
    
    .imgborderL {
    	float: left;
    	margin: 0px 10px 10px 0px;
    	background-color: #ffffff;
    	border: 1px solid #999;
    	padding: 2px;
    	line-height: 0;
    }

    Yet in this post -- http://www.familywebwatch.com/blog/2005/05/12/blogs-are-not-diaries/ -- and others like it, the bottom border is extending far beyond where I want it to. It should be even all the way around.

    Any thoughts?

  2. JoyceD
    Member
    Posted 7 years ago #

    I had a look at your CSS and it's probably to do with this being in there:

    img {border:none;display:block;margin: .5em 0}

    That says that each image's top and bottom margins should be .5em, so what I don't get is why it's not adding the margin to the top of the images you refer to. Adding the following may work, or it may not. ;)

    .imgborderR img, .imgborderL img { margin: 0; }

  3. davincim
    Member
    Posted 7 years ago #

    Thank you, JoyceD. I'll give that a try. :)

  4. JoyceD
    Member
    Posted 7 years ago #

    I just had a look again, it could also be because there's a paragraph tag before the img tag.

  5. jkeyes
    Member
    Posted 7 years ago #

    JoyceD is right, it's the p tag is causing the problem.

    The CSS for that tag is:

    
    p, ul, ol {
      margin:0pt 0pt 1.5em;
    }
    

    I changed the margin to 0 using Firebug and the extra space at the bottom is removed.

    So either remove the p or add a class to it and set it's margin to 0 if that's what you want.

  6. davincim
    Member
    Posted 7 years ago #

    Thank you both for your help.

    I'm still on the low end of the CSS learning curve, so I'm not as experienced as I'd like to be to fully implement your suggestion.

    I do know that what I don't want is to remove the spacing between the paragraphs. When I converted 1.5em to 0, or when I removed the p entirely, my posts lost their spacing -- but the image border looked good! :)

    So do I need to create another class or modify the existing imgborderR and imgborderL? In either case, how?

  7. jkeyes
    Member
    Posted 7 years ago #

    You can add a rule like this to your CSS and it should work:

    .imgborderL p, .imgborderR p {
      margin: 0;
    }
    

    This will remove the margin for any p tags that are children of a tag with a .imgborderL or .imgborderR class.

    Sorry for not being more explicit earlier.

  8. davincim
    Member
    Posted 7 years ago #

    Thank you, jkeyes! That did the trick. :)

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags