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

x
?
Solved

XHTML compliant table formatting

Posted on 2006-07-18
6
Medium Priority
?
648 Views
Last Modified: 2013-12-16
Experts, I'm doing some development in XHTML, and have come across a problem with setting tables to be 100% the width and height of the page.

Basically, I've found a way to set the table to fit the size of the page, but the top row of the table will not set to 40px height.  Also, in the bottom row, the Iframe isn't rendering on the page (if I remove the height and width attributes it renders fine, but doesn't expand to fit the table cell).

How can I achieve the above, but still keep my page XHTML compliant?

The code from my page is below.

Many thanks!

////////////////////////////////////////////////////////////////////////////////////////////

<!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>
      <title>Test</title>
</head>
<body style="height: 100%; width: 100%; margin: 0px;">

      <table style="width: 100%; height: 100%;" cellpadding="0" cellspacing="0" border="1">
            <tr style="height: 40px;">
                  <td valign="top" style="height: 40px;">
                        Top Row
                  </td>
            </tr>
            <tr>
                  <td>
                        Bottom Row
                        <iframe id="ifrArticle" width="100%" height="100%" frameborder="yes" src="http://www.google.com"></iframe>
                  </td>
            </tr>
      </table>
</body>
</html>

////////////////////////////////////////////////////////////////////////////////////////////
0
Comment
Question by:SamDorling
[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
6 Comments
 
LVL 18

Assisted Solution

by:Eternal_Student
Eternal_Student earned 600 total points
ID: 17128452
I found a script that will enable this .... try this:


<!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>
     <title>Test</title>
       <script language="JavaScript">
            <!--
            function resize_iframe()
            {
              //resize the iframe according to the size of the
              //window (all these should be on the same line)
              document.getElementById("ifrArticle").style.height=
                  parseInt(document.body.clientHeight-
                  document.getElementById("ifrArticle").offsetTop-8)+"px";
            }
            
            // this will resize the iframe every
            // time you change the size of the window.
            window.onresize=resize_iframe;
            
            //Instead of using this you can use:
            //      <BODY onresize="resize_iframe()">
            
            
            //-->
      </script>

      
</head>
<body style="height: 100%; width: 100%; margin: 0px;">

     <table style="width: 100%; height: 100%;" cellpadding="0" cellspacing="0" border="1">
          <tr style="height: 40px;">
               <td valign="top" style="height: 40px;">
                    Top Row
               </td>
          </tr>
          <tr>
               <td>
                    Bottom Row
                    <iframe id="ifrArticle" width="100%" onload='resize_iframe()' frameborder="yes" src="http://www.google.com"></iframe>
               </td>
          </tr>
     </table>
</body>
</html>
0
 
LVL 1

Author Comment

by:SamDorling
ID: 17128515
Thanks for the comment Eternal_Student, however I was hoping to find a solution that didn't involve having to use JavaScript to set the height of rows - is there no way of doing what I want to achieve just via HTML, but keeping it XHTML compliant?

Thanks!
0
 
LVL 1

Assisted Solution

by:dharmeshmaniar
dharmeshmaniar earned 300 total points
ID: 17137163
try following:

<!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>
     <title>Test</title>
</head>
<body style="height: 100%; width: 100%; margin: 0px;">

     <table style="width: 100%; height: 100%;" cellpadding="0" cellspacing="0" border="1">
          <tr style="height: 40px;">
               <td valign="top" style="height: 40px;">
                    Top Row
               </td>
          </tr>
          <tr>
               <td style="width: 100%; height: 100%;">
                    Bottom Row
                    <iframe id="ifrArticle" width="100%" height="100%" frameborder="yes" src="http://www.google.com"></iframe>
               </td>
          </tr>
     </table>
</body>
</html>

/////////////////////////////////////////////////////

Apply 100% height and width on the other <td> so the first row will take 40px and the other will occupy the left space.
0
The top UI technologies you need to be aware of

An important part of the job as a front-end developer is to stay up to date and in contact with new tools, trends and workflows. That’s why you cannot miss this upcoming webinar to explore the latest trends in UI technologies!

 
LVL 1

Author Comment

by:SamDorling
ID: 17137301
Thanks dharmeshmaniar, we're getting there, however the page is now 100% height plus 40 extra pixels (i.e. there's a scroll bar on the page, and the iframe goes off the bottom of the page by 40 pixels, presumably due to setting the bottom cell to be 100% height).

How can I get the iframe to fit the bottom cell, but not go off the bottom of the page?

Thanks!
0
 
LVL 5

Accepted Solution

by:
zeroxp earned 600 total points
ID: 17151776
in xhtml, a page has default width but no default height. so you cannt inherit height from it using percentage height.
a div or table must inherit height from an absolute value.
so you could either set a pixel height in the container table:
<!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>
<title>Test</title>
</head>
<body>
<table style="width: 100%; height:555px;" cellpadding="0" cellspacing="0" border="1">
   <tr>
   <td style="vertical-align:top; width:100%; height:10%;">Top Row</td>
   </tr>
   <tr>
   <td style="width:100%; height:89%;">
   <iframe id="ifrArticle" width="100%" height="100%" frameborder="1" src="http://www.google.com"></iframe>
   </td>
   </tr>
</table>
</body>
</html>

or dont give height in the table and set absolute height for each row.
0
 
LVL 5

Expert Comment

by:zeroxp
ID: 17322332
a work around with min-height for mozilla, (ie renders in another manner anyway, so it will be full height)

<!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>
<title>Test</title>
<style type="text/css">
html {height: 100%;}

body {min-height: 95%; margin: 0; padding: 0; height:100%;}

* html body {height:100%;}
</style>
</head>
<body>
<table style="width:100%; height:100%;" cellpadding="0" cellspacing="0" border="1">
   <tr>
   <td style="vertical-align:top; width:100%; height:10%;">Top Row</td>
   </tr>
   <tr>
   <td style="width:100%; height:89%;">
   <iframe id="ifrArticle" width="100%" height="100%" frameborder="1" src="http://www.google.com"></iframe>
   </td>
   </tr>
</table>
</body>
</html>
0

Featured Post

Plesk WordPress Toolkit

Plesk's WordPress Toolkit allows server administrators, resellers and customers to manage their WordPress instances, enabling a variety of development workflows for WordPress admins of all skill levels, from beginners to pros.

See why 2/3 of Plesk servers use it.

Question has a verified solution.

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

Originally, this post was published on Monitis Blog, you can check it here . Websites are getting bigger and more complicated by the day. Video, images and custom fonts are all great for showcasing your product or service. But the price to pay in…
Without even knowing it, most of us are using web applications on a daily basis.  In fact, Gmail and Yahoo email, Twitter, Facebook, and eBay are used by most of us daily—and they are web applications. We generally confuse these web applications to…
The purpose of this video is to demonstrate how to add AdSense Ads to a WordPress Website, and how to set up WordPress to automatically place Ads in Sidebars. This will be demonstrated using a Windows 8 PC. Log into your AdSense account. : Cli…
The purpose of this video is to demonstrate how to Import and export files in WordPress. This will be demonstrated using a Windows 8 PC. Go to your WordPress login page. This will look like the following: mywebsite.com/wp-login.php : Click on Too…

715 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