HTMLHelp Forums > centering text in box vertical

SteelPanther

Mar 1 2010, 04:54 PM

Hi, I'm trying to center text in a box horizontal and vertical.

I got it in most browsers, but ran into a strange thing with IE 8

When I test my programming by viewing the file from my computer it comes out good, but when I put the page (exact same) online it's not centered vertically (again, only with IE 8, all other browsers have no problem).
It's weird to flip back and forth between tabs in the same browser seeing different results for the same programming (in the same browser!)

Any solutions to do it differently?

Thanks!

Online it looks like this: http://members.cox.net/denheyer/evlvd/test.html

The programming is

<head>

<title>test</title>
</head>

<body>

<TABLE BORDER=0 BACKGROUND="http://www.neurosoftware.ro/programming-blog/wp-content/plugins/wp-o-matic/cache/b4f47_06.jpg" CELLPADDING=0

CELLSPACING=0><TR><TD HEIGHT=60 WIDTH=450 VALIGN="CENTER"><CENTER><H2>TEST</H2></CENTER></TD></TR></TABLE>

</body>
</html>

Acid_1

Mar 1 2010, 06:01 PM

QUOTE(SteelPanther @ Mar 1 2010, 03:54 PM)

Hi, I'm trying to center text in a box horizontal and vertical.

I got it in most browsers, but ran into a strange thing with IE 8

When I test my programming by viewing the file from my computer it comes out good, but when I put the page (exact same) online it's not centered vertically (again, only with IE 8, all other browsers have no problem).
It's weird to flip back and forth between tabs in the same browser seeing different results for the same programming (in the same browser!)

Any solutions to do it differently?

Thanks!

Online it looks like this: http://members.cox.net/denheyer/evlvd/test.html

The programming is

<head>

<title>test</title>
</head>

<body>

<TABLE BORDER=0 BACKGROUND="http://www.neurosoftware.ro/programming-blog/wp-content/plugins/wp-o-matic/cache/b4f47_06.jpg" CELLPADDING=0

CELLSPACING=0><TR><TD HEIGHT=60 WIDTH=450 VALIGN="CENTER"><CENTER><H2>TEST</H2></CENTER></TD></TR></TABLE>

</body>
</html>

<head>

<title>test</title>
</head>
<body>

<TABLE BORDER=0 BACKGROUND="http://www.neurosoftware.ro/programming-blog/wp-content/plugins/wp-o-matic/cache/b4f47_06.jpg" CELLPADDING=0 CELLSPACING=0>
<TR>
<TD HEIGHT=60 WIDTH=450 VALIGN="CENTER">
<p align="center"><H2>TEST</H2></p>
</TD>
</TR>
</TABLE>

</body>
</html>

Change it from <CENTER></CENTER> to <p align="center"></p>

SteelPanther

Mar 1 2010, 06:30 PM

Just uploaded that, still doesn't center vertically in IE 8.06

http://members.cox.net/denheyer/evlvd/test.html

Darin McGrew

Mar 1 2010, 06:53 PM

Please see the FAQ entry How do I center a table?

SteelPanther

Mar 1 2010, 07:22 PM

Darin, in that entire FAQ and the links provided in it I still can't find a way to center it vertically for IE 8.06

pandy

Mar 1 2010, 07:45 PM

Do you use a doctype? If not, you need to.
http://hsivonen.iki.fi/doctype/

Darin McGrew

Mar 1 2010, 08:42 PM

Specifying "height: 100%" for the html, body, and table elements seems to help.

SteelPanther

Mar 2 2010, 04:05 PM

Yes, I use a doctype:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

The HEIGHT=100% did not change anything, so let me try this differently.

Can anybody make a box by using a table, script, whatever, where there is a background image and text that is in the center horizontal AND vertical in IE 8?
Dimensions and content are not important.

I would love to see the programming for that.

Thanks

Darin McGrew

Mar 2 2010, 04:52 PM

QUOTE

The HEIGHT=100% did not change anything, so let me try this differently.

I didn't say height="100%" (HTML). I said "height: 100%" (CSS).

Anyway, I don't have access to MSIE 8, but the techniques I've mentioned work for the browsers I do have access to.

pandy

Mar 2 2010, 05:14 PM

It's valign="middle", not valign="center". Align uses center, valign uses middle. It's there to trick you.

http://htmlhelp.com/reference/html40/tables/td.html

SteelPanther

Mar 3 2010, 03:36 AM

Ha! Figured it out!
It was the <H2> </H2> around the text within the table that screwed it up.

<FONT SIZE=+2><B>TEST</B></FONT> got the job done just fine without any VALIGN.

Thanks guys

pandy

Mar 5 2010, 08:58 PM

That's because valign="middle" is the default. <h2 style="margin=0"> would have gotten you there too. In case the text is really intended to be a heading.