vertically center an image on the left of a column with multiple rows?

[TJ]

I'd like to do this:

------------------
|-------------
XX |-------------
|-------------
------------------

This is a navigation header with an icon. Each row will have text.

Issue:
If there is fixed size text in those rows, then when the user "enlarges" the
text using his browser, that I'd like the image to become recentered
between the top and bottom line

I'll post my sample in a few hours...

Thanks,

[TJ]

Significant notes:
1. I plan to have the icon file be determined by the user (the icon
corresponds to the page that the user is on)... so a simple background
image, I think, will not exactly be correct the way I understand it.

??

[brucie]

in post: <news:8r*******************@twister.socal.rr.com >
TJ <[e-mail]> said:

I'd like to do this:

------------------
|-------------
XX |-------------
|-------------
------------------

#content{display:table;}
#imagethingy{width:100px;vertical-align:middle;display:table-cell;}

<div id="content">
<div id="imagethingy"><img 100px...></div>
</div>

not supported by IE

--
b r u c i e

[Mark Tranchant]

TJ wrote:

I'd like to do this:

------------------
|-------------
XX |-------------
|-------------
------------------

This is a navigation header with an icon. Each row will have text.

Issue:
If there is fixed size text in those rows, then when the user "enlarges" the
text using his browser, that I'd like the image to become recentered
between the top and bottom line

Like on of these?
http://tranchant.plus.com/tmp/navicon

--
Mark.

[Matt]

TJ wrote:

Significant notes:
1. I plan to have the icon file be determined by the user (the icon
corresponds to the page that the user is on)... so a simple background
image, I think, will not exactly be correct the way I understand it.

If you use different id attributes for different pages, and vary the
background for each id. The example given:
<http://tranchant.plus.com/tmp/navicon> uses this:

..blah {
background-image: url(/computing/graphics/images/pixels);
background-position: 0% 50%;
background-repeat: no-repeat;
}

<div class="blah">
<p>Lorem ipsum...</p>
</div>

Instead, use this:

<div class="blah" id="home">
<p>Lorem ipsum...</p>
</div>

<div class="blah id="products">
<p>Lorem ipsum...</p>
</div>

..blah {
background-image: url(/computing/graphics/images/pixels); /*the default,
if no id is specified */
background-position: 0% 50%;
background-repeat: no-repeat;
}

#home {
background-image: url(elsewhere);
}

#products {
background-image: url(etc);
}

--
Matt
-----= Posted via Newsfeeds.Com, Uncensored Usenet News =-----
http://www.newsfeeds.com - The #1 Newsgroup Service in the World!
-----== Over 100,000 Newsgroups - 19 Different Servers! =-----

[TJ]

Fantastic!
--
TJ

[TJ]

Thats it!

--
TJ

[PeterMcC]

TJ wrote in
<eg*****************@twister.socal.rr.com>

Thats it!

No, it's not.

--
PeterMcC
If you feel that any of the above is incorrect,
inappropriate or offensive in any way,
please ignore it and accept my apologies.

[Matt]

PeterMcC wrote:

TJ wrote in
<eg*****************@twister.socal.rr.com>

Thats it!

No, it's not.

Did I make a mistake?

--
Matt
-----= Posted via Newsfeeds.Com, Uncensored Usenet News =-----
http://www.newsfeeds.com - The #1 Newsgroup Service in the World!
-----== Over 100,000 Newsgroups - 19 Different Servers! =-----