Link to home
Start Free TrialLog in
Avatar of syedasimmeesaq
syedasimmeesaqFlag for United States of America

asked on

CSS problem. The table goes way down than the block

I have a problem
In this section of my CSS
.post_top {
      background:url('images/content_top.gif') no-repeat;
      width:533px;
      height:31px;
}

.post_btm {
      background:url('images/content_btm.gif') no-repeat;
      width:533px;
      height:31px;
      
}

when I enter the post and the post is longer than it doesn't keep the style intact and my footer goes up while my posts go all the way down. How can I adjust it so that the style keeps intact and doesn't matter how long a post is.

Thanks
Avatar of syedasimmeesaq
syedasimmeesaq
Flag of United States of America image

ASKER

Also here is the complete code for my css. In case you guys need it.
Thanks

XXXXXXXXXXXXXXXXXXXXXXXXXXXXXx

* {
   padding:0;
   margin:0;
}

html, body {
      height: 100%;
}

body {
      text-align: left;
      margin:0 auto;
      padding:0;
      color:#000;
      font-style:normal;
      font-variant:normal;
      font-weight:normal;
      font-size:10px;
      font-family:Verdana, Tahoma, Arial, sans-serif;
      background:#fff;
      background:#f0f6df;
}

#page {
      width:810px;
      margin:0 auto;
      height:100%;
}

#header {
      width:810px;
      height:120px;
      margin: 0 auto;
      background: url('images/header.gif') no-repeat;
      padding:0px;

}

#content {
      padding:5px 20px 0 20px;
      background:url('images/content_bg.gif') repeat-y;
      height:100%;
}

/**************************** menu ****************************/

#nav_top {
      background:url('images/nav_top.gif') no-repeat;
      width:225px;
      height:28px;
}

#nav_btm {
      background:url('images/nav_btm.gif') no-repeat;
      width:225px;
      height:28px;
}

#menu {
      float:left;
      width: 225px;
      color:#000;
      background:url('images/nav_mid.gif') repeat-y;
}

#menu ul {
      list-style:none;
      width:218px;
      font-size:12px;
      padding:0 0 0 3px;
}      

#menu li {
      list-style-type: none;
      background:transparent url('images/bullet.gif') no-repeat 12px 6px;
      margin-bottom:4px;
      border-bottom:1px solid #c8e5c7;
      padding:0;
}

#menu li:hover {
      background:#c8e5c7;
      margin-bottom:4px;
}

#menu a {
      display:block;
      padding:0 0 0 20px;
      color:#fff;
      text-decoration: none;
      background:f0f6df;
}      
      
#menu a:hover {
      display:block;
      padding:0 0 0 20px;
      color:#333;
      text-decoration: none;
      background:fff;
}      

/**************************** content ****************************/

#info {
      float:right;
      background:url('images/content_mid.gif') repeat-y;
      width:533px;
}

.post_top {
      background:url('images/content_top.gif') no-repeat;
      width:533px;
      height:31px;
}

.post_btm {
      background:url('images/content_btm.gif') no-repeat;
      width:533px;
      height:31px;
      
}

.post {
      padding:0 0 15px 25px;
}

img {
      border:1px solid #fff;
      padding:5px;
      margin:3px;

}

a{
      color:#fff;
      text-decoration:none;
}

a:hover{
      color:#000;
      text-decoration:none;
}

h1{
      color:#fff;
      font-weight:normal;
      font-size:20px;
      padding: 40px 0 10px 40px;
}

h2 a{
      position:absolute;
      top:32px;
      color:#666;
      font-size:16px;
      margin:0 0 0 575px;
      text-decoration:none;
}

h2 a:hover{
      color:#999;
}

h3{
      color:#fff;
      font-size:12px;
      font-weight:bold;
      padding: 5px 0 5px 10px
}

h4{
      color:#fff;
      font-size:20px;
      font-weight:normal;
}

h5{
      color:#8d8d8d;
      font-size:10px;
      font-weight:normal;
      padding:5px;
}

h3 img{
      float:left;
}

/**************************** lists ****************************/

ul {
      list-style:none;
      padding:0 0 0 3px;
}      

li {
      list-style-type: none;
      background:transparent url('images/bullet.gif') no-repeat 12px 6px;
      padding: 0 0 0 20px;
}

#menu a {
      display:block;
      padding:0 0 0 20px;
      color:#fff;
      text-decoration: none;
      background:f0f6df;
}      
      
#menu a:hover {
      display:block;
      padding:0 0 0 20px;
      color:#333;
      text-decoration: none;
      background:fff;
}      


/**************************** footer ****************************/

#footer{
      text-align:center;
      padding:40px;
      background:url('images/bottom.gif') no-repeat;
      height:42px;
}

#footer a {
      color:#000;
}

#footer a:hover {
      color:#fff;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
Avatar of Mark Steggles
Hey,

I have no idea what you are talking about... can you post a link to the page or some html aswell

Cheers
Steggs
Steggs
I will have to make another non secure page for you to see. I will do it this evening.
Thanks
cant u post the html for the page?
do you need this. The idex page thats generated through the css

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html>

      <head>

            <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

            <meta name="title" content="Develop Daly" />

            <meta name="robots" content="index,follow" />

            
            
            <link rel="stylesheet" type="text/css" href="style.css" media="screen,projection" />
            
            
            <title>ABC</title>
            
      </head>

      <body>
      
            <div id="page">
      
                  <div id="header">
            
                        <?php include('header.php'); ?>
            
                  </div>
                  
                  <div id="content">
      
                        <div id="menu">
                <div id="nav_top"></div>
                        <?php include('leftbar.php'); ?>
                        <div id="nav_btm"></div>      
                              </div>
                        <div id="info">
                        
                              <div class="post_top"></div>
                        
                              <div class="post">
                   
                        <?php include('posttop.php'); ?>
                              </div>
                              
                              <div class="post_btm"></div>
                              
                              <div class="post_top"></div>
                              
                              <div class="post">
                        
                              <?php include('postbtm.php'); ?>      
                        
                              </div>
                              
                              <div class="post_btm"></div>
                              
                        </div>
      
                  </div>
                  
                  <div id="footer">
                  
                        <?php include('footer.php'); ?>
                  
                  </div>
           
            </div>
       
               
      </body>

</html>
Hey mate,

ok you just need to clear your floats, add this p tag after your float

<div id="menu">
                <div id="nav_top"></div>
                        <?php include('leftbar.php'); ?>
                        <div id="nav_btm"></div>      
                              </div>

                        <div id="info">
                       
                              <div class="post_top">post top</div>
                       
                              <div class="post">
                   
                        <?php include('posttop.php'); ?>
                              </div>
                             
                              <div class="post_btm"></div>
                             
                              <div class="post_top">post top</div>
                             
                              <div class="post">
                       
                              <?php include('postbtm.php'); ?>      
                       
                              </div>
                             
                              <div class="post_btm"></div>
                             
                        </div>
      <p style="clear:both;margin:0;padding:0;line-height:1px;height:1px"></p>  <!----------------------
                  </div>
I tried that. That didn't help.
could it be because I have table inside.
Thanks
No that should work... try adding overflow:auto to div#content.

That adds a scroll bar..which fits ok but I didn't want the scroll bar.
Thanks
Here is the page I am having problems with

<?php

// Start the login session
session_start();


if (!$_SESSION['user'] || !$_SESSION['pass']) {

// What to do if the user hasn't logged in
// We'll just redirect them to the login page.
header('Location: ../../index.php');
die();

} else {
?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html>

      <head>

            <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />


            <meta name="robots" content="index,follow" />

            
            
            <link rel="stylesheet" type="text/css" href="../../style.css" media="screen,projection" />
            

            <title>EXP</title>
            
      </head>

      <body>
      
            <div id="page">
      
                  <div id="header">
            
                        <?php include('../../header.php'); ?>
            
                  </div>
                  
                  <div id="content">
      
                        <div id="menu">
                <div id="nav_top"></div>
                        <?php include('../../leftbar.php'); ?>
                        <div id="nav_btm"></div>      
                              </div>
                        <div id="info">
                        
                              <div class="post_top"></div>
                        
                              <div class="post">
                   
<center>
<table width="370" border="2" bordercolor="#588CC8">
  <tr>
    <td width="113"><div align="center">ID</div></td>
    <td width="132"><div align="center"></div></td>
    <td width="101"><div align="center">View</div></td>
  </tr>
  <tr>
    <td><div align="center">
      <table cellspacing="0" cellpadding="0">
        <tr>
          <td height="18" width="64">34</td>
          </tr>
      </table>
    </div></td>
    <td><div align="center">
    <?php require_once('../../column.php');
            
            ?>
      
   
   
    </div></td>
    <td><div align="center">
    <?php
  $check_table = mysql_query("SELECT * FROM y_84");

$full_result = mysql_num_rows($check_table);


     
$checksurvey = mysql_query("Select * from y_84 where submitdate ='N' or submitdate is NULL or submitdate=''") or die(mysql_error());

$checksurveystatus = mysql_num_rows($checksurvey);

//echo $checksurveystatus;

if ($checksurveystatus || !$full_result) {
     
      $tok = mysql_query("SELECT linkadd FROM e_84 where token ='".$_SESSION['pass']."' AND completed =\"N\" or completed=''") or die(mysql_error());

      $tokenquery = mysql_result($tok,0);

      if ($tokenquery) {
     
            //echo "<a href=".$tokenquery."\"\">Take Survey</a>";
     echo  "<a href=".$tokenquery."\"\" target=_blank>Sey</a>";
      }else{
     
            echo '<span style="color: red;">No</span>';
     
      }

}else{

echo '<span style="color: red;">Completed !!</span>';

}
?>
   
    </div></td>
  </tr>
 
<?php
echo "<h3>Secure Logout</h3>
<form action='../../logout.php' method='post'>
<input type='submit' value='Logout'>
</form>"; ?></center>

                        </div>      
                        
                <div class="post_btm"></div>
                              
                              
                              
                  
                  
      
                  </div>
                  
                  </div>
       
      
                  
      </body>
    </html>

<?php
}
?>
any idea why is it doing it.
Thanks
ASKER CERTIFIED SOLUTION
Avatar of Mark Steggles
Mark Steggles
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial