ansaurus

Question

<br /> HTML tag not cross-browser compatible

Answer 1

+1 A:

The size of the br element depends on the font size/line height. Have you considered just setting display block on the image elements and setting a bottom margin, and maybe adding a 'last' class on the last one so it doesn't have a bottom margin?

<!doctype html>
<style>
    body { background:gray; }
   div#gallery .row img { display:block; margin:0 0 1em; }
    div#gallery .last img { margin-bottom:0; }
    div#gallery .row .thumb { float:left; width:5em; }
    div#gallery .row { clear:both; width:50em; overflow:hidden; }
</style>

<div id="gallery">

<div class="row">
<div class="thumb"><img src=http://col.stb.s-msn.com/i/B4/BA27E3F44CD76DFB45ECCF070C722.jpg src=http://col.stb.s-msn.com/i/B4/BA27E3F44CD76DFB45ECCF070C722.jpg&gt;&lt;/div&gt;
<div class="thumb"><img src=http://col.stb.s-msn.com/i/B4/BA27E3F44CD76DFB45ECCF070C722.jpg&gt;&lt;/div&gt;
<div class="thumb"><img src=http://col.stb.s-msn.com/i/B4/BA27E3F44CD76DFB45ECCF070C722.jpg&gt;&lt;/div&gt;
<div class="thumb"><img src=http://col.stb.s-msn.com/i/B4/BA27E3F44CD76DFB45ECCF070C722.jpg&gt;&lt;/div&gt;
</div>

<div class="row last">
<div class="thumb"><img src=http://col.stb.s-msn.com/i/B4/BA27E3F44CD76DFB45ECCF070C722.jpg&gt;&lt;/div&gt;
<div class="thumb"><img src=http://col.stb.s-msn.com/i/B4/BA27E3F44CD76DFB45ECCF070C722.jpg&gt;&lt;/div&gt;
<div class="thumb"><img src=http://col.stb.s-msn.com/i/B4/BA27E3F44CD76DFB45ECCF070C722.jpg&gt;&lt;/div&gt;
<div class="thumb"><img src=http://col.stb.s-msn.com/i/B4/BA27E3F44CD76DFB45ECCF070C722.jpg&gt;&lt;/div&gt;

</div>
</div>

Though in this example it'd be easier to set a bottom margin on the row itself.

meder 2009-09-19 22:14:59

Answer 2

+10 A:

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

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

For example.

Steerpike 2009-09-19 22:18:38

I ended up using padding instead. margin would not work. Thanks!

2009-09-19 22:42:35

Answer 3

+7 A:

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.

Guffa 2009-09-19 22:41:56

WOW! Thanks for answering my question with so much insight! I appreciate it! :)

2009-09-19 22:48:15

Whether the element is HTML 4.01 or XHTML has little or nothing to do with its rendered presentation.

2009-09-21 01:40:16

@austin, but it has everything to do with <br /> is valid or not. Further, the doctype has everything to do with proper rendering.

Chris Lively 2009-09-21 02:30:28

Answer 4

A:

if you want to use the
tag you can do it so :

<br style="line-height:?px; height:?px" />

where ?px = how many px it`s needed to show the result you need OR you could use:

<br clear="all" />

it should work...

if you want to use CSS you could do it so :

<style>
img.newline{
display:table-row;
}
</style>
<img src="1.jpg" class="newline"/>
<img src="2.jpg" class="newline"/>

it should work.. these are quick ways to do it.. you can use css and make something great.. but what i wrote here are "quickies" and most simple/fastest ways i thought of.

DanTdr 2009-09-20 19:22:50

Answer 5

A:

The br element is a presentation element that offers no descriptive value. Most browsers tend to apply default presentation to different elements that can differ slight from browser to browser. So, I would strongly recommend not using the br element and instead using a span tag and CSS to ensure your presentation is uniform across various browsers.

2009-09-21 01:38:19

Answer 6

A:

Are you set up like this?

<img src="1.jpg" />
<img src="2.jpg" />

The correct behavior is actually to not line break between the images, they should appear on the same line. The first BR tag added should bring the second image to a new line, then the second BR should create a gap.

It might fix it if you specifically tell your images to line-break themselves, so they appear on separate lines even without a BR.

Karl 2009-09-21 02:02:10

Answer 7

A:

I would add one thing to DanTdr's response. If you don't add a small font size for the BR tag then you run into problems in IE because of it's hasLayout behavior. The BR would be a minimum of 1em.

<br style="line-height: ?px; height: ?px; font-size: 1px;" />

After being frustrated for some time with not getting BR tags to render the same in Firefox and IE this font-size: 1px; style finally made my layout appear the same in both browsers.

Scott 2009-12-13 06:46:01

ansaurus

tags:

views:

answers:

<br /> HTML tag not cross-browser compatible

related questions