centering text in box vertical |
centering text in box vertical |
SteelPanther |
Mar 1 2010, 04:54 PM
Post
#1
|
Group: Members Posts: 8 Joined: 1-March 10 Member No.: 11,249 |
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
Post
#2
|
Group: Members Posts: 4 Joined: 1-March 10 Member No.: 11,250 |
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
Post
#3
|
Group: Members Posts: 8 Joined: 1-March 10 Member No.: 11,249 |
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
Post
#4
|
WDG Member Group: Root Admin Posts: 8,365 Joined: 4-August 06 From: Mountain View, CA Member No.: 3 |
Please see the FAQ entry How do I center a table?
|
SteelPanther |
Mar 1 2010, 07:22 PM
Post
#5
|
Group: Members Posts: 8 Joined: 1-March 10 Member No.: 11,249 |
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
Post
#6
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,731 Joined: 9-August 06 Member No.: 6 |
Do you use a doctype? If not, you need to.
http://hsivonen.iki.fi/doctype/ |
Darin McGrew |
Mar 1 2010, 08:42 PM
Post
#7
|
WDG Member Group: Root Admin Posts: 8,365 Joined: 4-August 06 From: Mountain View, CA Member No.: 3 |
Specifying "height: 100%" for the html, body, and table elements seems to help.
|
SteelPanther |
Mar 2 2010, 04:05 PM
Post
#8
|
Group: Members Posts: 8 Joined: 1-March 10 Member No.: 11,249 |
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
Post
#9
|
WDG Member Group: Root Admin Posts: 8,365 Joined: 4-August 06 From: Mountain View, CA Member No.: 3 |
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
Post
#10
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,731 Joined: 9-August 06 Member No.: 6 |
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
Post
#11
|
Group: Members Posts: 8 Joined: 1-March 10 Member No.: 11,249 |
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
Post
#12
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,731 Joined: 9-August 06 Member No.: 6 |
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.
|
Lo-Fi Version | Time is now: 26th April 2024 - 08:57 AM |