SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Member
    Join Date
    Dec 2008
    Location
    Tehran - Iran
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    ie7 float div height

    i have this code
    Code:
    <div id="container">
        <div id="products_content">
            <div id="products_page_header">
                <div id="products_page">
                    <div class="post">
                        <div class="entrytext">
                            some text
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div id="clear">
        </div>
        <div id="siteinfo">
            <p>
                some content
            </p>
        </div>
    </div>
    and this css :

    Code:
    div#container {
        margin: 0 auto;
        width: 960px;
        height: auto;
        border-left: thin solid #6b5c57;
        border-right: thin solid #6b5c57;
    }
    
    
    div#products_page_header {
        width: 960px;
        height: 50px;
        background-image: url(images/products_page_header.png);
        background-repeat: no-repeat;
        margin: 10px 0 0 0;
    }
    
    div#products_page {
        width: 950px;
        float: right;
        margin: 50px 0 0 0;
    }
    
    div.post {
        float: right;
        border: 1px solid #6b5c57;
        width: 200px;
        height: 350px;
        margin: 10px;
    }
    div#siteinfo {
        height: 280px;
        position:relative;
        background-image: url(images/footer.jpg);
    }
    the problem is its working on all new browsers except IE7 !
    the height of products container wont work and footer div overlap it !
    what should i do ?

  2. #2
    SitePoint Guru Luki_be's Avatar
    Join Date
    Jun 2008
    Location
    Brazil, Minas Gerais. But i'm from Belgium.
    Posts
    867
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Do you have an url to look at. In your post you have an div id=clear but that isn't in your posted css. What is the css for the div id=clear?
    SitePoint Guru
    Sitepoint - the ultimate Css well
    As a computer, I find your faith in technology amusing.
    Sitepoint reference, your friend in need

  3. #3
    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)
    Hi, the problem is is that on "div#products_page_header" you set a 50px height, and IE is stayin at that height.

    You need to remove that height (also, I assume the #clear has clear:both on it)
    Code:
    div#products_page_header {
        width: 960px;
        /*height: 50px;*/
        background-image: url(images/products_page_header.png);
        background-repeat: no-repeat;
        margin: 10px 0 0 0;
    }
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  4. #4
    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)
    the problem is its working on all new browsers except IE7 !
    Along with the height problem Ryan mentioned you also need to contain your header floats for modern browsers. The page was really not working properly as you stated it was.

    Set up the #products_content styles also for any future floats that may follow the header.
    Remove that clearing div and just clear the footer instead.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>demo</title>
    
    <style type="text/css">
    * {margin:0;padding:0;}
    body {
        background: #fff;
        font-size:100&#37;;
    }
    #container {
        margin: 0 auto;
        width: 960px;
        border-left: 1px solid #6b5c57;
        border-right: 1px solid #6b5c57;
    }
    
    
    #products_page_header {
        width: 960px;
        /*height: 50px;*/
        background:yellow url(images/products_page_header.png) no-repeat;
        margin: 10px 0 0 0;
        overflow:hidden;/*contain header floats*/
    }
    #products_content{
        width:960px;/*IE haslayout/float containment*/
        overflow:hidden;/*contain floats that may follow the header*/
        background:blue;
    }
    #products_page {
        width: 950px;
        float: right;
        margin: 50px 0 0 0;
    }
    
    .post {
        float: right;
        border: 1px solid #6b5c57;
        width: 200px;
        height: 350px;
        margin: 10px;
        background:lime;
    }
    #siteinfo {
        clear:both;
        height: 280px;
        position:relative;
        background:orange url(images/footer.jpg);
    }
    
    </style>
    </head>
    <body>
    
    <div id="container">
        <div id="products_content">
            <div id="products_page_header">
                <div id="products_page">
                    <div class="post">
                        <div class="entrytext">
                            some text
                        </div>
                    </div>
                </div>
            </div>
        </div><!--end products_content-->
    
        <div id="siteinfo">
            <p>some content</p>
        </div>
    </div>
    
    </body>
    </html>

  5. #5
    SitePoint Guru Luki_be's Avatar
    Join Date
    Jun 2008
    Location
    Brazil, Minas Gerais. But i'm from Belgium.
    Posts
    867
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by RyanReese View Post
    Hi, the problem is is that on "div#products_page_header" you set a 50px height, and IE is stayin at that height.

    You need to remove that height (also, I assume the #clear has clear:both on it)
    Code:
    div#products_page_header {
        width: 960px;
        /*height: 50px;*/
        background-image: url(images/products_page_header.png);
        background-repeat: no-repeat;
        margin: 10px 0 0 0;
    }
    Have you tested that cross browser? The OP needs to give IE7 only that solution because it messes up Opera and FF
    SitePoint Guru
    Sitepoint - the ultimate Css well
    As a computer, I find your faith in technology amusing.
    Sitepoint reference, your friend in need

  6. #6
    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)
    Quote Originally Posted by Luki_be View Post
    The OP needs to give IE7 only that solution because it messes up Opera and FF
    It does not work correctly in other browsers because the floats were not being contained properly.

    The page was not working correctly for modern browsers to begin with. I posted the needed rules above.

  7. #7
    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)
    Quote Originally Posted by Luki_be View Post
    Have you tested that cross browser? The OP needs to give IE7 only that solution because it messes up Opera and FF
    Yes I did. I forgot to post the overflow:hidden; though I did have it locally.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  8. #8
    SitePoint Guru Luki_be's Avatar
    Join Date
    Jun 2008
    Location
    Brazil, Minas Gerais. But i'm from Belgium.
    Posts
    867
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    And i had the overflow:hidden set on the container div lol
    SitePoint Guru
    Sitepoint - the ultimate Css well
    As a computer, I find your faith in technology amusing.
    Sitepoint reference, your friend in need

  9. #9
    SitePoint Member
    Join Date
    Dec 2008
    Location
    Tehran - Iran
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    sorry for my late answer !
    Thanks for your help now its working correctly !
    with your method do I need to have clear div ? or just cleat at footer will work ?
    thnx again

  10. #10
    SitePoint Guru Luki_be's Avatar
    Join Date
    Jun 2008
    Location
    Brazil, Minas Gerais. But i'm from Belgium.
    Posts
    867
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    just clear the footer, like Rayzur said. His code will work now and for eternity
    SitePoint Guru
    Sitepoint - the ultimate Css well
    As a computer, I find your faith in technology amusing.
    Sitepoint reference, your friend in need


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
  •