asked on

Adding a doc type changes table length :S

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>

Open in new window

DT20Three

Hey again...
You got rid of the style code stating to make html and body height 100%.

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

Member_2_5230414

ASKER

I do that and it makes it really really long and not screen length

DT20Three

what do you mean really really long...? What browser are you using?

One thing you need is to have colspan="3" in your copyright td. You have used 3 columns in the first row and only 1 column in the second so you need to tell it that it spans 3.

<td colspan="3" align = "center" height = "20px" bgcolor = "#777d6a"> Copyright © </td>

Open in new window

Member_2_5230414

ASKER

Ok added it all

maybe its best i show you what it does..

http://www.runningprofiles.com

username: demo
password:demo

then you will see

DT20Three

You actually par-fixed it while I was looking at it. :D

You'll want to fix the JS greeting by the way. You have day<<11 and day<<18 which just needs the < removing.

The reason you cant do it successfully is because you have "height: 100%" in your border class which is controlling the footer and the same in the menu class which is controlling the side bars.

Add the following in <head> and you will see what I mean. You only want to assign heights inside elements that are already at the heights. Because the top <td> is top, the full window is it's 100% reference, whereas anything inside <td> will (should) reference the <td> for it's 100% reference.

Hope that helps somewhat! Cheers

<style type="text/css">
	html, body {height: 100%; margin: 0; padding: 0;}
	.menu, .border {height: auto;}
</style>

Open in new window

ASKER CERTIFIED SOLUTION

john-formby

membership

This solution is only available to members.

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

Start Free Trial

john-formby

Also, you have 3 validation errors in that page. To correct, you just need to change these lines:

<SCRIPT LANGUAGE="JavaScript" SRC="image.js">
</SCRIPT>

to:

<script type="text/javascript" src="image.js">
</script>

John

Member_2_5230414

ASKER

You did it again pal lol

jarratt@runningprofiles.com - email me you email addy so if i have any questions i think u can answer i will nofity you :)

Member_2_5230414

ASKER

Hey john , its not working on IE.

I have come to work and the page is displayed funny

http://www.runningprofiles.com/

username:demo
Password: demo

Have alook on IE

DT20Three

Its because of what I said in my previous post - its to do with your border and menu classes referencing height: 100%.

john-formby

Hi,

You have height: 100% in your border class in login.css. Remove this line and then try.

Thanks,

John

Member_2_5230414

ASKER

ok the header also streches whith the page...anyway i can prevent this??

Member_2_5230414

ASKER

Im taking it that its due to the whole body fit... any way i can make the header table not part of it and just fit the size of the logo?

Member_2_5230414

ASKER

https://www.experts-exchange.com/questions/25153702/Help-with-page-layout.html?fromWizard=true - added the question here to reward the answer as just thought its not fair asking the question on a closed one :)