centering vertically

does anyone know how to place an image, for example, in the exact vertical center of a browser, regardless of whether the browser is resized or not...?

only as a background...
body { background: url(images/myimage.gif) no-repeat 50% 50%; }

alternatively you could place it in a table cell with the parameters valign="middle" ?

not x-browser. If you wanted it only to work for IE, then you could have a single-cell <s>ameoba</s> table with width="100%" height="100%".

i write in XHTML 1.0 Transitional and in XHTML there is no height attribute assigned to a <table> so it does not validate

Exactly. Stick to the CSS solution.

You would think there would be a way to do it by having a container set to 100 percent width and height specifying vertical and horizontal centered alignments..... but NO!!! Crappy support of CSS to implement this.

This actually is rather dissapointing.

__________________
Click the 'Thanks!' button if this post has helped you

Rob - Webforumz Founder

what can you do in CSS to accomplish this though?

Again, I'm forced to take the "who cares if it validates as long as all the browsers can see it the same?" route.

The differences between browsers and the limits of the specification are here and sometimes you can't fit both.

ok then.. i just like my code to validate, because im strange like that! and also, if they move from HTML to XHTML and it doesnt validate... it means changing what you've done

lol.. I find it soo funny that all of yall push CSS so hard, and 9/10 times CSS isn't supported. lol.. Why use something that doesn't work? I know that it's the politically correct way of doing things.. but heck.. I would much rather use a website that looked good and was awesome, than a website that looked lik total chaos and it say on the front, This website SHOULD look good, but your browser doesnt support my code... THink about it? It's not what's inside that matters, its just how good she looks. That's what is important about webdesign..

Also, on the changing point.. They are going to be changing the internet and computers constantly, in 5 years I doubt we will be using the same coding that we use today.. So you can't plan ahead when designing cause you never know what is coming next.

<blockquote id="quote"><font size="1" face="geneva, verdana, arial" id="quote">quote:<hr height="1" noshade id="quote">Originally posted by benbacardi

what can you do in CSS to accomplish this though?
<hr height="1" noshade id="quote"></blockquote id="quote"></font id="quote">read my first post in this thread.

CSS works fine, it's poor-quality code from both website <u>and</u> browsers that fails it.

If you're still designing web sites in terms of what you think looks 'awesome' and 'cool' then you've barely touched the surface of web design and development.

There's a few things XHTML strict/CSS just doesn't really do yet and vertical centering of a page is in some situations is one of them. (Setting a target for a link is another) There's some tricks that work in some browsers some of the time, but nothing that works as well as the old table tricks for centering a page. I've searched the web extensively and tried everything I found and yet I'm back to tables for centering a layout.

On a side note, even if your code is XHTML strict compliant I've found that it renders more consistently across browsers by using the transitional doctype. And I agree with Sirkent that results is more important than compliance - at least until the standard mature more.

Well, I too would have to agree with Sirkent....
However, we should all try CSS on a layout <font color="red">BEFORE</font id="red"> reverting to injecting loads of additional table code and other unneeded drivel, etc

As most of you know, Myself and D3mon got www.seacrofthotel.co.uk fully cross browser compatible (at least with windows browsers) using Strict XHTML 1.1 and CSS 2.0, so ya'll who are saying it is not properly supported, may just in fact not be trying hard enough.

There is usually a way with CSS to make everything work across browsers (except for a small portion of designs), and I for one and probabally D3mon too would much rather be helping you to sort out small issues now, than later when you decide all the benefits of CSS and compliant code outway the costs of old-hat design methods and you wanna re-work entire sites.

It can be done people.... it's happening all over the web. Open yer eyes if you are a non believer.

Just my $0.02 worth.

__________________
Click the 'Thanks!' button if this post has helped you

Rob - Webforumz Founder

The keywords being "windows browsers". I've had good success with Strict/CSS2 in that as well, other than the couple unsupported items that I sometimes need. But on Macs the design is totally hosed - even reverting to transitional there's still problems. So I'm slowly working backward from fully compliant code, adding tables as needed (not that it isn't compliant to use tables but still...)

I managed to center both vertically and horizontally in my website www.gwx.biz. Have a look at the code and stylesheet.

ok to be more precise... this is what you do.

enclose your CSS stuffs into a container <DIV> tag and in a stylesheet, define container as... use your own height, width properties. make sure its relative positioning and make sure the margin property is still there. text-align is to make it work on Netscape 6 I believe. ( although its for something totally diffrent, ts required in NS6 due to buggy standards )

.container {
position: relative;
height: 600px;
width: 955px;
margin: 0 auto;
text-align: left;
}

Next, enclose your <DIV> tags with tables and a <td> tag. Apply the following in your stylesheet.

table {
width: 100%;
height: 100%;
}

td {
vertical-align: middle;
text-align: center;
}