Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    Senior Coder jerry62704's Avatar
    Join Date
    Oct 2007
    Location
    Springfield, IL
    Posts
    1,100
    Thanks
    13
    Thanked 87 Times in 87 Posts

    Question Two problems - footer and backgroun img

    My page (URL="http://www.democratsforum.com/O_Bush_Poll1.php"]http://www.democratsforum.com/O_Bush_Poll1.php[/URL]) has two problems.

    #1. The footer appears in the top 1/3 of the page just below the "Trends" heading. You see the "Top of Page" (just to hold the position for now) about an inch below it in FF. It doesn't appear at all in IE7.

    #2. The background image also seems to stop in the same position.

    The Image is applied to the pagecontainer associaged with the head tag. The footer was tried as absolute and fixed with no difference. Here is the CSS:
    Code:
    html, body {
      width:				100%;
      height:				100%;
      background-color:		#EEEEEE; /* off-white */
     }
    
    * {
      padding:			0px;
      margin:				0px;
     }
    
    h1 {
      text-align:			center;
      margin-top:			1em;
      font-size:			140%;
     }
    
    h2 {
      text-align:			center;
      margin-top:			1em;
      font-size:			110%;
     }
    
    h3 a {
      color:				#0099FF;
     }
     
    p a {
      text-align:			center;
     }
    
    p.spacing {
      font-size:			100%;
      text-align:			left;
      margin-bottom:		.75em;
     }
    
    #pageContainer {
      position:			relative;
      font-family:			Arial, Helvetica, sans-serif;
      font-size:			100%;
      width:				100%;
      background-image:		url(../images/donkey_bg.gif);
      background-repeat:	repeat; 
     }
    
    /* ***************************************************
       heading on all pages
    *************************************************** */
    #headContainer {
      height:				5.5em;
      width:				100%;
     }
    
    #headLeft {
      height:				5.5em;
      float:				left;
      width:				33%;
      text-align:			center;
      background-image:		url(../images/donkey.gif); 
      background-repeat:	no-repeat;
      background-position:	left;
     }
    
    #headCenter {
      height:				5.5em;
      float:				left;
      width:				34%;
      text-align:			center;
      background-image:		url(../images/demlogo.gif);
      background-repeat:	no-repeat;
      background-position:	center;
     }
    
    #headRight {
      height:				5.5em;
      float:				right;
      width:				32%;
      text-align:			center;
      background-image:		url(../images/flag.gif);
      background-repeat:	no-repeat;
      background-position:	right;
     }
    
    /* ***************************************************
       footer on most pages
    *************************************************** */
    #footerContainer {
    	position:				absolute;
    	bottom:				0px;
    	width:				100%;
    	height:				2em;
    	text-align:			center;
     }
    And the HTML:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Democratic Forum Bush Approval Poll &amp; Graphic</title>
    <link rel="stylesheet" media="all" type="text/css" href="css/df_style.css" />
    <link rel="stylesheet" media="all" type="text/css" href="menu/stu_menu.css" />
    </head>
    <body id="pageContainer">
     <a name="top"></a>
     <?php include("menu/menu.php"); ?>
     <div class="contentCenter">
      <h1>Composite Bush Approval Poll</h1>
      <h2>02 / 17 / 2008</h2>
      <h2>Methology</h2>
      <div id="hideDetails">
       <ul>
        <li>
         <div class="underDash"
          onmouseover="document.getElementById('details_desc').style.display='block';
                       document.getElementById('summary_desc').style.display='none';
                       document.getElementById('history_desc').style.display='none';
                       document.getElementById('inactive_desc').style.display='none';"> Detail description</div>
        </li>
        <li>
         <div class="underDash"
          onmouseover="document.getElementById('details_desc').style.display='none';
                       document.getElementById('summary_desc').style.display='block';
                       document.getElementById('history_desc').style.display='none';
                       document.getElementById('inactive_desc').style.display='none';"> Summary description</div>
        </li>
        <li>
         <div class="underDash"
          onmouseover="document.getElementById('details_desc').style.display='none';
                       document.getElementById('summary_desc').style.display='none';
                       document.getElementById('history_desc').style.display='none';
                       document.getElementById('inactive_desc').style.display='block';"> Inactive description</div>
        </li>
        <li>
         <div class="underDash"
          onmouseover="document.getElementById('details_desc').style.display='none';
                       document.getElementById('summary_desc').style.display='none';
                       document.getElementById('history_desc').style.display='block';
                       document.getElementById('inactive_desc').style.display='none';"> Poll History</div>
        </li>
        <li>
         <div class="underDash"
          onmouseover="document.getElementById('details_desc').style.display='none';
                       document.getElementById('summary_desc').style.display='none';
                       document.getElementById('history_desc').style.display='none';
                       document.getElementById('inactive_desc').style.display='none';"> Clear description</div>
        </li>
       </ul>
      </div>
      <!-- hide details -->
      <p id="details_desc" class="hide">Bush polls are averaged between the top national non-partisan polls.  The ones used are listed in the <a href="#details">detail</a> section below.  They are averaged to eliminate spikes or valleys by one poll from distorting the national feeling.<br />
      </p>
      <p id="summary_desc" class="hide">Bush polls summary has the poll, the current number, the direction since the last poll and the change, and the date.  See the <a href="#summary">summary</a> section below.<br />
      </p>
      <p id="inactive_desc" class="hide">When polls are too old, they are eliminated from the computations, but are listed in their own section for historical interest.  Old polls will be re-added for the computations when they are current.  See the <a href="#inactive">inactive</a> section for those polls.</p>
      <p id="history_desc" class="hide">Once an average is determine, that one number is kept for historical purposes and for the graph of job approval ratings.  The <a href="O_Bush_Poll2.php" target="_blank">history</a> section includes this number for the past year while the graph goes back to June 2001.</p>
     </div>
    ...
     <div id="footerContainer">
      <p class="morespacing"><a href="#top">Top of page</a></p>
     </div>
    </body>
    </html>

  • #2
    Senior Coder jcdevelopment's Avatar
    Join Date
    Oct 2007
    Location
    Cowboy Nation
    Posts
    2,182
    Thanks
    174
    Thanked 257 Times in 257 Posts
    Code:
    #footerContainer {
    	clear:both;
    	width:	100&#37;;
    	height:	2em;
    	text-align:	center;
     }
    replace this with the old footer container

    as for the bg image, take the url out of the container and put it into the html and body like so

    Code:
    html, body {
      width:				100%;
      height:				100%;
      background-color:		#EEEEEE; /* off-white */
    background-image:		url(../images/donkey_bg.gif);
      background-repeat:	repeat; 
     }
    hope everything works out!!

  • Users who have thanked jcdevelopment for this post:

    jerry62704 (02-18-2008)

  • #3
    Senior Coder jerry62704's Avatar
    Join Date
    Oct 2007
    Location
    Springfield, IL
    Posts
    1,100
    Thanks
    13
    Thanked 87 Times in 87 Posts
    Now for the much harder question.

    Why did that work? What mistake (assumption of how CSS works) was I making?
    .
    .
    ...and gladly would he learn and gladly teach

    Visit www.LiberalsWin.com for humor and the unique Bush/Obama Approval Polls

  • #4
    Senior Coder jcdevelopment's Avatar
    Join Date
    Oct 2007
    Location
    Cowboy Nation
    Posts
    2,182
    Thanks
    174
    Thanked 257 Times in 257 Posts
    well, for one, the back ground image

    its better always to attach an image that will repeat constantly to the body. No matter how big the body is, th image will always repeat. There is no problem with putting it in the container, its just if one thing goes wrong inside then IE or FF may restrict where it goes. So unless you just need it in the main conatiner, then always place it in the html or body tag!!

    ok, as for the footer. I believe that you had it as a positioned element right? Absolute if im not mistaken. the bottom was set at 0px also. I have never been able to make that work without making the top margin a certain number. You would be amazed at how easy it is to position an element. Clearing the elements at the bottom will put it officially under them. Its a little easier than positioning them statically!!

    Hope some of it helped, im sure others will help or correct me if i am wrong, which i will admit has happened once or twice before!! Good luck and if you have any more questions then feel free to ask!!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •