Centering Table & Picture

I have a page with nothing but a table. The table is set to be a 100% of the screen both vertical and horizontal.
<table width="100%" height="100%" border="0" align="center" cellpadding="0" cellspacing="0">

But when I run this the table expands to the full screen horizontally but not vertically. Do I have to do something else for this work?

Also, in the center cell of the table I have a picture. I would like that this picture stretch/shrink to fill available space. The picture is very large, so there should be no problem of resolution. But I don't see where I can set this for the picture.

Can someone guide me on this.
Tammak1Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Jason C. LevineNo oneCommented:
Hi Tammak1,

You can't do <table width=100% height=100%>...most browsers won't recognize the height.  Use CSS instead:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>

<style type="text/css">
<!--
#fullheight{height:100%}
-->
</style>
</head>

<body>
<table border="0" cellpadding="2" cellspacing="0" id="fullheight">
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>
</body>
</html>
0
Tammak1Author Commented:
I entered
#fullheight{height:100%}

and my table tag is now this:
<table  border="0" align="center" cellpadding="2" cellspacing="0" id="fullheight">

but no change. Both in FF 2 and IE 7.

I noticed that I have this line
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
which is a little different from what you wrote, is this a problem?

Also, what about have the picture stretch/shrink?
0
Jason C. LevineNo oneCommented:
Post your code...
0
Cloud Class® Course: Python 3 Fundamentals

This course will teach participants about installing and configuring Python, syntax, importing, statements, types, strings, booleans, files, lists, tuples, comprehensions, functions, and classes.

Tammak1Author Commented:
<!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>Untitled Document</title>
<style type="text/css">
<!--
body,td,th {
      font-family: Verdana, Arial, Helvetica, sans-serif;
      font-size: 14px;
      color: #5A6C7A;
}


}
.hh {
      height: 100%;
      width: 100%;
}

#fullheight{height:100%}

-->
</style>
</head>

<body>
<table  border="0" align="center" cellpadding="2" cellspacing="0" id="fullheight">

  <tr>
    <td valign="top"><div align="left">top left </div></td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>
            <div align="center" >
            <b class="hoverText">Galya Rice <br />
            Sep 8, 2006 </b></div>
      </td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td valign="top"><div align="right"><a href="http://public.fotki.com/sun365/galya/">Gallary </a></div></td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td colspan="5" rowspan="4" align="center" valign="middle">

        <div  align="center"><img src="Images/_DSC9841_web.jpg" alt="Galya" class="hh" />

      </div>
      </td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td valign="bottom"><div align="right">bottom right </div></td>
  </tr>
</table>
</body>
</html>
0
Jason C. LevineNo oneCommented:
Change your CSS to the following:

<style type="text/css">
<!--
html, body,td,th {
      font-family: Verdana, Arial, Helvetica, sans-serif;
      font-size: 14px;
      color: #5A6C7A;
        height: 100%;
}


.hh {
      height: 100%;
      width: 100%;
}

#fullheight {height:100%;}

-->
</style>

The height of the HTML and body elements also has to be set to 100% before the table will stretch.  I forgot that part.

To make the image stretch too, you can change #fullheight id to a class:


.fullheight {height:100%;}

and do this:

<table  border="0" align="center" cellpadding="2" cellspacing="0" class="fullheight">

and

<img src="Images/_DSC9841_web.jpg" alt="Galya" class="fullheight" />

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

You're using XHTML transitional and I normally use strict.  That wasn't causing the issue.


0
Tammak1Author Commented:
Bellow is my code after the changes. In design mode now it shows everything stretched to full screen. But when I run it now it does not even stretch the table width to full screen. Perhaps I didn't change the code fully correct?


<!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>Untitled Document</title>
<style type="text/css">
<!--
body,td,th {
      font-family: Verdana, Arial, Helvetica, sans-serif;
      font-size: 14px;
      color: #5A6C7A;
       height: 100%;
}



.hh {
      height: 100%;
      width: 100%;
}

.fullheight{height:100%}

-->
</style>
</head>

<body>
<!--<table  border="0" align="center" cellpadding="2" cellspacing="0" id="fullheight">-->
<table  border="0" align="center" cellpadding="2" cellspacing="0" class="fullheight">
  <tr>
    <td valign="top"><div align="left">top left </div></td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>
            <div align="center" >
            <b class="hoverText">Galya Rice <br />
            Sep 8, 2006 </b></div>
      </td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td valign="top"><div align="right"><a href="http://public.fotki.com/sun365/galya/">Gallary </a></div></td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td colspan="5" rowspan="4" align="center" valign="middle">

        <div  align="center">
<!--        <img src="Images/_DSC9841_web.jpg" alt="Galya" class="hh" />-->
<img src="Images/_DSC9841_web.jpg" alt="Galya" class="fullheight" />
      </div>
      </td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td valign="bottom"><div align="right">bottom right </div></td>
  </tr>
</table>
</body>
</html>
0
pmagonyCommented:
You're missing width="100%":

<table  border="0" align="center" cellpadding="2" cellspacing="0" class="fullheight" width="100%">
0
Tammak1Author Commented:
Now the width of the Table works! It stretches to fit the screen.
But -
The table hight does not, nor does the picture stretch at all.
0
Jason C. LevineNo oneCommented:
You didn't read my style additions correctly:

<!--
body,td,th {

Should be

<!--
html,body,td,th {

The addition of the html element to the style is critical.
0
Tammak1Author Commented:
ok. This now -

In FF expands the table both width and height to fit the screen! But the picture remains the same size, about a 1/4 of the screen.

In IE7 expands the picture to fit the screen but expands the top and bottom of the table to about five times the screen size  (need to scroll to even see the top of the picture)
0
Jason C. LevineNo oneCommented:
You may need to remove the td and th from the initial style.  I didn't test extensively with your code:

<style type="text/css">
<!--
html, body {
      font-family: Verdana, Arial, Helvetica, sans-serif;
      font-size: 14px;
      color: #5A6C7A;
        height: 100%;
}

td,th {
      font-family: Verdana, Arial, Helvetica, sans-serif;
      font-size: 14px;
      color: #5A6C7A;
}

.hh {
      height: 100%;
      width: 100%;
}

#fullheight {height:100%;}

-->
</style>
0
Jason C. LevineNo oneCommented:
As far as the image goes, did you read and understand my earlier comment about changing the fullheight id to a CSS class and using it on both the table and img elements?
0
Tammak1Author Commented:
when I change the code to what you gave me - splitting it to two sections, it goes back to way it behaved before - no full screen for table or anything.

About the picture and the fullheight id - I had done that, but now revisiting it I realized that only the height was set to 100% and now I added the Width and this fixed the picture significantly (about 90%) in FF, but in IE it's the same - picture expands somewhat, table expands to width filling the screen but hight to about 5 times the screen.
0
Jason C. LevineNo oneCommented:
Okay, repost the code as it stands currently and let me test.
0
Tammak1Author Commented:
<!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>Untitled Document</title>
<style type="text/css">
<!--
html, body,td,th {
      font-family: Verdana, Arial, Helvetica, sans-serif;
      font-size: 14px;
      color: #5A6C7A;
       height: 100%;
}

'html, body {
'      font-family: Verdana, Arial, Helvetica, sans-serif;
'      font-size: 14px;
'      color: #5A6C7A;
'        height: 100%;
'}
'
'td,th {
'      font-family: Verdana, Arial, Helvetica, sans-serif;
'      font-size: 14px;
'      color: #5A6C7A;
'}

.hh {
      height: 100%;
      width: 100%;
}

.fullheight{
      height:100%;
      width: 100%;
}
.style1 {font-size: 12px}

-->
</style>
</head>

<body>
<!--<table  border="0" align="center" cellpadding="2" cellspacing="0" id="fullheight">-->
<table  border="0" align="center" cellpadding="0" cellspacing="0" class="fullheight" width="100%">
  <tr>
    <td valign="top">
            <div align="left">top left </div></td>
    <td colspan="5" rowspan="5">

        <div  align="center">
  <!--        <img src="Images/_DSC9841_web.jpg" alt="Galya" class="hh" />-->
  <img src="Images/_DSC9841_web.jpg" alt="Galya" class="fullheight" />      </div></td>
    <td align="right" valign="top"><div align="right" class="style1"><a href="http://public.fotki.com/sun365/galya/">Gallary </a></div></td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td valign="bottom"><div align="right">bottom right </div></td>
  </tr>
</table>
</body>
</html>
0
Jason C. LevineNo oneCommented:
Okay, try the following code.  What's going on the CSS box model may be supported oddly by IE (FireFox appears to handle it okay).  You might need to add the fullheight class to each element of the table down to the image.

This code appears correct in FF and IE 6 (sorry, no IE 7 at work):

<!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>Untitled Document</title>
<style type="text/css">
<!--

html, body {
      font-family: Verdana, Arial, Helvetica, sans-serif;
      font-size: 14px;
      color: #5A6C7A;
        height: 100%;
}

td,th {
      font-family: Verdana, Arial, Helvetica, sans-serif;
      font-size: 14px;
      color: #5A6C7A;
}

.hh {
      height: 100%;
      width: 100%;
}

.fullheight{
      height:100%;
      width: 100%;
}
.style1 {font-size: 12px}

-->
</style>
</head>

<body>
<!--<table  border="0" align="center" cellpadding="2" cellspacing="0" id="fullheight">-->
<table  border="0" align="center" cellpadding="0" cellspacing="0" class="fullheight" width="100%">
  <tr class="fullheight">
    <td valign="top">
            <div align="left">top left </div></td>
    <td colspan="5" rowspan="5">

        <div  align="center" class="fullheight">
  <!--        <img src="Images/_DSC9841_web.jpg" alt="Galya" class="hh" />-->
  <img src="Images/_DSC9841_web.jpg" alt="Galya" class="fullheight" />      </div></td>
    <td align="right" valign="top"><div align="right" class="style1"><a href="http://public.fotki.com/sun365/galya/">Gallary </a></div></td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td valign="bottom"><div align="right">bottom right </div></td>
  </tr>
</table>
</body>
</html>
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Tammak1Author Commented:
This certainly helps, and after I put in some more fullheight class even in IE7 it performed better. But it seems that the right and left cells/can't be shrunk to only the size of the actual text contained in them.
Do you think that I would be better off just using css w/o table? can this be done in css?
0
Jason C. LevineNo oneCommented:
>> Do you think that I would be better off just using css w/o table? can this be done in css?

Possibly, but if you Google for "CSS 100% height" you will see a ton of articles regarding inconsistent IE support for this element.  Using divs instead of a table will certainly help but you may never get it to look exactly how you want it with the current CSS support in IE.
0
Tammak1Author Commented:
I hear you. I am very new to this, I didn't realize that there was inconsistent support for css, especially in the new generation browsers. Would you redesign page or would you use a different technology (flash?), and if the latter what would that be?
0
Jason C. LevineNo oneCommented:
Well, since I hate (HATE HATE) sites designed in Flash, I would be more likely to attempt to use a pure CSS design to achieve the effect.  The CSS box model (which is what is causing all the issues) works better with divs than tables.  I tend to specify a pixel height for elements and just forget about a liquid solution to the height problem...
0
Tammak1Author Commented:
Thank you very much, you have taught me a lot here. I was under false assumptions that all modern browsers handled css 100% and were consistent.

0
Jason C. LevineNo oneCommented:
You're welcome
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Adobe Dreamweaver

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.