Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

center table vertically **URGENT 500 POINTS**

Posted on 2006-06-12
7
Medium Priority
?
285 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 2000 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
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
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

Important Lessons on Recovering from Petya

In their most recent webinar, Skyport Systems explores ways to isolate and protect critical databases to keep the core of your company safe from harm.

Question has a verified solution.

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

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
This article discusses four methods for overlaying images in a container on a web page
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

670 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