SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Evangelist runeveryday's Avatar
    Join Date
    Jul 2009
    Posts
    437
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    why the paragraf out of the content ?

    there is a loyout, a rectangle which have three images in a row on the above and at the right rectangle corner,there is a text. the following is my HTML structure
    HTML Code:
    <div id="content">
    <ul id="picture">
    <li><img src="#" /><h5>first picture</h5></li>
    <li><img src="#" /><h5>second picture</h5></li>
    <li><img src="#" /><h5>third picture</h5></li>
    </ul>
    <div class="clear"></div>
    <p id="join">join us</p>
    </div>
    the css code
    Code:
    #picture{
    margin-left:10px;
    margin-top:50px;
    }
    #picture li {
    text-align:center;
    margin-left:10px;
    width:150px;
    float:left;
    border-left:#D3DAEC solid 1px;
    border-right:#D3DAEC solid 1px;
    }
    .clear {
    clear:both;
    }
    #join {
    text-align:right;
    background: url(images/1.gif) no-repeat scroll 0 0;
    }
    the wierd thing is under firefox, the "join us" is out of the content div. but under IE7 ,it's ok. why under firefox,it can't work.
    is there a better HTML structure to get i want to?
    Outdoor tools online store and wargame tools shop
    with best quality and service.
    comp molle tactical vest tactical clothing etc sell

  2. #2
    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 wierd thing is under firefox, the "join us" is out of the content div. but under IE7 ,it's ok. why under firefox,it can't work.

    is there a better HTML structure to get i want to?
    Hi,
    That's just it (the #content div), we don't know what styles you have applied to it since it was not provided with your code.

    I am guessing that you have something on it that is giving IE7 "haslayout" which is causing it to contain it's floats. For modern browsers such as FF you can force them to contain their floats with the overflow property.

    You should be able to loose that empty clearing div in the html and just clear the p#join.

    This is the best I could make out of it without your images or the #content styles.
    Post a link to your page or fill in the missing pieces for us.

    Code HTML4Strict:
    <!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>test</title>
    <style type="text/css">
    body,ul,h5,p {
        margin:0;
        padding:0;
    }
    #content {
        /*width:800px; unknown ?*/
        float:left; /*unknown ?*/
        padding:0 10px 0 0;
        background:#CCC;
        overflow:hidden;/*contain inner floats and establish margin clearance*/
    }
    #picture{
        float:left;
        margin:50px 0 10px 0;
        list-style:none;
        background:#FFF;
    }
    #picture li {
        float:left;
        width:150px;
        margin-left:10px;
        display:inline;/*IE6 margin bug*/
        text-align:center;
        border-left:#D3DAEC solid 1px;
        border-right:#D3DAEC solid 1px;
    }
    img { /*testing without images*/
        display:block;
        width:150px;
        height:75px;
        background:red;
    }
    #join {
        clear:both;
        text-align:right;
        background: url(images/1.gif) no-repeat scroll 0 0;
    }
    </style>
    </head>
    <body>
     
    <div id="content">
        <ul id="picture">
            <li><img src="#" /><h5>first picture</h5></li>
            <li><img src="#" /><h5>second picture</h5></li>
            <li><img src="#" /><h5>third picture</h5></li>
        </ul>
        <p id="join">join us</p>
    </div>
     
    </body>
    </html>

  3. #3
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,762
    Mentioned
    13 Post(s)
    Tagged
    0 Thread(s)
    For #content, it will need some sort of haslayout set, aka zoom:1; or some other trigger (with Rays code)
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  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)
    Quote Originally Posted by runeveryday View Post
    but under IE7 ,it's ok. why under firefox,it can't work.
    I think you answered the question backwards Ryan. The OP has said that it is ok in IE7 but not in FF.

    As I mentioned above it is probably because haslayout has already been set on #content.

    I just had to set up some test styles for #content (since it was not in the op's code) so I could add overflow to it for FF.


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
  •