Printable Version of Topic
Click here to view this topic in its original format
HTMLHelp Forums _ Markup (HTML, XHTML, XML) _ centering text in box vertical
Posted by: 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>
Posted by: Acid_1 Mar 1 2010, 06:01 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>
Posted by: 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
Posted by: Darin McGrew Mar 1 2010, 06:53 PM
Please see the FAQ entry http://www.htmlhelp.com/faq/html/tables.html#center-table
Posted by: 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
Posted by: pandy Mar 1 2010, 07:45 PM
Do you use a doctype? If not, you need to.
http://hsivonen.iki.fi/doctype/
Posted by: Darin McGrew Mar 1 2010, 08:42 PM
Specifying "height: 100%" for the html, body, and table elements seems to help.
Posted by: 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
Posted by: Darin McGrew Mar 2 2010, 04:52 PM
Anyway, I don't have access to MSIE 8, but the techniques I've mentioned work for the browsers I do have access to.
Posted by: 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
Posted by: 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
Posted by: 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.
Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)