Jump to content

Margin Not Displaying Expected Results


ProblemHelpPlease
 Share

Recommended Posts

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)

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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;'>

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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
Link to comment
Share on other sites

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.

Edited by dsonesuk
Link to comment
Share on other sites

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.

Edited by ProblemHelpPlease
Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

Edited by dsonesuk
Link to comment
Share on other sites

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

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...