SitePoint Sponsor

User Tag List

Results 1 to 18 of 18
  1. #1
    SitePoint Member
    Join Date
    Jul 2009
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS - Height issue!

    Hi All,

    I am a newbie...and a bit frustrated with the "height" issue on my website.

    I used html>body #footer {
    height: auto;
    }

    The footer is at the bottom okay - but I am getting html color background and the body color does not extend all the way down. Am i making sense? Please help!! How can I ensure that the body background color - black ; goes all the way down and meets the footer no matter how much content I have on the page?

    I have set my body {
    height 450px;
    }

    Thx all

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Of course it won't extend all the way down...you restrict the height to 450px.

    You could set
    html,body{height:100%;}
    body{background:black;}

    You will have to make sure that no colors are effecting the bodys background from meeting it (other divs backgrounds, etc)

    Though not entirely sure what the real issue is here .
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  3. #3
    SitePoint Member
    Join Date
    Jul 2009
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello Ryan,

    Thank you heaps for that speedy reply! Greatly appreciate your assistance.

    Okay let me explain further - maybe it might give you a better idea

    I have div set up like this:

    < div id="header">...
    </header>
    <div id="bodycontent">...
    <div id="main">...
    <form>
    </form>
    </div>
    </div> <!-- end of bodycontent div -->
    <div id="footer">...
    </footer>

    css

    #bodycontent {
    height: 450px;...

    html>body {
    height: 0 auto;
    }
    html>bodycontent #footer {
    height: auto;...

    I tried what you advised...

    html,body {
    height:100%;
    }
    body {
    background: black;
    }

    But that just extended my page sideways

    I don't really know what's happening here as I learnt CSS off the sitepoint book so...any help at your earliest convenience will be great.

    Thank you in advance

  4. #4
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Can you show us the page in question? That CSS there has multiple errors so it would be best if I could just see hte page .
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  5. #5
    SitePoint Member
    Join Date
    Jul 2009
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you heaps.

    Please find the code below:

    css
    Code:
    html {
        background: #1f0303;
    }
    /*
    #header, #search, #navigation, #bodycontent, #main, #attractions, #theme h6, #footer {
        border: 1px solid red;
    }
    */
    #header, #table, #search, #navigation, #bodycontent, #main, #attractions, #theme h6, #footer {
        position: absolute;
    }
    
    /* header */
    #header {
        top: 70px;
        width: 800px;
        background: #000000;
    }
    /* font */
    h1, h2, h3, h4, h5 {
        margin:0;
        padding: 0;
        font-family: verdana, "Trebuchet MS", Arial, Helvetica, sans-serif;
        line-height: 26px;
        letter-spacing: -1px;
    }
    h2, h3, h4, h5 {
        text-transform: lowercase;
    }
    h1 {
        font-size: 28px;
        margin: .6em 0 .8em 0;
    }
    h2 {
        font-size: 19px;
        text-align: justify;
    }
    h2 {
        color: #0263de;
    }
    h4, h5 {
        color: #654f3c;
    }
    #theme, #footer, h1, h3, p, ul {
        color: #ffffff;
    }
    p, ul, li {
        font-size: 14px;    
        text-align: justify;
        text-decoration: none;
        list-style: none;
    }
    /* body */
    body {
        margin-top:50px;
        padding: 0 .8em 0 .6em;
        background: #000000;
        font: 12px/16px georgia, verdana, arial, sans-serif;
        text-align: justify;
        margin: 0 10&#37; 0 10%;
    }
    #bodycontent {
        top: 500px;
        background: black;
    }
    #bodycontent, #main, #attractions {
        margin: 0 auto;
    }
    #bodycontent, #theme, #navigation, #footer {
        width: 800px;
    }
    /* #bodycontent {
        height: 450px;
    }
    */
    html,bodycontent {
        height:100%;
    }
    body {
        background: black;
    }
    #main, #attractions {
        height: auto;
    }
    /* attractions */
    
    #attractions {
        margin:0;
        width: 250px;
        left: 520px;
    }
    #attractions, #main {
        line-height: 30px;
    }
    /* main */
    #main, h1, h4 {
        text-align: justify;
        width: 80%;
        padding: 0 20px;
        background: transparent;
    }
    /* theme */
    #theme h6 {
        color:#eeeeee;
        text-align: right;
        top: 20px;
    }
    #theme {
        background: #000000  url(IMG/wks.jpg) no-repeat top;
        height: 380px;
    }
    /* Navigation */
    
    #navigation {
        float: left;
        margin: 0;
        top: 20px;
        height: 50px;
        letter-spacing: -1px;
        background: #1f0303 url(IMG/img030.gif) no-repeat left top;
    }
    #navigation ul {
        margin: 0;
        padding: 0px 0 0 10px;
        list-style: none;
        line-height: normal;
    }
    #navigation li {
        display: block;
        float: left;
    }
    #navigation a {
        display: block;
        float: left;
        margin-right: 1px;
        padding: 15px 10px 21px 10px;
        text-decoration: none;
        font-size: 13px;
        font-weight: bold;
        /* border-top: 1px solid #FFFFFF;
        border-left: 1px solid #FFFFFF; 
        border-bottom: 1px solid #717171;
        border-right: 1px solid #717171; */ 
    }
    #navigation a:hover {
        background: #1f0303 url(IMG/img04o.gif) repeat-x;
        color: b4a4b0;
    /*    border-top: 2px solid #717171;
        border-left: 2px solid #1f0303;
        border-bottom: 2px solid #1f0303;
        border-right: 2px solid #1f0303; */
    }
    #navigation a, a:link {
        color: #ffffff;
    }
    a:link {
        color: #654f3c;
    }
    a:visited {
        color: #645e6e;
    }
    a:hover, a:active {
        color: #0263de;
        text-decoration: none;
    }
    img {
        border: none;
    }
    /* search */
    #search {
        top: 20px;
        right: 10px;
        font-size: x-small;
        font-weight: bold;
    
    }
    #search label {
        color: #0263de;
    }
    /* table */
    table {
        border-collapse: collapse;
    }
    table th, table td {
        padding: 4px;
        border: 1px solid #0263de;
        color: #ffffff;
    }
    table th {
        font-size: x-small;
        background: #0263de;
    }
    table td {
        font-size: x-small;
        text-align: left;
    }
    table th {
        font-size: small;
        text-align: left;
        background: #0263de;
        color: #ffffff;
        padding: 0 0 2px 2px;
    }
    table caption {
        color: #ffffff;
        font-size: small;
        text-align: left;
        padding-bottom: 5px;
        font-weight: bold;
    }
    table td {
        font-size: small;
        background: #000000;
    }
    */
    /* blog */
    #blog {
        float: right;
        margin: 0 auto;
        width: 130px;
        font-size: 10px;
    }
    #blog h2 {
        font-size: 10px;
        color: #eeeeee;
        padding: 5px;
        margin: 0;
    }
    /* form */
    form, form p {
        color: #654f3c;
        font-size: 10px;
        font-weight: bold;
    }
    form fieldset {
        border: 2px solid #0263de;
        padding: 10px;
    }
    form legend {
        font-weight: bold;
        font-size: 10px;
        color: ffffff;
        padding: 5px;
    }
    form {
        padding: 0;
        margin: 0;
        line-height: 150%;
    }
    form label {
        color: #ffffff;
        font-size: 10px;
        font-weight: bold;
    }
    form label.fixedwidth {
        display: block;
        width: 240px;
        float: left;
    }
    form .buttonarea input {
        background: #000000;
        color: #0263de;
        font-weight: bold;
        font-size: 10px;
        padding: 10px;
        border: 1px outset #654c3c;
        margin: 20px;
        text-align: center;
    }
    /* footer */
    #footer p {
        text-align: center;
        font-size: x-small;
        font-style: bold;
    }
    #footer {
        top: 938px;
        padding: 10px 0 10px 0;
        background: #1f0303 url(IMG/img030d.gif) no-repeat;
    }
    
    html>body {
        height: 0 auto;
    }
    html>bodycontent #footer {
        height: auto;
    }
    Last edited by Paul O'B; Jul 20, 2009 at 01:53. Reason: code tags added

  6. #6
    SitePoint Member
    Join Date
    Jul 2009
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you heaps.

    Please find the code below: Having a bit of troubles with sitepoint forum as I am a newbie - can't post code so I have removed the information from link. Fingers crossed! This works

    Code:
    </head><body>
    <div id="header"></div>
        <form method="get" action="">
            <div></div>
            </form>
    </div>
    </div> <!-- end of header div -->
    <div id="navigation">
            <ul></ul>
    </div><div id="bodycontent">
        <div id="main">
    <form enctype="multipart/form-data" method="post" action="" accept-charset="UTF-8">
        <div>    </div>
    <fieldset>
      <legend></legend>
        <div>    </div>
        <div>    <div class="buttonarea">
     </fieldset>
    </form>
    </b></font></center>
    </div> <!-- end of bodycontent div -->
    <div id="footer"></div>
    <script type="text/javascript">
    Last edited by Paul O'B; Jul 20, 2009 at 01:53.

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,296
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    I'm afraid it's difficult to tell from that code what you are trying to do.

    You can't absolutely position everything into place unless you want a page that can never grow.

    If you are looking for a "sticky footer" technique then that is explained in detail in the CSS FAQ thread (see link in my sig).

    You can't just place the footer at xxpx from the top because that will never be the bottom of everyone's viewport and it won't allow the content to grow either.

    It might be better if you can send us a drawing or picture of what you are trying to do so we can offer better advice.

    You can post a link if you leave off the www and http parts (e.g sitedotcom).

  8. #8
    SitePoint Member
    Join Date
    Jul 2009
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "">
    <html xmlns="">
    <head>
    <title>Welcome to Our Wedding Site</title>
    <meta http-equiv="Content-Type"
    content="text/html; charset=utf-8"/>
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <link href="style1.css" rel="stylesheet" type="text/css"/>
    </head>
    <body>
    <div id="header">
        <h1>Kapesa-Wayne</h1>
    <div id="theme" 
    </div>
    <!-- SiteSearch Google -->
    
        <form method="get" action="">
            <div id="search">
                <label for="q">Search:</label>
                    <input id="q" name="q" size="20" maxlength="255" value=""
                    type="text"/>
                    <input name="domains" value=""
                    type="hidden"/>
                    <input name="sitesearch""
                        checked="checked" id="mysite" type="radio"/>
                <label for="mysite">Just this site</label>
                    <input name="sitesearch" value="" id="""/>
                <label for="www">WWW</label>
                    <input name="btnG" value="Go" type="submit"/>
    </div>
    </form>
    <!-- SiteSearch Google -->
    </div>
    </div> <!-- end of header div -->
    <div id="navigation">
        <ul>
                <li><a href="">Home Page</a>
                <li><a href="">Wedding Events </a></li>
                <li><a href="">Plan Your Trip </a>
                <li><a href="">Contact Us </a>
                <li><a href="">FAQs</a>
            </ul>
    </div>
    <div id="bodycontent">
        <div id="main">
            <h2>| Welcome to Our Wedding Site |</h2>
                    <p> Dear family and friends, </p>
                    <p>We are so excited about our upcoming nuptials and are even more eager to celebrate our union with you! 
                    We made this site in hopes of helping you plan your trip to Lusaka, Zambia by provding you with as much information as possible. 
                    Here, you will find information about flights, accommodations, local attractions, and details about the wedding ceremony preparations. 
                    There is a gallery of us through the years together and a contact us! page to request/enquire about information that may not be readily available on this site (we could use all of your on going support). </p>
                    <p>Love,</p>
                    <p>Kapesa and Wayne </p>
                    </p>
                    
    </div>
    </div> <!-- end of bodycontent div -->
    <div id="footer">
                    <p> Website designed by Kapesa Singogo & Wayne Smith Chatterjee </a>
    </div>
    <script type="text/javascript">
        var gaJsHost = (("https:" "" : "");
        document.write(unescape("&#37;3Cscript src='" +.js' type='text/javascript'%3E%3C/script%3E"));
    </script>
    <script type="text/javascript">
        try {
        var pageTracker = _gat._getTracker("UA-9818300-1");
        pageTracker._trackPageview();
        } catch(err) {}
    </script>
    </body>
    </html>
    Last edited by Paul O'B; Jul 20, 2009 at 09:19.

  9. #9
    SitePoint Member
    Join Date
    Jul 2009
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    I am not sure how to attach files as it won't accept html.

    But I have pasted as much information as I can (exhale!) goodness I desperately want to get this done but Your help is much appreciated

    Anyways, basically what happening is that when I set the hright to 10px - it is going all the way done for all pages but overlapping the footer on one page. I am not sure what the correct english terms are as my vocab is limited
    but the black background is going beyond the footer on some pages and not others and when I set is to fixed height; the opposite is happening.

    Is this meaningful?

    Thx Guys!

  10. #10
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    That code still doesn't fully tell us what you want? Do you want something like this?

    Do you want a fixed footer like facebook has (on the bottom)?
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  11. #11
    SitePoint Member
    Join Date
    Jul 2009
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes!

    See how the back ground height (pinkish color or beige) extends all the way to the footer as you add content? It is not consistent on all pages... it it extended beyond the red footer page and I do not know how to control it...?!?!!

    Thanks!

  12. #12
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Well your code isn't set up to be like a sticky footer. Adapt your page layout to that (aka have a wrapping div with header and the structure inside it, then the footer at the bottom, just like that page)

    And just so you know, it's called a sticky footer.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  13. #13
    SitePoint Member
    Join Date
    Jul 2009
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sticky footer...fancy!

    Ryan, please explain to me like I am a dummy! Remember I am a newbie So you have to use even plain-er English

    Let me see if I understand what you said.

    My main div should be header and everything inside of it??????

    And what is the code for sticky footer???

    Thanks heaps!

  14. #14
    SitePoint Member
    Join Date
    Jul 2009
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    See attached
    Attached Files Attached Files

  15. #15
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,296
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    If you want a sticky footer then you would need to make changes as follows.

    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">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    html, body {
        height:100&#37;;
        margin:0;
        padding:0;
    }
    body {
        background:#000;
        text-align:center;
        padding: 0 .8em 0 .6em;
        font: 12px/16px georgia, verdana, arial, sans-serif;
        text-align: justify;
        color:#fff;
    }
    #outer {
        width:800px;
        margin:auto;
        text-align:left;
        min-height:100%;
        background:#1f0303;
        margin-top:-30px;/* space for footer*/
    }
    /* header */
    #header {
        width: 800px;
        background: #000000;
        border-top:30px solid #000;/* footer soak up*/
        padding:20px 0 20px;
    }
    /* font */
    h1, h2, h3, h4, h5 {
        margin:0;
        padding: 0;
        font-family: verdana, "Trebuchet MS", Arial, Helvetica, sans-serif;
        line-height: 26px;
        letter-spacing: -1px;
    }
    h2, h3, h4, h5 {
        text-transform: lowercase;
    }
    h1 {
        font-size: 28px;
        margin: .6em 0 .8em 0;
    }
    h2 {
        font-size: 19px;
        text-align: justify;
    }
    h2 {
        color: #0263de;
    }
    h4, h5 {
        color: #654f3c;
    }
    #theme, #footer, h1, h3, p, ul {
        color: #ffffff;
    }
    p, ul, li {
        font-size: 14px;
        text-align: justify;
        text-decoration: none;
        list-style: none;
    }
    /* main */
    #main, h1, h4 {
        text-align: justify;
        padding: 0 20px;
        background: transparent;
    }
    /* footer */
    #footer p {
        text-align: center;
        font-size: x-small;
        font-style: bold;
        margin:0;
    }
    #footer {
        padding:0;
        background: #1f0303 url(IMG/img030d.gif) no-repeat;
        width:800px;
        margin:auto;
        height:30px;
        line-height:30px;
    }
    .last {
        margin:0
    }
    </style>
    <!--[if (lte IE 6)|(gte IE 8)]>
    <style type="text/css">
    #outer {height:100%;display:table;}
    </style>
    <![endif]-->
    </head>
    <body>
    <div id="outer">
        <div id="header">
            <h1>Kapesa-Wayne</h1>
        </div>
        <!-- SiteSearch Google -->
        <form method="get" action="">
            <div id="search">
                <label for="q">Search:</label>
                <input id="q" name="q" size="20" maxlength="255" value=""  type="text"/>
                <input name="domains" value="" type="hidden"/>
                <input name="sitesearch" checked="checked" id="mysite" type="radio"/>
                <label for="mysite">Just this site</label>
                <input name="sitesearch" value="" id="mysiste"/>
                <label for="www">WWW</label>
                <input name="btnG" id="www" value="Go" type="submit"/>
            </div>
        </form>
        <!-- SiteSearch Google -->
        <!-- end of header div -->
        <div id="main">
            <h2>| Welcome to Our Wedding Site |</h2>
            <p> Dear family and friends, </p>
            <p>We are so excited about our upcoming nuptials and are even more eager to celebrate our union with you! 
                We made this site in hopes of helping you plan your trip to Lusaka, Zambia by provding you with as much information as possible. 
                Here, you will find information about flights, accommodations, local attractions, and details about the wedding ceremony preparations. 
                There is a gallery of us through the years together and a contact us! page to request/enquire about information that may not be readily available on this site (we could use all of your on going support). </p>
            <p>Love,</p>
            <p class="last">Kapesa and Wayne </p>
        </div>
    </div>
    <!-- end of bodycontent div -->
    <div id="footer">
        <p> Website designed by Kapesa Singogo &amp; Wayne Smith Chatterjee </p>
    </div>
    </body>
    </html>
    I have reduced the code to simplify things so you can see it working. Read the faq to see how a sticky footer works.

  16. #16
    SitePoint Member
    Join Date
    Jul 2009
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you so much guys! -- Paul and Ryan

    I am off to bed as it's 3am and my brain is dead!

    But first thing in the morning will re-organise my content and let you know how much smarter I get, if I get that way.

    Thank you ever so kindly for your assistance. I really appreciate.

    Have a good day! And a great night!!!

  17. #17
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    There should only be a few elements.
    Code:
    <div id="outer">
    	<div id="inner">
    		<div id="header">
    			<h1>Sticky Footer</h1>
    		</div>
    		<h2>Works in ie5/6/7/8, Opera 9 and 10, Firefox 2+, Safari 3 (and probably every other modern browser)</h2>
    		<p>test</p>
    		<p>test</p>
    		<p>test</p>
    		<p>test</p>
    	</div>
    </div>
    <div id="footer">Footer</div>
    THe outer div is to hold everything except the footer in it, the inner div is to control the overflow of the floated elements. Inside that is the main structure (the columns, etc)

    THen comes the footer which will be sticky. Now let's review the CSS
    Code:
    * {/* for demo only*/
    	margin:0;
    	padding:0
    }
    This resets the margins and paddings on all elements. It makes it easier to control the layout since you know what exactly you wil be putting on it, instead of relying on browser default
    Code:
    html, body {
    	height:100&#37;;/* needed to base 100% height on something known*/
    }
    In order for the sticky footer technique to work you have to utilize the 100% height technique. The #outer div will have min-height 100% which will look to the parents (all the way up to the html element) to gather the base height.
    Code:
    #outer {
    	width:760px;
    	background:#ffffcc;
    	margin:auto;
    	min-height:100%;
    	margin-top:-40px;/*footer height - this drags the outer 40px up through the top of the monitor */
    }
    The width is just for visual effects and so is the margin:0 auto (that centers elements horizontally). The background will be of the content area (the skin colorish thing). The min-height 100% is so that it will extend 100% down the page, but then it is brought upwards 40px (which has to match the footer height)
    Code:
    #inner {
    	width:760px;
    	overflow:hidden;
    }
    This just matches the width on #outer, really you only need the overflow:hidden; but it sets haslayout in IE6 so keep it in there.
    Code:
    #header {
    	background:red;
    	border-top:40px solid #fff; /* soak up negative margin and allows header to start at top of page*/
    }
    This is the header section. It sets the red background and then you have to remember the -40px top margin you set on #outer. The header won't show because of the -40px so we use a top border (which matches the footer height and the negative margin) to show the header at the top of the viewport
    Code:
    #footer {/* footer now sits at bottom of window*/
    	background:red;
    	width:760px;
    	margin:auto;
    	height:40px;/* must match negative margin of #outer */
    	clear:both;
    }
    The footer will now stick at the bottom of the window because the content area (the #outer) will be 100% - the 40px for the footer. It's an ingenious technique.
    The height matches the negative margin and the border. The 3 values have to match if you want this to work
    The clear:both clears the #outer div and sits under the floated elements (you will probably have some in your real page
    The margin and the width matches #outer and centers it horizontally to make it line up with #outer. Then a background
    Code:
    /*Opera Fix*/
    body:before {
    	content:"";
    	height:100%;
    	float:left;
    	width:0;
    	margin-bottom:-40px;
    }
    There is a redraw problem in teh Opera engine (and IE8 we discovered). The browser won't redraw the footer with dynamic heights. So the fix is to place a empty element, 0 wwidth floated, with100% height to make this work. Instead of placing that element in the HTML we use the :before content property (we don't have to care about eralier IE not understanding this since only Opera and IE8 need it).
    Code:
    </style>
    <!--[if (lte IE 6)|(gte IE 8)]>
    <style type="text/css">
    #outer {height:100%;display:table;}
    </style>
    <![endif]-->
    This code just selects early IE and sets height:100% (since min-height isn't supported in IE6 and down.

    The display:table is for later IE where it suffers from the same redraw problems. The display:table fixes the IE8 issue, while Opera gets fixed from the :before code above.

    I hope I explained it in "plain-er" English

    Edit:

    Looks like Paul sorted you out
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  18. #18
    SitePoint Member
    Join Date
    Jul 2009
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    happy happy joy joy - I read through both you posts to see if I can visualize what you are telling me then will read again and put it on paper - then read again and practice....

    Thank you Ryan and Paul. I can't thank you enough. I am eager to try out what you have both outlined...keep you posted!


Bookmarks

Posting Permissions

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