asked on

height 100% not working with doctype!!!! CSS ISSUE??? DOCTYPE ISSUE???

I have a small problem. I set a style of height=100% to my table so it will expand to fill the screen vertically depending on the users browser. If I dont set my doctype and just <HTML> it works perfectly but all of my css, divs, etc are "out of wack!"

If I set a doctype to XHTML trans. 1.01, my css styles are back to normal, but the height thing doesnt work!!!!!! WHAT CAN I DO????

THANKS

JUDSON

Mark Steggles

Hello judsonmusic,

You cannot use html height on a table

Use css instead

html, body {height:100%;padding:0;margin:0;}

table.mytable {height:100%;}

<table class="mytable"></table>

Regards,

Steggs

judsonmusic

ASKER

thats what I did. it only works if I dont use a DOCTYPE. but when I dont use a doctype all my other styles are unrecognized! WHY?

Mark Steggles

Can you post all the code?

judsonmusic

ASKER

<!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>
<link href="styles/all_styles.css" rel="stylesheet" type="text/css" />
</head>
<cfinclude template="header.cfm">
<cfinclude template="scripts/jscripts.html">

<body>
<table class="height100" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF" >
<tr>
<td height="20"> </td>
</tr>
<tr>
<td height="281" background="images/flashbox.jpg"><div class="flashbox">
<p>FLASH MOVIE WILL SIT HERE </p>
<p>FLASH MOVIE WILL SIT HERE </p>
<p>FLASH MOVIE WILL SIT HERE </p>
<p>FLASH MOVIE WILL SIT HERE </p>
<p>FLASH MOVIE WILL SIT HERE </p>
<p>FLASH MOVIE WILL SIT HERE </p>
<p>FLASH MOVIE WILL SIT HERE </p>
</div></td>
</tr>
<tr>
<td height="20"> </td>
</tr>
<tr>
<td height="109" background="images/portalboxes.jpg">
      <div class="portalboxes">Content for class "PORTAL" Goes Here
      <div class="gobox">
      <a href="#"><img src="images/btn_go.jpg" border="0"></a>      </div>
      </div>
      <div class="portalboxes">Content for class "PORTAL" Goes Here
      <div class="gobox">
      <a href="#"><img src="images/btn_go.jpg" border="0"></a>      </div>
      </div>
      <div class="portalboxes">Content for class "PORTAL" Goes Here
       <div class="gobox">
      <a href="#"><img src="images/btn_go.jpg" border="0"></a>      </div>
      </div>      </td>
</tr>
<tr>
<td height="20"> </td>
</tr>
</table>
</body>
</html>
<cfinclude template="footer.cfm">

this is my style sheet:

body {
      background-color:#999999;
      margin-left: 0px;
      margin-top: 0px;
      margin-right: 0px;
      margin-bottom: 0px;
      font-family: Arial, Helvetica, sans-serif;
      font-size:11px;
      color: #000000;
      background-image: url(../images/ppc_wrapper.jpg);
      background-repeat: repeat-y;
      background-position: center;

      }
.height100 {
      height: 100%;
}

.sublinks {
      height: 14px;
      width: 780px;
      font-family: Arial, Helvetica, sans-serif;
      font-size:11px;
      padding-left: 20px;
      color: #333333;
      font-weight: bold;
      }

.topcrumbs {
      height: 12px;
      width: 250px;
      position: relative;
      float: right;
      font-family: Arial, Helvetica, sans-serif;
      font-size:11px;
      color: #FFFFFF;
      text-align: right;
      font-weight: bold;
      padding-top: 2px;
}

.topcrumbs a{
      color:#FFFFFF;
      text-decoration:none;
      }

.topcrumbs a:hover{
      color:#FFFF99;
      text-decoration:none;
      }

.topcrumbs a:active{
      color:#FFFFFF;
      text-decoration:none;
      }

.sublinks a{
      color:#000000;
      text-decoration:none;
      }

.sublinks a:hover{
      color:#666666;
      text-decoration:none;
      }

.sublinks a:active{
      color:#AAE3FF;
      text-decoration:none;
      }


.table_center {
      height: 650px;
      width: 780px;
      align: center;
      font-family: Arial, Helvetica, sans-serif;
      font-size: 11px;
}
.boxinfo {
      width: 202px;
      left: 12px;
      position: relative;
      top: 40px;
      font-family: Arial, Helvetica, sans-serif;
      font-size: 11px;
      font-weight: bold;
}
.footer {
      font-size: 11px;
      font-family: Arial, Helvetica, sans-serif;
      color: #999999;
      text-align: center;
      vertical-align: middle;
      padding-top: 2px;
      padding-bottom: 2px;
      margin: 0px;
}
.gobox {
      height: 28px;
      width: 28px;
      float: right;
      position: relative;
      top: 20px;
      right: 0px;
}

.bottomcrumbs {
      padding: 11px;
      height: 20px;
}
.portalboxes {
      height: 69px;
      width: 200px;
      float: right;
      padding-top: 40px;
      padding-left: 30px;
      padding-right: 30px;
      position: relative;
}
.flashbox {
      height: 217px;
      width: 720px;
      padding-top: 52px;
      padding-left: 30px;
      padding-bottom: 12px;
      padding-right: 30px;
      vertical-align: middle;
      text-align: center;
}

Mark Steggles

As I said, you need html, body {height:100%;padding:0;margin:0;} in the stylesheet

judsonmusic

ASKER

and why would I apply that to the body tag????? Not the table?

Mark Steggles

what is the table 100% height of? the body

you need to set the body and html tags to 100% height of the screen

Mark Steggles

html, body {height:100%;padding:0;margin:0;}

table.mytable {height:100%;}

judsonmusic

ASKER

Let me tell you what I am trying to accomplish.

I would like the very bottom row of the table to expand the length of the page to fill the vertical gaps.

How can I do this?

Mark Steggles

That is another question, sorry but thats the guidelines

judsonmusic

ASKER

Ok, I submitted that question but before I accept this one, I need you to eplain this exaclty:

html, body {height:100%;padding:0;margin:0;}
///what does the "html, body" do as apposed to just "body" like I have???

table.mytable {height:100%;}
Why "table.mytable" why not just .mytable???

Why cant you just do:

.mytable {height:100%;}

and apply that class to the table???

ASKER CERTIFIED SOLUTION

Mark Steggles

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial