Mixing pixel and em sizing to align images and text

[Greg Schmidt]

I'm wrestling with how to align images with text. The particular effect
I'm trying to achieve at the moment is to place a heading to the right of
an image, such that the image and text are vertically centred with each
other, regardless of how the user has their fonts set up(1).

See http://www.trawna.com/test/header1.html for some examples of what I've
tried. IE6/Win shows the second one how I want it, but Opera 7.23 and
Mozilla 1.0 don't like any of them. (Too bad we can't use mathematical
operators in CSS; I keep finding places where something resembling
{ margin-top:70px-0.5em; } would come in handy.)

I have a suspicion that the solution will be very simple, and I'll learn
something highly useful out of all this.

(1) A related problem will occur if the default font for h1 text makes it
taller than the image. Would { height:70px; min-height:1em; } be the
"right way" to solve this, and if so what browsers will it still break in?

--
Greg Schmidt gr***@trawna.co m
Trawna Publications http://www.trawna.com/

[Spartanicus]

Greg Schmidt <gr***@trawna.c om> wrote:

I'm wrestling with how to align images with text. The particular effect
I'm trying to achieve at the moment is to place a heading to the right of
an image, such that the image and text are vertically centred with each
other, regardless of how the user has their fonts set up(1).

img{vertical-align:middle}
h1{display:inli ne}

<img ...>
<h1>Header</h1>

--
Spartanicus

[Mark Tranchant]

Greg Schmidt wrote:

I'm wrestling with how to align images with text. The particular effect
I'm trying to achieve at the moment is to place a heading to the right of
an image, such that the image and text are vertically centred with each
other, regardless of how the user has their fonts set up(1).

Make the image a background of the text's block element, positioned at
0% 50%. Set that element's padding-left to include space for the image.
Adjust other properties such that the text is always vertically-centred
in the block.

This will fail if the containing element gets smaller than the image
height, of course.

It's the same technique I (and many others) use for the little external
link icon, although on the other side of the text. See
http://tranchant.plus.com/notes/cable-wrap for an example.

--
Mark.
http://tranchant.plus.com/

[Greg Schmidt]

On Mon, 05 Jul 2004 22:00:47 +0100, Spartanicus wrote:

Greg Schmidt <gr***@trawna.c om> wrote:

I'm wrestling with how to align images with text. The particular effect
I'm trying to achieve at the moment is to place a heading to the right of
an image, such that the image and text are vertically centred with each
other, regardless of how the user has their fonts set up(1).

img{vertical-align:middle}
h1{display:inli ne}

<img ...>
<h1>Header</h1>

Changing this to <h1><img ...>Header</h1> makes the vertical spacing a
little bit better on some browsers, plus it keeps the logo and the heading
on the same line (albeit not centred with each other) in NN4. The text is
a little bit high in IE5, but I can live with that.

This seems like the best so far. All five trials are still at
http://www.trawna.com/test/header1.html for anyone who wants to see what
I've tried, or make further suggestions.

--
Greg Schmidt gr***@trawna.co m
Trawna Publications http://www.trawna.com/

[Greg Schmidt]

On Tue, 06 Jul 2004 07:56:38 +0100, Mark Tranchant wrote:

Greg Schmidt wrote:

I'm wrestling with how to align images with text. The particular effect
I'm trying to achieve at the moment is to place a heading to the right of
an image, such that the image and text are vertically centred with each
other, regardless of how the user has their fonts set up(1).

Make the image a background of the text's block element, positioned at
0% 50%. Set that element's padding-left to include space for the image.
Adjust other properties such that the text is always vertically-centred
in the block.

This will fail if the containing element gets smaller than the image
height, of course.

It's the same technique I (and many others) use for the little external
link icon, although on the other side of the text. See
http://tranchant.plus.com/notes/cable-wrap for an example.

I got this to work pretty well in all modern browsers, but the logo is
completely lost in NN4, which isn't acceptable in this instance. I know
that NN4 is likely to end up rendering everything I do significantly
different from other browsers, and that's fine, but losing the corporate
logo is too high a price to pay.

It's an excellent strategy for your external links, particularly because
there is no extra HTML required, but in my situation I think that the logo
is more like content than presentation.

All five trials are still at http://www.trawna.com/test/header1.html for
anyone who wants to see what I've tried, or make further suggestions.

--
Greg Schmidt gr***@trawna.co m
Trawna Publications http://www.trawna.com/

[Spartanicus]

Greg Schmidt <gr***@trawna.c om> wrote:

plus it keeps the logo and the heading
on the same line (albeit not centred with each other) in NN4.

For future queries you might want to mention up front if something needs
to work in NS4 (if you don't we assume otherwise).

People who are aware of what CSS NS4 can and cannot handle are rapidly
becoming extinct (we have one in the local Zoo here, but there's a sign
on the fence saying that we're not allowed to feed him).

--
Spartanicus

[Greg Schmidt]

On Tue, 06 Jul 2004 22:45:57 +0100, Spartanicus wrote:

Greg Schmidt <gr***@trawna.c om> wrote:

plus it keeps the logo and the heading
on the same line (albeit not centred with each other) in NN4.
For future queries you might want to mention up front if something needs
to work in NS4 (if you don't we assume otherwise).

Well, there are different levels of "working". I don't believe that
everyone here has abandoned graceful degradation, but what may be
considered graceful depends greatly on the situation.

Mark's proposal works for him, because in his situation losing the image
can be considered graceful, but it didn't work for me because my situation
is different. (It's tucked away in the bag of tricks for when I do need
something like that.)

If your suggestion was the only way to get the effect I wanted and there
was no way to get it to work in NN4, then I'd accept that, but as it turns
out the minor modification that I made doesn't appear to break anything
plus it works better in NN4. You got me 95% of the way there, and I didn't
mean to sound like I was ungrateful or disappointed that I had to do the
last 5%; I was just adding what I had discovered for anyone else who finds
the information useful.
People who are aware of what CSS NS4 can and cannot handle are rapidly
becoming extinct (we have one in the local Zoo here, but there's a sign
on the fence saying that we're not allowed to feed him).

I long ago gave up any expectation that I would be able to get pages to
look the same in NN4 and, well, anything else. But I do still put some
small effort into making it look decent.

--
Greg Schmidt gr***@trawna.co m
Trawna Publications http://www.trawna.com/