Margin Not Displaying Expected Results

[ProblemHelpPlease]

I'm having a problem with margins between images and <hr> see code below

<img src='image.jpg' alt='blah' style='margin:10px 10px 10px 10px; float:left; border-style:solid; border-width:1px; width:200px;'><hr style='width:70%; height:2px; color:#000000; border-width:0; background-color:#000000; clear:both; margin:20px auto 20px auto;'>

When using the code above the gap between the image above and the hr below is 10px not 30px. It isn't applying the 20px of the top of the hr.Any ideas why? (I am using strict doctype, same in IE anf FF)

[chibineku]

The hr is deprecated and should be replaced by using an appropriate border.

[ProblemHelpPlease]

I have replaced the hr with an img instead and still have the same issue, new code is below

<img src='image.jpg' alt='blah' style='margin:10px 10px 10px 10px; float:left; border-style:solid; border-width:1px; width:200px;'><img src='bar.jpg' style='width:500px; height:2px; border-style:none; clear:both; display:block; margin:20px auto 20px auto;'>

[chibineku]

It might be because the first image is still by default set to display:inline

[dsonesuk]

Actually the attributes of the hr are deprecated such as 'noshade', 'size', 'align' not hr itself, you should now use css instead.

[ProblemHelpPlease]

Actually the attributes of the hr are deprecated such as 'noshade', 'size', 'align' not hr itself, you should now use css instead.

Thats what I thought, but hr or img it still results in the gap not being 30px but 10px, I have set the first img to display:block with no effect

[dsonesuk]

it's to do with how IE renders Margins, and Padding compared to other browsers, if you use padding instead, for top and bottom edges for the HR only! the distance should equal to about 30px, but i think one browser, will include height of hr image, while the other will not, so you might get a 1 to 2px difference.

[ProblemHelpPlease]

I've reverted back to hr again so padding will only expand the hr size.The problem exists exactly the same on all major browsers

[dsonesuk]

i was referring to the image you was using for hr, sorry!

[dsonesuk]

try this<hr style='width:500px; height:2px; display:block; margin:20px auto; clear:both; border:none;border-bottom: 2px solid #000; padding-top:20px;' />

[ProblemHelpPlease]

That does work but causes other issues. In places where I have no picture above the hr, just text, the gap becomes 10px bigger. I am trying to get both img or text to have the same gap to the hr.I cant add a margin to the image as sometimes the text wraps under it causing a gap between text and image.

[ProblemHelpPlease]

Recently found an interesting difference in the way that the error displays itself. In IE8 (or any other browser) on Vista the gap is wrong (10px smaller) whilst in IE8 on XP it works perfectly. Why would the OS make a difference if the browser is the same?

[Hemlock]

Your opperating system should not be the involving factor for you issue.However, your margin to you HR (or second image) is pressent, the reason why you don't see it, is caused by the fact that your image is floating, so the margin of your HR starts counting from the top of the image (or respectively the last tag used before the image).The thing that you'd need to apply is then a bigger margin to your HR (keep in mind that this will effectively work against other objects that hang above it as well, but I guess you shouldn't.You could use a pseudo class after your image, to make a fake image registration of your image, however, I am not really sure how to approach that, should be some articles around the net.

[ProblemHelpPlease]

That makes sense, I thought that the fact the image was using float was affecting it but couldn't get my head round why. The clear:both is pushing hr below the image but the hr top margin is against the text at the right of the image which is technically below the image thus making it the last element before the hr.

[thescientist]

if you're having gap issues, you could just set a universal style to remove padding and margins from all elements (thus removing any browser defaults) and then apply them as needed.

[dsonesuk]

The problem is with the float of the image, you have to use a clear: declaration to make the margin of hr work below the image margin, instead of within it. I tried using clear:both; with the hr, but it would not work, but adding a div tag above it with clear:both; cancels the float, and now the hr margins work as they should.<div style="clear:both;"></div><hr style="color: #2b0c56; background-color: #2b0c56; height: 2px; width:500px; margin: 20px auto;" />Edit: you will also have to take into consideration the margin settings for paragraphs, as they differ between browsers, and so some may produce a wider gap at bottom of hr tag, unless you reset them to act the same - example: p {margin: 0.5em 0;}.

[ProblemHelpPlease]

I already had a div containing clear:both that was displayed only if more images were needed under the first image. The problem with adding a div in permantly is that it adds a small amount of space to the gap when these images are displayed.In the long run it looks ok with the smaller gap than with a bigger one but at least I now know the reason for the problem. I usual use absolute positioning and rarely use float so I'm still learning how it affects other elements on the page.Thanks for your help guys

[dsonesuk]

give the div zero margin, padding, font-size and line-height and, these should get rid of any gap produced by div.