SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Zealot
    Join Date
    Mar 2008
    Posts
    151
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Need to make this cross-browser compatible

    I have the following example code

    Code:
    <head>
    <style type="text/css">
    div#outerbox {
    width: 418px;
    min-height: 80px;
    margin-left: 4px;
    margin-top: 5px;
    border: 1px solid orange;
    }
    
    span.photo {
    float: left;
    width: 60px;
    height: 60px;
    border: 1px solid green;
    margin-top: 10px;
    margin-left: 10px;
    }
    
    div#post1 {
    float: right;
    width: 335px;
    margin-top: 10px;
    margin-right: 2px;
    border: 1px solid lightgrey;
    }
    
    div#addReply1 {
    float: right;
    width: 330px;
    text-align: right;
    border: 1px solid pink;
    }
    </style>
    </head>
    <body>
    
    <div id='outerbox'>
      <span class='photo'></span>
      <div id='post1'></div>
      <div id='addReply1'></div>
    </div>
    <div id='outerbox'>
      <span class='photo'></span>
      <div id='post1'>
        I need this div to stretch in height depending on the contents of this, THIS works fine in IE6...<br />
        The orange outdiv also needs to stretch as it's doing when viewed in IE6.
      </div>
      <div id='addReply1'></div>
    
    </div>
    </body>
    Basically i need it to look exactly the same in all browsers as it looks now in IE6

    There's 2 examples above, 1 showing without any text in the div and the other showing what should happen when those divs have content (Viewed in IE6) - i need this to work in all the major browsers.

    Anybody help?

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

    Clear the floats and the parent will stretch with content.

    e.g.
    Code:
    div#outerbox {
        width: 418px;
        min-height: 80px;
        margin-left: 4px;
        margin-top: 5px;
        border: 1px solid orange;
        overflow:hidden;/* forces parent to encompass child floats*/
    }
    If you can't use overflow:hidden (e.g. if you want visible content placed outside the parent ) then use one of the other clearing techniques mentioned in the faq on floats (sticky faq thread at the top of the forum).

  3. #3
    SitePoint Zealot
    Join Date
    Mar 2008
    Posts
    151
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    i need the contents to be visible so i can't use overflow: hidden

    i couldn't find the sticky thread with the help i need.

  4. #4
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,721
    Mentioned
    8 Post(s)
    Tagged
    0 Thread(s)
    The optimal choice for you would be the clearfix then
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  5. #5
    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 Shark3y3s View Post
    i need the contents to be visible so i can't use overflow: hidden

    i couldn't find the sticky thread with the help i need.
    Hi,
    Did you try it? I don't see anything that hangs out of your parent div so it should not cause any problems. It will hide elements that reside outside of the parent via negative margins.

    FAQ : Everything you wanted to know about floats

    Visibility Inherit - Containing Floats Made Easy!

    Gary Turner Web Dev - Containing Float Elements

  6. #6
    SitePoint Zealot
    Join Date
    Mar 2008
    Posts
    151
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here's a better example

    Code:
    <head>
    <style type="text/css">
    div#outerbox {
    width: 418px;
    min-height: 80px;
    margin-left: 4px;
    margin-top: 5px;
    border: 1px solid orange;
    }
    
    span.photo {
    float: left;
    width: 60px;
    height: 60px;
    border: 1px solid green;
    margin-top: 10px;
    margin-left: 10px;
    }
    
    div#post1 {
    float: right;
    width: 335px;
    margin-top: 10px;
    margin-right: 2px;
    border: 1px solid lightgrey;
    }
    
    div#addReply1 {
    float: right;
    width: 330px;
    text-align: right;
    border: 1px solid pink;
    }
    
    .replyPost {
    width: 320px;
    margin-left: 10px;
    margin-bottom: 2px;
    border: 1px solid red;
    }
    </style>
    </head>
    <body>
    
    <div id='outerbox'>
      <span class='photo'></span>
      <div id='post1'></div>
      <div id='addReply1'>link to add new replyPost class</div>
    </div>
    <div id='outerbox'>
      <span class='photo'></span>
      <div id='post1'>
        I need this div to stretch in height depending on the contents of this, THIS works fine in IE6...<br />
        The orange outdiv also needs to stretch 
        <div class="replyPOst">These also need to stretch to fill the contents, this is just some random text for example</div>
        <div class="replyPOst">Same for this one, there can be many of these class's added and the outerbox and post1 divs need to stretch.</div>
      </div>
      <div id='addReply1'>link to add new replyPost class</div>
    </div>
    <div id='outerbox'>
      <span class='photo'></span>
      <div id='post1'>
        This is another commentBox
      </div>
      <div id='addReply1'>link to add new replyPost class</div>
    </div>
    </body>
    It's going to be used as a script where users can post a comment and reply to those comments.

    The outerbox div will be used as the comment container which will contain the other divs (photo, post1, replyPost1 and addReply class)

    The post1 div will be the used to hold the comment

    The addReply div will be used to hold a link (this doesn't need to stretch but it needs to stay in the outerbox div (everything in the outerbox div needs to stay inside).

    The link in the addReply div when clicked will add a replyPost class at the end of the comment inside the post1 div, everytime this link is clicked a new replyPost class get's appended onto the end. (that's why the post1 div needs to stay inside the outerbox div but still stretch).

    I only need to know how i can get the style of this correct - in IE6 it looks fine but in firefox or chrome it doesn't.

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,475
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    The answer is still the same

    Did you not try the solution I gave you earlier?

    Code:
    div#outerbox {
    width: 418px;
    min-height: 80px;
    margin-left: 4px;
    margin-top: 5px;
    border: 1px solid orange;
    overflow:hidden;
    }
    You have no content extending out of the parent and therefore the above rule is fine.

    You could instead use the routine that Ryan pointed to above instead if you don't want to use the overflow technique.

    e.g.
    Code:
    #outerbox:after {
        content:"."; 
        display:block; 
        height:0; 
        clear:both; 
        visibility:hidden;
    }
    #outerbox {display:inline-block;}
    /* mac hide \*/
    * html #outerbox {height: 1&#37;;}
    #outerbox {display: block;}
    /* End hide */
    Note that you have re-used ids which is invalid. An id is a unique reference to only one element on the page. You should be using classes for repeating sections.

    This is also non-semantic.

    Code:
    <div id='outerbox'>
      <span class='photo'></span>
      <div id='post1'></div>
      <div id='addReply1'>link to add new replyPost class</div>
    </div>
    A span is a n inline element but it is sandwiched between block elements and therefore semantically incorrect (although valid). It would be more correct as a block element such as a "p" element.

    Code:
    <div id='outerbox'>
      <p class='photo'></p>
      <div id='post1'></div>
      <div id='addReply1'>link to add new replyPost class</div>
    </div>

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,475
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    e.g.
    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">
    p {
        margin:0 0 1em
    }
    .outerbox {
        width: 418px;
        min-height: 80px;
        margin-left: 4px;
        margin-top: 5px;
        border: 1px solid orange;
    }
    .photo {
        float: left;
        width: 60px;
        height: 60px;
        border: 1px solid green;
        margin:10px 0 0 10px;
        display:inline;
    }
    .post1 {
        float: right;
        width: 335px;
        margin-top: 10px;
        margin-right: 2px;
        border: 1px solid lightgrey;
    }
    .addReply1 {
        float: right;
        width: 330px;
        text-align: right;
        border: 1px solid pink;
        clear;right;
    }
    .replyPost {
        width: 320px;
        margin-left: 10px;
        margin-bottom: 2px;
        border: 1px solid red;
    }
    .outerbox:after {
        content:".";
        display:block;
        height:0;
        clear:both;
        visibility:hidden;
    }
    .outerbox {
        display:inline-block;
    }
    /* mac hide \*/
    * html .outerbox {
        height: 1&#37;;
    }
    .outerbox {
        display: block;
    }
    /* End hide */
    </style>
    </head>
    <body>
    <div class='outerbox'>
        <p class='photo'></p>
        <div class='post1'>
            <p>test</p>
        </div>
        <p class='addReply1'><a href="#">link to add new replyPost class</a></p>
    </div>
    <div class='outerbox'>
        <p class='photo'></p>
        <div class='post1'>
            <p>I need this div to stretch in height depending on the contents of this, THIS works fine in IE6...</p>
            <p>The orange outdiv also needs to stretch</p>
            <div class="replyPost">These also need to stretch to fill the contents, this is just some random text for example</div>
            <div class="replyPost">
                <p>Same for this one, there can be many of these class's added and the outerbox and post1 divs need to stretch.</p>
            </div>
        </div>
        <p class='addReply1'><a href="#">link to add new replyPost class</a></p>
    </div>
    <div class='outerbox'>
        <p class='photo'></p>
        <div class='post1'>
            <p>This is another commentBox</p>
        </div>
        <p class='addReply1'><a href="#">link to add new replyPost class</a></p> 
    </div>
    </body>
    </html>


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
  •