PDA

View Full Version : Adding a doc type changes table length :S



runnerjp
Feb 17th, 2010, 03:54 PM
ok this is strange...
so the code below works great! shows everything the size of the screen perfect.

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

to the code and it shortens the tables to not 100% !!



<?php
ob_start();

session_start();
require_once '../settings.php';
checkLogin('1 2');
include "../info.php"; // sets username/id ect
include "../getuser.php"; // records user view on page
?>

<html xmlns = "http://www.w3.org/1999/xhtml" lang = "en" xml:lang = "en">

<head>

<title>Home - RunningProfiles</title>

<link rel = "shortcut icon" href = "rp.ico"/>

<link rel = "icon" type = "image/ico" href = "rp.ico"/>

<link rel = "stylesheet" type = "text/css" href = "http://www.runningprofiles.com/css/login.css"/>

<link rel = "stylesheet" type = "text/css" href = "http://www.runningprofiles.com/members/include/style.css"/>

<style type = "text/css">
<!--
body {
margin-left: 1px;
margin-top: 1px;
margin-right: 1px;
margin-bottom: 1px;
}
-->
</style>
<SCRIPT LANGUAGE="JavaScript" SRC="image.js">
</SCRIPT>
</head>

<body onload = "MM_preloadImages('http://www.runningprofiles.com/images/editprofile2.jpg','http://www.runningprofiles.com/images/home2.jpg'">

<table width="100%" style="height: 100%;">
<tr>

<!-- ============ HEADER SECTION ============== -->
<td colspan="3" style="height: 100px;" bgcolor="#777d6a"><?php
include ('../header.php');
?> </td></tr>




<tr>
<!-- ============ LEFT COLUMN (MENU) ============== -->
<td width="10%" class = "menu" align ="center" valign="top" bgcolor = "#CAD9D9">
<p><a href = "http://www.runningprofiles.com/members" onmouseout = "MM_swapImgRestore()"
onmouseover = "MM_swapImage('home','','http://www.runningprofiles.com/images/home.jpg',1)">

<img src = "http://www.runningprofiles.com/images/home2.jpg" alt = "Home" name = "home" width = "93"
height = "82" border = "0"/></a></p>

<p><a href = "index.php?page=update"
onmouseout = "MM_swapImgRestore()"
onmouseover = "MM_swapImage('editprofile','','http://www.runningprofiles.com/images/editprofile2.jpg',1)">

<img src = "http://www.runningprofiles.com/images/editprofile.jpg" alt = "edit profile"
name = "editprofile" border = "0"
id = "editprofile"/></a></p>

<p><a href = "http://www.runningprofiles.com/logout.php">Logout</a></p>

<p>
<?php
if ($id == 1)
{
echo '<a href="http://www.runningprofiles.com/members/index.php?page=admin">Admin</a>';
}
?></p>

<p><a href = "index.php?page=mainforums">Forum</a> </p>

<p><a href = "index.php?page=inbox">

<?php
$user =get_username($_SESSION['user_id']);
$query ="SELECT * FROM messages WHERE reciever = '$user' AND recieved = '0';";
$result =mysql_query($query);
$no_of_msgs=mysql_num_rows($result);

if ($no_of_msgs != 0)
{
$data=mysql_fetch_assoc($result);
echo "Inbox($no_of_msgs)";
}
else
{
print "Inbox";
}
?></a> </p>
</td>

<!-- ============ MIDDLE COLUMN (CONTENT) ============== -->
<td width="80%" valign="top">

</td>
<!-- ============ RIGHT COLUMN (MENU) ============== -->
<td width="10%" class = "menu" valign="top" bgcolor = "#CAD9D9">

<?php
include ('include/newposts.php');
?>

</td>

</tr>

<!-- ============ FOOTER SECTION ============== -->
<tr><td colspan="3" align="center" height="5" bgcolor="#777d6a">Copyright </td></tr>
</table>
</body>
</html>

drhowarddrfine
Feb 17th, 2010, 04:05 PM
Doctypes are the first thing that goes on the web page, never the last. Doctypes are the set of rules you are telling the browser you are following. Add or change the doctype and you are changing the rules.

Without a doctype you are in 'quirks mode' and it's 1998 all over again. New web pages have no use for the transitional doctype and new web pages should always be created with strict.

runnerjp
Feb 17th, 2010, 04:08 PM
Ok so what do i need to chnage to make the table length 100% with the doc type

drhowarddrfine
Feb 17th, 2010, 04:14 PM
When you set the height:100%, it's 100% of what? In this case, the body element. So set the body element to height:100% but 100% of what? <html> So set html{height:100%}

abduraooft
Feb 17th, 2010, 04:16 PM
What's the point in adding a valid DOCTYPE for a totally invalid document?

runnerjp
Feb 17th, 2010, 04:21 PM
Well i have been validating the code and it is all valid in html validator.



<!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" lang = "en" xml:lang = "en">

<head>

<title>Home - RunningProfiles</title>

<link rel = "shortcut icon" href = "rp.ico"/>

<link rel = "icon" type = "image/ico" href = "rp.ico"/>

<link rel = "stylesheet" type = "text/css" href = "http://www.runningprofiles.com/css/login.css"/>

<link rel = "stylesheet" type = "text/css" href = "http://www.runningprofiles.com/members/include/style.css"/>



</head>

<body onload = "MM_preloadImages('http://www.runningprofiles.com/images/editprofile2.jpg','http://www.runningprofiles.com/images/home2.jpg'">
<table width="100%" style="height: 100%;">
<tr>

<!-- ============ HEADER SECTION ============== -->
<td colspan="3" style="height: 100px;" bgcolor="#777d6a"><table width="100%" bgcolor="#99b3b4" class="sample">
<tr>
<td width="10%" height="1" align="center" valign="middle" bgcolor="#000000"></td>
<td width="80%" align="center" valign="middle" bgcolor="#000000"></td>
<td width="10%" align="center" valign="middle" bgcolor="#000000"></td>
</tr>
<tr>
<td height="85" align="center" valign="middle" bgcolor="#99b3b4">&nbsp;</td>
<td width="80%" align="center" valign="middle" bgcolor="#99b3b4"><img src="http://www.runningprofiles.com/images/logo.jpg" alt="RunningProfiles" align="middle"/></td>
<td width="10%" align="center" valign="middle" bgcolor="#99b3b4">&nbsp;</td>
</tr>
<tr>
<td height="1" align="center" valign="middle" bgcolor="#000000"></td>
<td height="1" align="center" valign="middle" bgcolor="#000000"></td>
<td height="1" align="center" valign="middle" bgcolor="#000000"></td>
</tr>
</table>

</td></tr>




<tr>
<!-- ============ LEFT COLUMN (MENU) ============== -->
<td width="10%" class = "menu" align ="center" valign="top" bgcolor = "#CAD9D9">
<br />
<p><a href = "http://www.runningprofiles.com/members" onmouseout = "MM_swapImgRestore()"
onmouseover = "MM_swapImage('home','','http://www.runningprofiles.com/images/home.jpg',1)">

<img src = "http://www.runningprofiles.com/images/home2.jpg" alt = "Home" name = "home" width = "93"
height = "82" border = "0"/></a></p>

<p><a href = "index.php?page=update"
onmouseout = "MM_swapImgRestore()"
onmouseover = "MM_swapImage('editprofile','','http://www.runningprofiles.com/images/editprofile2.jpg',1)">

<img src = "http://www.runningprofiles.com/images/editprofile.jpg" alt = "edit profile"
name = "editprofile" border = "0"
id = "editprofile"/></a></p>

<p><a href = "http://www.runningprofiles.com/logout.php">Logout</a></p>

<p>
<a href="http://www.runningprofiles.com/members/index.php?page=admin">Admin</a></p>

<p><a href = "index.php?page=mainforums">Forum</a> </p>

<p><a href = "index.php?page=inbox">

Inbox</a> </p>
</td>

<!-- ============ MIDDLE COLUMN (CONTENT) ============== -->
<td width="80%" valign="top">

</td>
<!-- ============ RIGHT COLUMN (MENU) ============== -->
<td width="10%" class = "menu" valign="top" bgcolor = "#CAD9D9">
<br />


<table width="98%" class="loggedin" >
<tr>
<td>



<table width="100%">
<tr>
<td bgcolor="#ffffff">
<center> <b><u>Forum</u></b> </center>
</td>
</tr>


<tr bgcolor="#C7D6D6">
<td>
<center><a class="links" href="http://www.runningprofiles.com/members/index.php?page=message&amp;forum=QA&amp;id=569&amp;pagenum=last">test2</a></center>
</td>
</tr>

<tr bgcolor="#99b3b4">
<td>
<center><a class="links" href="http://www.runningprofiles.com/members/index.php?page=message&amp;forum=General&amp;id=563&amp;pagenum=last">Humour is an act of defiance; that we must laugh at our helplessness against the forces of nature, or go insane.</a></center>
</td>
</tr>

<tr bgcolor="#C7D6D6">
<td>
<center><a class="links" href="http://www.runningprofiles.com/members/index.php?page=message&amp;forum=races&amp;id=566&amp;pagenum=last">test</a></center>
</td>
</tr>
</table>


</td>
</tr>
</table>



</td>

</tr>

<!-- ============ FOOTER SECTION ============== -->
<tr><td colspan="3" align="center" class="border" height="5" >Copyright </td></tr>
</table>
</body>
</html>




but im not sure how to make the menu tables and the middle colume fit 100% screen??