SitePoint Sponsor

User Tag List

Page 2 of 2 FirstFirst 12
Results 26 to 37 of 37
  1. #26
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,486
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Looks good Eric

  2. #27
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,658
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Thanks Paul! I'm pretty stoked on it. It's so clean and seemingly as fullproof as cc's. Doesn't tarnish your HTML at all. And only ie gets a class on the body. This makes writing ie rules a total breeze. I'm going to see if I can put together the same ease with all browsers...

  3. #28
    SitePoint Evangelist
    Join Date
    Mar 2008
    Posts
    551
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Eric and Rayzur. Eric it appears that the solution you kindly suggested is
    It is overkill for serving IE an alternate style sheet. So, pick and choose what you need for your project.
    so I'm going to implement what Rayzur and Paul suggested.

    So to implement that I am going to:
    1.Delete the IEstyles.css
    2.Delete the conditional css code on the html page
    3.Add this code to my only style sheet index5.css:
    #wrapper {
    background-color:#FFFFFF;
    margin:-52px auto 0;
    min-height:100%;
    overflow:hidden;
    padding:0 10px;
    text-align:left;
    width:845px;
    }
    * html #wrapper {height:100%;}/*IE6 min-height*/

    #wrapper:after {/* thank you Erik J - instead of using display table for ie8*/
    clear:both;
    display:block;
    height:1%;/*fix IE8 min-height:100% bug*/
    content:" ";
    }
    How does that look? Thanks all!

  4. #29
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,724
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Looks good from here and the sticky footer is in place
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  5. #30
    SitePoint Evangelist
    Join Date
    Mar 2008
    Posts
    551
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Fantastic! Thank-you very much everyone!! CSS validates, html validates, I am going to do some testing cross browser but it is looking good! One last question please, the height of the divs inside the #wrapper div, do these divs have to be height 100% as well? When I start to put info in the divs then different pages will be different sizes so 100% will expand correclty I assume? http://copywritecolombia.com/index3.html

  6. #31
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,724
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Since min-height is set on the wrapper, it will always put the footer at the bottom, however if you have a lot of content then the footer will be pushed down accordingly. You don't need the inners to be 100% height
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  7. #32
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Hi,
    You don't need the overflow:hidden on the #wrapper now either, it can cause problems in Opera. The #wrapper:after block will now serve as a float containment mechanism.

    Sorry, I should have caught that in my last reply.

    Code:
    #wrapper {
    background-color:#FFFFFF;
    margin:-52px auto 0;
    min-height:100%;
    /*overflow:hidden; remove this*/
    padding:0 10px;
    text-align:left;
    width:845px;
    }
    * html #wrapper {height:100%;}/*IE6 min-height*/
    
    #wrapper:after {/*contain floats and fix ie8*/
    clear:both;
    display:block;
    height:1%;/*fix IE8 min-height:100% bug*/
    content:" ";
    }

  8. #33
    SitePoint Evangelist
    Join Date
    Mar 2008
    Posts
    551
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    OK perfect, so I can set the divs inside the wrapper div to have % or px sizes depending on what I want?

  9. #34
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,724
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Yes but realize that % heights need the parent to havea set height, and min-height doesn't count as setting a height .

    Pixel heights are fine though you shouldn't use them because on text size increase the content may be a greater height then the px height you specify. If you must try and specify in em units for content sections
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  10. #35
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Hi,
    You still need to remove the overflow:hidden on the #wrapper as per my last post.

    Your sticky footer is broken in Opera due to the overflow:hidden.

    Drag the browser window down by the bottom only and you will see the footer hang.

  11. #36
    SitePoint Evangelist
    Join Date
    Mar 2008
    Posts
    551
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Rayzur I got rid of the overflow:hidden.

    Thanks Ryan I understand what you mean with the ems instead of px heights, but I am unsure as to how to implement them. At present I have two divs with two background images which are the same height (441px) and for design reasons I want them to be showing completely:

    http://copywritecolombia.com/index3.html

    These two background images are nav.jpg in #leftnav and leftsmall.jpg in bonusinfo div. At present they are showing with 441px but I have been testing with lower values and the images are still appearing so it is vitally important that this is change to ems. How do I do that?
    Thank you

  12. #37
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,724
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    You can set a min-height on the elements with the image (to match the image height). Youc an't set a height and min-height because all you will get is the height .

    That way the image will still show and it will allow for more content/text resize
    Always looking for web design/development work.
    http://www.CodeFundamentals.com


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
  •