Forums
View unanswered posts | View active topics It is currently Tue Dec 12, 2017 7:48 pm



Reply to topic  [ 1 post ] 
 Trouble with columns in IE8 
Author Message

Joined: Mon Feb 14, 2011 11:35 pm
Posts: 1
Post Trouble with columns in IE8
So I am a newbie with CSS3. I have implemented PIE successfully in FF & Chrome, but of course - not IE8.

My problem is I have 3 columns, with a header and a footer. In IE8 my columns scroll down for 10010px (or 1000em's) and the footer is hidden out there somewhere.

I searched the forum for "columns" and didn't see anything related to this.

I believe it is in the:
* html #footer-wrapper {
float: left;
position: relative;
width: 100%;
padding-bottom: 10010px;
margin-bottom: -10000px;

background: #FFF; /*** Same as body background ***/
}

block. This is the only area I changed that I could see a difference with.


Has anyone else had an issue with this? Any help is really appreciated.
The code is attached. The "other code" is from http://www.alistapart.com/articles/holygrail -- Modified for PIE. Thanks again for any help.



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>Practice Makes Perfect</title>
   <style type="text/css">

      /*** The Essential Code ***/

      body {
         margin: 0px 0px;
      }      

      #wrapper {
         width: 1024px;
         min-width: 630px;         /* 2 x (LC fullwidth + CC padding) + RC fullwidth */ 
         margin-left:auto;
         margin-right: auto;
      }

      #container {
         padding-left: 256px;      /* LC fullwidth */                   
         padding-right: 296px;     /* RC fullwidth + CC padding */
      }

      #navbar {
         margin: 0px 0px 0px 0px;
         padding: 15px 15px 15px 15px;   
         -moz-border-radius: 15px;
         -webkit-border-radius: 15px;
                        border-radius: 15px;
                        behavior: url(/css/PIE.htc);
      }

      #header {
         margin: 0px 0px 0px 0px;
         padding: 15px 15px 15px 15px;
         -moz-border-radius: 15px;
         -webkit-border-radius: 15px;
                        border-radius: 15px;
                        behavior: url(/css/PIE.htc);
      }
      
      #container .column {
         position: relative;
         float: left;
      }
      
      #center {
         padding: 10px 20px;       /* CC padding */
         width: 100%;                                                             
         -moz-border-radius: 15px;
         -webkit-border-radius: 15px;
                        border-radius: 15px;
                        behavior: url(/css/PIE.htc);
      }
      
      #left {
         width: 236px;             /* LC width  */                               
         padding: 0 10px;          /* LC padding */
         right: 296px;             /* LC fullwidth + CC padding */   
         margin-left: -100%;               
         margin-right: 15px;
         -moz-border-radius: 15px;
         -webkit-border-radius: 15px;
                        border-radius: 15px;
                        behavior: url(/css/PIE.htc);

      }
      
      #right {
         width: 236px;             /* RC width    130 */             
         padding: 0 10px;          /* RC padding   */
         margin-right: -100%;                                           
         -moz-border-radius: 15px;
         -webkit-border-radius: 15px;
                        border-radius: 15px;
                        behavior: url(/css/PIE.htc);
      }
      
      #footer {
         clear: both;
      /*   margin: 0px 0px;       */
         padding: 15px 15px;
         -moz-border-radius: 0px 0px 15px 15px;
         -webkit-border-radius: 0px 0px 15px 15px;
                        border-radius: 0px 0px 15px 15px;
                        behavior: url(/css/PIE.htc);
      }
      
      /*** IE Fix ***/
      * html #left {
         left: 150px;              /* RC fullwidth */
      }

      /*** Equal-height Columns ***/

      #container {
         overflow: hidden;
      }

      #container .column {
         padding-bottom: 1001em;     /* X + padding-bottom */ 
         margin-bottom: -1000em;     /* X */                     
      }

      /*** Footer Fix ***/

      * html body {
         overflow: hidden;
      }
      
      * html #footer-wrapper {
         float: left;
         position: relative;   
         width: 100%;
         padding-bottom: 10010px;   
         margin-bottom: -10000px;   
                                 
         background: #FFF;         /*** Same as body background ***/
      }

      /*** Just for Looks ***/

      body {         
         background: #303942;           
      }

      #header, #footer {
         font-size: large;
         text-align: center;
         padding: 0.3em 0;
         background: #999;
      }

      #navbar {
         background: #ff0000;
         
      }
      

      #left {
         background: #fae042;

      }

      #center {
         background: #DDD;

      }

      #right {
         background: #fae042;


      }

      #container .column {
         padding-top: 1em;
         text-align: justify;

      }


.section {
border: 2px solid #6B5E0E;           
padding: 10px 10px;                               
text-align: center; width: 200px;
-webkit-border-radius: 20px;       
-moz-border-radius: 20px;
border-radius: 20px;
-webkit-box-shadow: #666 0px 2px 3px;
-moz-box-shadow: #666 0px 2px 3px;
box-shadow: #666 0px 2px 3px;
background: #F5F0D3                                         
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#F5F0D3), to(#CCB737));   
background: -moz-linear-gradient(#F5F0D3, #CCB737);
background: linear-gradient(#F5F0D3, #CCB737);
-pie-background: linear-gradient(#F5F0D3, #CCB737);
  position: relative;                                   
  z-index: 10;                                             
behavior: url(/css/PIE.htc);

}


   </style>
</head>

<body>
   <div id="wrapper">
                <div id="header">This is the header.<br />
          This is the header.<br />
          This is the header.<br />
                     </div>
   

                 <div id="navbar">this is where the nav bar will be</div>

   
         <div id="container">
                 <div id="center" class="column">
         <h1>This is the main content.</h1>
         <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla.</p>
         <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla.</p>
       </div>

      <div id="left" class="column">
         <div class="section">      
                            <p>Filler</p> 
             <p>Filler</p>
         </div>
      
                        <div><p></p></div>
   
         <div class="section">      
                            <p>Filler</p> 
             <p>Filler</p>
         </div>

                        <div><p></p></div>
   
         <div class="section">      
                            <p>Filler</p> 
             <p>Filler</p>
         </div>

                </div>

      <div id="right" class="column">
         <h2>This is the right sidebar.</h2>

         <p>Lorem ipsum dolor sit amet, consectetuer ais dolore te feugait nulla.</p>
<p>Lorem ipsum dolor sit amet, consectetuer ais dolore te feugait nulla.</p>
<p>Lorem ipsum dolor sit amet, consectetuer ais dolore te feugait nulla.</p>
<p>Lorem ipsum dolor sit amet, consectetuer ais dolore te feugait nulla.</p>
<p>Lorem ipsum dolor sit amet, consectetuer ais dolore te feugait nulla.</p>
<p>Lorem ipsum dolor sit amet, consectetuer ais dolore te feugait nulla.</p>
<p>Lorem ipsum dolor sit amet, consectetuer ais dolore te feugait nulla.</p>
<p>Lorem ipsum dolor sit amet, consectetuer ais dolore te feugait nulla.</p>
<p>Lorem ipsum dolor sit amet, consectetuer ais dolore te feugait nulla.</p>
<p>Lorem ipsum dolor sit amet, consectetuer ais dolore te feugait nulla.</p>
<p>Lorem ipsum dolor sit amet, consectetuer ais dolore te feugait nulla.</p>
      </div>

   </div>

                   <div id="footer-wrapper">
                    <div id="footer">This is the footer that disappears.<br />
             This is the footer.<br />
             This is the footer.<br />
                              </div>
                   </div>
         
        </div>
</body>

</html>


Tue Feb 15, 2011 12:00 am
Profile
Display posts from previous:  Sort by  
Reply to topic   [ 1 post ] 

Who is online

Users browsing this forum: No registered users and 3 guests


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Search for:
Jump to:  
cron
Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group.
Designed by STSoftware for PTF.