<br /> HTML tag not cross-browser compatible

Question

I have an issue with the HTML <br /> tag.

I have 2 images above each other.

With no <br /> between the two, the bottom border of the top image touches the top border of the bottom image which seems to be what it is supposed to be. Then if I put 1 <br />, there should be some space between the 2 images. If I put 2 <br />, there should be even more space.

Here is the problem

Firefox version 3.5 seems to ignore the first <br />. If I put 2 then it puts some space between the 2 images. IE7 puts some space between the 2 images even if I don't put any <br /> Things work fine in Chrome or Safari, i.e. there is no space with no <br />, some space with 1 <br />, more space with 2, etc... I have not tested in IE8.

Is there a way to get around the fact that browsers don't seem to interpret the <br /> tag the same way?

Thanks for your insight!

Answer 1

Try using css to position the images rather than relying on the br tag.

img { display: block; margin: 0 0 20px 0; }

For example.

Answer 2

First of all you should make sure that you have a valid doctype on the page, so that it renders in standards compliant mode. That will minimise the differences. W3C: Recommended list of DTDs

The <br /> tag is not HTML, it's XHTML. If you are using HTML you should use a <br> tag instead.

If you don't have any break between the images, they would be displayed on the same line. If there isn't room for that, the browser will break the line and place one image on the next line. If you add a break between images that has already been broken into two lines, that makes no difference.

However, in some modes some browsers make a difference between images that are by themselves and images that are part of a text. Adding a break between the images means that they are part of a text, and the browser will display the image placed on the base line of a text line. This means that there is some space below the image that is the distance from the base line of the text line to the bottom of the text line, the space used for hanging characters like g and j. Depending in the size of the images and the line height, there may also be some space above the image.

To ensure that the images are not displayed as part of a text you should turn them into block elements. You can use the style display:block; for this. You can also use float:left; or float:right; to make an image float, that will automatically make it a block element.