vertical alignment of a <div>

[scott]

Hello,

I'm working on updating some of my table-based sites to use CSS instead of
tables. One of my sites has a header that is composed of three elements:

A B C

In my prior design, this was done using a table. A, B, and C were each
<tdelements.

My new design uses divs. There is a div for each of A, B, C, and a
container div. The divs for A, B, and C all use float:left to get them on
the same line. A and B contain images that are 75 pixels in height.

Now, the problem I'm faced with is that "C" is shorter than A and B, and
needs to be vertically centered with respect to A and B. In my old table-
version of the site, this was done with "valign: middle". However, this
doesn't work with CSS.

I tried something like the following, which I thought would work, but it
didn't:

<div style="height: 75px; float: left;">
<div style="margin-top: auto; margin-bottom: auto;">
C
</div>
</div>

Substituting the "auto" margins in my above example with "8px" achieves
the effect that I'm trying to get, but I'd rather have the centering done
automatically rather than me having to precompute the pixel values.

I've also tried sticking "vertical-align: middle" in various places to no
avail.

Thanks,
Scott

-----------------------------------------------------------
Posted using Android Newsgroup Downloader:
.... http://www.sb-software.com/android
-----------------------------------------------------------

[Spartanicus]

sc***@nospam.com wrote:

>I'm working on updating some of my table-based sites to use CSS instead of
tables. One of my sites has a header that is composed of three elements:

A B C

In my prior design, this was done using a table. A, B, and C were each
<tdelements.

My new design uses divs. There is a div for each of A, B, C, and a
container div. The divs for A, B, and C all use float:left to get them on
the same line. A and B contain images that are 75 pixels in height.

That doesn't tells us what we need to know. Provide an url to the table
based code so that we can see what you are actually trying to do.

--
Spartanicus

[scott]

That doesn't tells us what we need to know. Provide an url to the table

based code so that we can see what you are actually trying to do.

Here is a link:

http://smbaker.com/eugene_hikers_guide/test-07032006/

And here is an excerpt of the HTML:

<table><tr>
<td valign=middle><div id="header_logo"><span>Eugene, Oregon Hiker's Guide
</span></div></td>
<td valign=middle><div id="header_3tri"><span></span></div></td>
<td valign=middle>
<div id="header_title"><span class="title">Table of Contents</span></div>
<div id="header_subtitle"><span class="subtitle">List of all the hikes in
the guide.</span></div></div>
</td>
</tr>
</table>

Please note that I'm using an image-replacement technique for the first
two <tdelements. Although it's less straightforward than using the img
tags, I'm purposely doing it that way for the experimental/learning
benefit.

The point in question is the final <tdelement. The one that contains the
words "Table of Contents" and "List of all the...". In my table-based
solution, this element is vertically centered with respect to the others.

I can find no acceptable way to do this using CSS without the tables. The
best solution I've found is at:

http://www.jakpsatweb.cz/css/css-ver...-solution.html

It looks like that would work, but I'm troubled by the use of tricks that
cause different styles to be applied to IE than other browsers. Presumably
if microsoft ever fixes all of the bugs in IE, these tricks will no longer
work, right? and pages that rely on IE bugs to present correctly will be
broken?
-----------------------------------------------------------
Posted using Android Newsgroup Downloader:
.... http://www.sb-software.com/android
-----------------------------------------------------------

[Spartanicus]

sc***@nospam.com wrote:

>That doesn't tells us what we need to know. Provide an url to the table
based code so that we can see what you are actually trying to do.

Here is a link:

http://smbaker.com/eugene_hikers_guide/test-07032006/

That doesn't look like a table based design that you are trying to
replace. It looks like an attempt at non table code with a table thrown
in afterwards.

Assuming that http://www.sb-software.com/ is what you are actually
trying to emulate:

It should first be pointed out that this page suffers from much more
serious problems than the use of tables for layout purposes. These
problems need to be fixed first.

On the home page the logo image should be marked up as the <h1content,
alt content for the image should be provided minus the subtitle (i.e.
"SB-Software"). On sub pages the logo image is decorative and should be
coded as such. The "What's new" sub pages should for example have
"What's new" as the <h1content.

On the home page you should lose the "Welcome to SB-Software" masthead
text, "Welcome to" is patronising and pointless, the "SB-Software" text
is superfluous since it is already shown in the masthead image.

I see no reason why the three triangles should not be part of the logo
image. Btw, using jpeg for computer generated images like the logo
causes unnecessary artifacts. An indexed Png or Gif is a better choice
here.

That reduces the masthead to a logo image with slogan text to be
displayed to the right of it. Set the display property of the <h1and
the slogan text to "inline" and that should be your masthead sorted:
http://homepage.ntlworld.ie/spartanicus/sb-software.htm

--
Spartanicus

[scott]

That doesn't look like a table based design that you are trying to

replace. It looks like an attempt at non table code with a table thrown
in afterwards.

Yes, you're right, it was my attempt at the non-table version (thus all the
divs), with the table thrown back in to make it look right.

I see no reason why the three triangles should not be part of the logo
image. Btw, using jpeg for computer generated images like the logo
causes unnecessary artifacts. An indexed Png or Gif is a better choice
here.

Good point about merging those images. The three triangles were a bit of an
afterthought -- something needed to seperate the logo from the title text.

That reduces the masthead to a logo image with slogan text to be
displayed to the right of it. Set the display property of the <h1and
the slogan text to "inline" and that should be your masthead sorted:
http://homepage.ntlworld.ie/spartanicus/sb-software.htm

What I'm still looking for is two lines of text alongside the logo. Your point
about the "Welcome to..." text is well-taken, but on the remainder of my site I
do like to insert a more useful, large point, page title in that area, with a
small blurb below it.

So, at this point we've simplified things, but my original technical question
remains -- how to get the two lines of text vertically centered with respect to
the logo image.

Scott

-----------------------------------------------------------
Posted using Android Newsgroup Downloader:
.... http://www.sb-software.com/android
-----------------------------------------------------------

[Spartanicus]

sc***@nospam.com wrote:

>http://homepage.ntlworld.ie/spartanicus/sb-software.htm

What I'm still looking for is two lines of text alongside the logo. Your point
about the "Welcome to..." text is well-taken, but on the remainder of my site I
do like to insert a more useful, large point, page title in that area, with a
small blurb below it.

So, at this point we've simplified things, but my original technical question
remains -- how to get the two lines of text vertically centered with respect to
the logo image.

http://homepage.ntlworld.ie/spartani...-software2.htm

--
Spartanicus

[David]

Spartanicus wrote:

sc***@nospam.com wrote:

>>http://homepage.ntlworld.ie/spartanicus/sb-software.htm

What I'm still looking for is two lines of text alongside the logo. Your point
about the "Welcome to..." text is well-taken, but on the remainder of my site I
do like to insert a more useful, large point, page title in that area, with a
small blurb below it.

So, at this point we've simplified things, but my original technical question
remains -- how to get the two lines of text vertically centered with respect to
the logo image.

http://homepage.ntlworld.ie/spartani...-software2.htm

Well that looks ok in IE but it doesn't look the same in FireFox v 1.5.0.4

[Spartanicus]

David <yo*******@findmoore.netwrote:

>http://homepage.ntlworld.ie/spartani...-software2.htm

Well that looks ok in IE but it doesn't look the same in FireFox v 1.5.0.4

Get a browser that supports CSS2.1, or IE.

--
Spartanicus

[David]

Spartanicus wrote:

David <yo*******@findmoore.netwrote:

>>http://homepage.ntlworld.ie/spartani...-software2.htm

Well that looks ok in IE but it doesn't look the same in FireFox v 1.5.0.4

Get a browser that supports CSS2.1, or IE.

Why in Gods name would I want to have a bug infected browser such as IE
? Also for your information Firefox 1.5.0.4 does support css2.1 better
than IE supports it

According to webdevout FireFox preforms better that IE6 and IE7 both for
css2.1

http://www.snipit.info?u=39005
Just some food for thought.

[Rob Hick]

i had a quick google around because I was having similar difficulties
with vertically centring and found this on the W3.org site:

http://www.w3.org/Style/Examples/007/center.html

Down at the bottom is a bit about vertical centring, which apparently
isn't directly supported yet (it may be in CSS3) but you can get around
it by using

display: table-cell

- check out the example at the link.

[David]

Rob Hick wrote:

i had a quick google around because I was having similar difficulties
with vertically centring and found this on the W3.org site:

http://www.w3.org/Style/Examples/007/center.html

Down at the bottom is a bit about vertical centring, which apparently
isn't directly supported yet (it may be in CSS3) but you can get around
it by using

display: table-cell

- check out the example at the link.

Thanks I will have a look at it.

[Spartanicus]

David <yo*******@findmoore.netwrote:

>Spartanicus wrote:

>David <yo*******@findmoore.netwrote:

>>>http://homepage.ntlworld.ie/spartani...-software2.htm

Well that looks ok in IE but it doesn't look the same in FireFox v 1.5.0.4

Get a browser that supports CSS2.1, or IE.

Why in Gods name would I want to have a bug infected browser such as IE
?

By "Get a browser that supports CSS2.1" I was referring to any modern
browser (Opera, Safari, Konqueror, iCab) except Gecko based browsers.
All the aforementioned browsers support the CSS2.1 construct used. Even
the otherwise dreadful IE supports it.

The glaring exceptions are Gecko based browsers (Mozilla, Firefox). For
a long time Gecko has been unable or unwilling to support certain CSS2.0
and 2.1 values for the display property (inline-table, run-in,
inline-block) and certain other CSS methods.

I'm willing to make allowances for IE's poor CSS support, in the same
way as I would make allowances for a moronic brother. I'm not willing to
make such allowances for Gecko as the people who created it do not have
the defense of being mentally retarded, they've made their bed by not
supporting certain CSS 2.0/2.1 constructs and can lie in it.

--
Spartanicus

[David]

Spartanicus wrote:

David <yo*******@findmoore.netwrote:

>Spartanicus wrote:

>>David <yo*******@findmoore.netwrote:

http://homepage.ntlworld.ie/spartani...-software2.htm
>
Well that looks ok in IE but it doesn't look the same in FireFox v 1.5.0.4
Get a browser that supports CSS2.1, or IE.

Why in Gods name would I want to have a bug infected browser such as IE
?

By "Get a browser that supports CSS2.1" I was referring to any modern
browser (Opera, Safari, Konqueror, iCab) except Gecko based browsers.
All the aforementioned browsers support the CSS2.1 construct used. Even
the otherwise dreadful IE supports it.

I have both Opera and Konqueror and have looked at the page within both
of the aforementioned browsers and it renders different in Konqueror
than in IE or Opera.

>
The glaring exceptions are Gecko based browsers (Mozilla, Firefox). For
a long time Gecko has been unable or unwilling to support certain CSS2.0
and 2.1 values for the display property (inline-table, run-in,
inline-block) and certain other CSS methods.

And you can also say the very same thing about IE. So what is your point?

>
I'm willing to make allowances for IE's poor CSS support, in the same
way as I would make allowances for a moronic brother. I'm not willing to
make such allowances for Gecko as the people who created it do not have
the defense of being mentally retarded, they've made their bed by not
supporting certain CSS 2.0/2.1 constructs and can lie in it.

According to webdevout FireFox preforms better that IE6 and IE7 both for
css2.1
http://www.snipit.info?u=39005

--
"One World, one web, one program" - Microsoft Promo ad.
"Ein Volk, Ein Reich, Ein Fuhrer" - Adolf Hitler

[scott]

Down at the bottom is a bit about vertical centring, which apparently

isn't directly supported yet (it may be in CSS3) but you can get around
it by using

display: table-cell

What browser are you running? I don't think IE supports "display: table-
cell". Works fine in firefox though.

There's a page at http://www.student.oulu.fi/~laurirai/www/css/middle/
with about a half dozen different vertical centering examples.
Unfortunately, most of them don't work with IE.
-----------------------------------------------------------
Posted using Android Newsgroup Downloader:
.... http://www.sb-software.com/android
-----------------------------------------------------------

[scott]

By "Get a browser that supports CSS2.1" I was referring to any modern

browser (Opera, Safari, Konqueror, iCab) except Gecko based browsers.

Unfortunately, I think the whole discussion about picking a browser is
moot. We, as designers, have no choice as to what browser our users will
be running.

I don't know what kind of crazy standard CSS is that the browser
developers have decided to pick and choose what parts of the standard they
want to implement and what parts they want to ignore. At the very least if
the manufacturers are going to ignore parts of the spec, there should be
some conditional mechanism within the CSS spec to specify what parts are
not supported. Of course, that would probably be one of the parts they
would choose not to implement. :)

-----------------------------------------------------------
Posted using Android Newsgroup Downloader:
.... http://www.sb-software.com/android
-----------------------------------------------------------

[Spartanicus]

sc***@nospam.com wrote:

>By "Get a browser that supports CSS2.1" I was referring to any modern
browser (Opera, Safari, Konqueror, iCab) except Gecko based browsers.

Unfortunately, I think the whole discussion about picking a browser is
moot. We, as designers, have no choice as to what browser our users will
be running.

The advice was intended for David, not "users".

CSS correctly used is optional by design, nothing essential will change
if a user browses the construct using a Gecko based browser. Only a
presentational detail will change slightly. An author who considers that
a problem hasn't understood the web and CSS.

--
Spartanicus