The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> centering text in box vertical
SteelPanther
post 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>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Acid_1
post Mar 1 2010, 06:01 PM
Post #2





Group: Members
Posts: 4
Joined: 1-March 10
Member No.: 11,250



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>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
SteelPanther
post 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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Darin McGrew
post 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?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
SteelPanther
post 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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Mar 1 2010, 07:45 PM
Post #6


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



Do you use a doctype? If not, you need to.
http://hsivonen.iki.fi/doctype/
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Darin McGrew
post 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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
SteelPanther
post 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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Darin McGrew
post 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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Mar 2 2010, 05:14 PM
Post #10


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
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. happy.gif

http://htmlhelp.com/reference/html40/tables/td.html
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
SteelPanther
post 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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Mar 5 2010, 08:58 PM
Post #12


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 29th March 2024 - 02:45 AM