views:

2029

answers:

2

In my HTML I have a div and inside the div I have different vertical spacing between lines of text. I achieve this by using breaks and defining the height, i.e. <br /><br class="height5" /> or height2 or height10 or whatever.

In my stylesheet I define it like:

br.height2 {line-height:2px;} br.height5 {line-height:5px;}

This is working in IE6+ FF2+ and Opera but for some reason there are huge gaps in Safari and Chrome (like those two browsers are ignoring it and just applying regular breaks). I tried testing with larger line-heights like 20px or 30px and Safari and Chrome recognize those. They seem to be ignoring anything under 5-10 pixels.

Help? Thanks!

+2  A: 

Those browsers might be reading your white space (carriage return, etc) and propping it open with a &nbsp;sort of value. I suggest using multiple div tags and style the divs with margin-bottom attributes of the space you want.

<div style="margin-bottom: 2px">content</div>
<div style="margin-bottom: 5px">content</div>
<div>content</div>
Jeremy Sullivan
yes, <br /> is almost like goto :) Some smart browsers can ignore font-sizes smaller than 9px to prevent users' eyes damage. And spaces between elements must be discribed in CSS as spaces, not as text line-brakes.
Sergey Kovalenko
A: 

Chrome has a bug rendering low line-heights, you can track the issue here: http://code.google.com/p/chromium/issues/detail?id=40769

Rox