Solved

center table vertically **URGENT 500 POINTS**

Posted on 2006-06-12
7
283 Views
Last Modified: 2012-05-05
I have a table that should be centered vertically but it always shows up right below my top table. How can I fix it.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>The Specialists Pricetag Generator</title>
<link href="/css/stylesheet.css" rel="stylesheet" type="text/css" />
</head>

<body>
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
      <tr>
            <td valign="top">
                  <table width="100%" height="10px" border="0" cellpadding="8" cellspacing="0">
                        <tr>
                              <td bgcolor="#003A69" class="menu"><div align="left">Test1</div></td>
                              <td bgcolor="#003A69" class="menu"><div align="center">Test2</div></td>
                              <td bgcolor="#003A69" class="menu"><div align="right">Test3</div></td>
                        </tr>
                  </table>
            </td>
      </tr>
      <tr>
            <td align="center" valign="middle" height="100%">
                  <form action="/?action=tagSheet" method="post" name="choose_tag_type">
                        <table width="400px" border="1px" bordercolor="#CCCCCC" cellpadding="0" cellspacing="0">
                              <tr>
                                    <td height="30px" colspan="2">
                                          The Specialists Pricetag Generator
                                    </td>
                              </tr>
                              <tr>
                                    <td align="left">Tag Type:</td>
                                    <td align="left">
                                          <select name="tag_type" onchange="choose_tag_type.submit()">
                                                <option value="">--------------------</option>
                                                <option value="1">Normal Tag</option>
                                                <option value="2">Head Unit Tag</option>
                                          </select>
                                    </td>
                              </tr>
                        </table>
                  </form>
            </td>
      </tr>
</table>
</body>
</html>


Max
0
Comment
Question by:TheMaximumWeasel
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 2
  • 2
7 Comments
 
LVL 2

Accepted Solution

by:
bowen18 earned 500 total points
ID: 16888959
Your <DOCTYPE> tag is keeping it from working, as the way you've used relative height is invalid for xhtml.

Remove the following line:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

And change this line:
<html xmlns="http://www.w3.org/1999/xhtml">

to:
<html>

This page has a pretty good explanation of what's going on:
http://www.apptools.com/examples/tableheight.php
0
 
LVL 4

Author Comment

by:TheMaximumWeasel
ID: 16889181
Thanks

Max
0
 
LVL 4

Author Comment

by:TheMaximumWeasel
ID: 16889190
I knew it was invalid XHTML but I didn't realized that the browser ignores invalid stuff because it used to work then I would apply height with CSS.

Max
0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
LVL 30

Expert Comment

by:GrandSchtroumpf
ID: 16889644
>  Remove the following line:
>  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

What???  Your page MUST have a docytpe!!!

The dirty trick is to use this CSS (as in the link posted by bowen18):

   html,body{
      height:100%;
   }

But the only 100% correct solution is not to use any vertical centering...  and use some margin/padding instead.
0
 
LVL 2

Expert Comment

by:bowen18
ID: 16890175
> What???  Your page MUST have a docytpe!!!

A bit dramatic, eh?  To be valid and proper, yes, the page should have a doctype.  However, in this example, the page will display properly without it.
0
 
LVL 30

Expert Comment

by:GrandSchtroumpf
ID: 16890350
> A bit dramatic, eh?
Yes, a dramatic response to a dramatic advice :)
You gave the link to an article that explains the issue.
That's because relative heights are treated as "auto" when the container does not have an explicit height and that its "position" is not "absolute".
Using the "html,body{ height:100%; }" trick is not ideal, but it's much better than using quirks mode + invalid code.
0
 
LVL 4

Author Comment

by:TheMaximumWeasel
ID: 16915018
css didn't work either I just decided to not center it vertically.

Max
0

Featured Post

Secure Your WordPress Site: 5 Essential Approaches

WordPress is the web's most popular CMS, but its dominance also makes it a target for attackers. Our eBook will show you how to:

Prevent costly exploits of core and plugin vulnerabilities
Repel automated attacks
Lock down your dashboard, secure your code, and protect your users

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This is a PowerShell web interface I use to manage some task as a network administrator. Clicking an action button on the left frame will display a form in the middle frame to input some data in textboxes, process this data in PowerShell and display…
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

626 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question