Re: Line spacing of SMALL text in a table

Swifty wrote:

Samples: http://swiftys.org.uk/small.html
http://swiftys.org.uk/small_strict.html

Load small.html and place something so that you can see where "Line
ten" is placed, vertically.

Now load small_strict.html
You should find that "Line ten" has moved down a little. The fonts
seem the same, so perhaps it is the line spacing of the text.

What browser?

With firefox every line in the second example is about half as high again as
in the first.

rf wrote:

Swifty wrote:
Samples: http://swiftys.org.uk/small.html
http://swiftys.org.uk/small_strict.html

What browser?

With firefox every line in the second example is about half as high again as
in the first.

I develop in Opera (10Beta as it happens) then verify in Firefox (3.0.6
IIRC) then finally test in IE6 (corporate requirement; it doesn't have
to look good, but it does have to work).

Actually, the presentation is identical in IE6. So there's my
solution... I'll use IE6 in future.

What controls line spacing? The fonts used are identical (within each
browser)/

--
Steve Swift
http://www.swiftys.org.uk/swifty.html
http://www.ringers.org.uk

In article <aIKdnWqAZ6xV0gDUnZ2dnUVZ8vWWnZ2d (AT) brightview (DOT) com>,
Swifty <steve.j.swift (AT) gmail (DOT) com> wrote:

rf wrote:
Swifty wrote:
Samples: http://swiftys.org.uk/small.html
http://swiftys.org.uk/small_strict.html

What browser?

With firefox every line in the second example is about half as high again
as
in the first.

I develop in Opera (10Beta as it happens) then verify in Firefox (3.0.6
IIRC) then finally test in IE6 (corporate requirement; it doesn't have
to look good, but it does have to work).

Actually, the presentation is identical in IE6. So there's my
solution... I'll use IE6 in future.

What controls line spacing? The fonts used are identical (within each
browser)/

Differences in line-height, perhaps?
See CSS2 spec section 10.8.1 - Leading and half-leading

On Thu, 19 Feb 2009, Swifty wrote:

What controls line spacing?

line-height
http://www.htmlhelp.com/reference/css/text/line-height.html

--
In memoriam Alan J. Flavell
http://www.alanflavell.org.uk/

David Stone wrote:

Differences in line-height, perhaps?

Line-height fixes the problem (all I was after) thanks (and also to
Andreas - two matching suggestions persuaded me to try it immediately).

It is two steps forward (Opera and Firefox) and one step backwards (IE6)
because setting like-height:100% fixes both Opera and Firefox, but makes
the IE6 lines closer together than before.

No problem though, as long as I can fit four lines in the height of the
GIF in the adjacent cell. I realise that I'm probably up against the
impossible for people with minimum font sizes defined (like me), but I
can live with that, if they can.

And for the author of the anonymous email suggesting that I balance my
tags first (I'd forgotten the trailing </SMALL>), I've got $10 that says
it wouldn't have made any material difference.

--
Steve Swift
http://www.swiftys.org.uk/swifty.html
http://www.ringers.org.uk

And for the author of the anonymous email suggesting that I balance my
tags first (I'd forgotten the trailing </SMALL>), I've got $10 that says
it wouldn't have made any material difference.

I also said:

I suggest that you start with a valid html document instead of a fragment

http://validator.w3.org/check?uri=+http%3A%2F%2Fswiftys.org.uk%2Fsmall_str ict.html
http://www.htmlhelp.com/cgi-bin/validate.cgi?url=http%3A%2F%2Fswiftys.org.uk%2Fsma ll_strict.html&warnings=yes

Browsers may do whatever they like with invalid document as things are not
defined.

In article <0tednagcL96MBADUnZ2dnUVZ8qLinZ2d (AT) brightview (DOT) com>,
Swifty <steve.j.swift (AT) gmail (DOT) com> wrote:

David Stone wrote:
Differences in line-height, perhaps?

Line-height fixes the problem (all I was after) thanks (and also to
Andreas - two matching suggestions persuaded me to try it immediately).

It is two steps forward (Opera and Firefox) and one step backwards (IE6)
because setting like-height:100% fixes both Opera and Firefox, but makes
the IE6 lines closer together than before.

Are Opera/Firefox using the exact same font and size as IE6? (Somehow
I doubt it, unless you set them explicitly and all three are running on
the same computer!)

And, does it matter terribly?

No problem though, as long as I can fit four lines in the height of the
GIF in the adjacent cell. I realise that I'm probably up against the
impossible for people with minimum font sizes defined (like me), but I
can live with that, if they can.

Does it matter if the GIF doesn't completely fill the height of this
adjacent cell? If not, I think you have it covered even for people
with minimum font sizes defined (like us!)

David Stone wrote:

Does it matter if the GIF doesn't completely fill the height of this
adjacent cell? If not, I think you have it covered even for people
with minimum font sizes defined (like us!)

The layout is: Banner GIF on the left, with some page specific details
on the right, up to four lines of small text. This all in a table.

Immediately below this is an H1 with the title of the page.

When the four lines of text are deeper than the GIF, a extra gap opens
up between the bottom of the GIF and the top of the H1, and this looks
decidedly odd. What is worse is that the separation between the GIF and
the H1 varies as you navigate around the site, and hit some pages with
four lines of text in the header, and some with three.
Very disconcerting.

Setting the line-height to 100% fixes it for both Opera and Firefox, and
slightly over-compensates in IE6. I've tried my pages at every
conceivable font size, and they look good under all conditions. I
couldn't ask for more. And trust me; I would ask.

--
Steve Swift
http://www.swiftys.org.uk/swifty.html
http://www.ringers.org.uk

In article <yb-dndf7genPJgDUnZ2dnUVZ8qGdnZ2d (AT) brightview (DOT) com>,
Swifty <steve.j.swift (AT) gmail (DOT) com> wrote:

Setting the line-height to 100% fixes it for both Opera and Firefox, and
slightly over-compensates in IE6. I've tried my pages at every
conceivable font size, and they look good under all conditions.

As long as you are happy. Sounded mildly interesting your problem, but
it would be good to see a page that shows the context of the problem.
Are you sure you need the units on the line-height? Will this unit have
no poor consequence in your context later on? Will you rue the day you
used it? In general, unless there is a special reason, it is safer not
to use units with line-height.

--
dorayme

On 2009-02-19, Swifty <steve.j.swift (AT) gmail (DOT) com> wrote:

David Stone wrote:
Differences in line-height, perhaps?

Line-height fixes the problem (all I was after) thanks (and also to
Andreas - two matching suggestions persuaded me to try it immediately).

It is two steps forward (Opera and Firefox) and one step backwards (IE6)
because setting like-height:100% fixes both Opera and Firefox, but makes
the IE6 lines closer together than before.

Use line-height: 1 rather than line-height: 100%.

They mean almost the same, except when inheritance is involved. If you
inherit 100% you get 100% of the font size of the element you inherited
it from, not 100% of your own font size. This is weird and I can't
imagine what you would ever want, so just use 1.

The default for line-height is "normal" which is usually based on a
value built into the particular font. It usually works out as about 1.1
or 1.2 x font-size, but depends on both the browser and the font.