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
CSS

Avatar of undefined
Last Comment
Mark Steggles

8/22/2022 - Mon
ASKER
syedasimmeesaq

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
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
ASKER
syedasimmeesaq

Steggs
I will have to make another non secure page for you to see. I will do it this evening.
Thanks
Experts Exchange is like having an extremely knowledgeable team sitting and waiting for your call. Couldn't do my job half as well as I do without it!
James Murphy
Mark Steggles

cant u post the html for the page?
ASKER
syedasimmeesaq

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>
Mark Steggles

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>
Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.
ASKER
syedasimmeesaq

I tried that. That didn't help.
could it be because I have table inside.
Thanks
Mark Steggles

No that should work... try adding overflow:auto to div#content.

ASKER
syedasimmeesaq

That adds a scroll bar..which fits ok but I didn't want the scroll bar.
Thanks
Experts Exchange has (a) saved my job multiple times, (b) saved me hours, days, and even weeks of work, and often (c) makes me look like a superhero! This place is MAGIC!
Walt Forbes
ASKER
syedasimmeesaq

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
}
?>
ASKER
syedasimmeesaq

any idea why is it doing it.
Thanks
ASKER CERTIFIED SOLUTION
Mark Steggles

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
See how we're fighting big data
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question