Why is this border extending so far?

  • Resolved davincim

    (@davincim)


    17 years, 9 months 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 — https://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?

Viewing 7 replies - 1 through 7 (of 7 total)

  • 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; }

    Thread Starter davincim

    (@davincim)

    Thank you, JoyceD. I’ll give that a try. ??

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

    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.

    Thread Starter davincim

    (@davincim)

    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?

    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.

    Thread Starter davincim

    (@davincim)

    Thank you, jkeyes! That did the trick. ??

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Why is this border extending so far?’ is closed to new replies.

Tags