SitePoint Sponsor

User Tag List

Page 2 of 2 FirstFirst 12
Results 26 to 49 of 49
  1. #26
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by bigrasb View Post
    maybe I did miss that, I was thinking that as long as the red box width is defined in a class (or ID) I just needed to call up the class and not needing to know, but I guess your saying I don't even know the name of the class that defines the red box width either
    Yes that's right - sorry if it wasn't clear

  2. #27
    SitePoint Enthusiast
    Join Date
    Mar 2009
    Posts
    67
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    DUH!! ok it just dawned on me, the CSS class in this case wouldn't really exist it would be content in the form of text or image... and it's not even friday yet...

  3. #28
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    I have another correct solution from jeremyasnyder so well done. It is not the optimal solution that I mentioned before though but similar to a few entries I have had.

    For those still trying this try to make sure that nothing is reliant on anything else so that if perhaps the heights of the little boxes were changed check that your solutions will still work and not break.

  4. #29
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Another correct solution from poetro so well done.

    As mentioned in previous posts It is not the optimal solution that I mentioned before though but similar to a few entries I have had.

  5. #30
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    I had a try this morning, and sent my non optimal solution.
    Here hopes I manage to find the optimal one before the solutions come out.

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

    Your solution was the one I was looking for so well done. However don't let me stop you looking for other more inventive ways of doing it

  7. #32
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    oh yay!
    I will look for a more optimal one for a hour or two more
    then i really have to get back to work!! (trying to find a semi dynamic server side cache solution)

  8. #33
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Ok - I'll be posting answers tomorrow so anyone still thinking about this has another day before solutions are posted

  9. #34
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,622
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Paul could you wait until more in the eveningish to post the answers? I've been swamped since I've gotten back and I haven't had a chance to fully try this quiz out.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  10. #35
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by RyanReese View Post
    Paul could you wait until more in the eveningish to post the answers? I've been swamped since I've gotten back and I haven't had a chance to fully try this quiz out.
    Ok - I'll wait until Friday

  11. #36
    SitePoint Member
    Join Date
    Mar 2010
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I Cant understand what you mean by "ie7-leftandright" could you please explain?
    Last edited by spikeZ; Apr 1, 2010 at 00:27.

  12. #37
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,705
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by AngelPixel25 View Post
    I Cant understand what you mean by "ie7-leftandright" could you please explain?
    That is the name of the image that the OP attached to the first post.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  13. #38
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,622
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Meh, I just don't have time for this, no matter how fast I get through clients I always get more .. I guess that's not a bad thing though.

    Go ahead and post if you were only waiting on me (though AngelPixel25 might be trying now?)
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  14. #39
    SitePoint Member
    Join Date
    May 2009
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I have recently started learning the CSS. I hope with in no time I will be with all you guys implementing the questions here.
    Inventing Internet Firm:
    Customize t-shirts || Custom t shirt

  15. #40
    SitePoint Enthusiast
    Join Date
    Mar 2010
    Posts
    43
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey Gary: do you have access to the other 32? I'm interested in trying those.

  16. #41
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,622
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    In the first post Paul gives links to all other 32 quizzes
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  17. #42
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    @kevinvs
    Paul hosts the quizzes.
    he maintains a list here
    http://www.sitepoint.com/forums/show...9&postcount=26

  18. #43
    SitePoint Addict
    Join Date
    Jul 2009
    Posts
    220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    interesting...i'd never had e time to read quizzes until now. but i've got no solution to this. i'm writing this cause i love such quizzes. i think u can make it into a book. thanks Paul for his efforts. shall be waiting eagerly for e solution.

  19. #44
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Solution Time.

    Ok time to wrap this up and provide explanations.

    Thanks to all that took part and nice to see a few new names as well as the regulars. All support is greatly received.

    The requirements of the quiz were to get that little red block to the right of that widthless float in IE7 and under as presently the right floated block pushes iE7 to 100% wide.

    The solution that I was looking for needed to maintain the flow of the document so those of you that used position:absolute to create the effect were close but no cigar I'm afraid. The problem with absolutely placing the element is that it relied on the left float being present and being the same size or bigger than the element on the right and wouldn't be usable in a real situation. Well done those of you who sent me the absolute solution as I think nearly everyone sent me that first

    The real answer was very simple indeed and only needed two minor changes for IE7.

    Code:
    .wrap{text-align:right}
    .fr{float:none}
    That was all you needed to do

    If you are wondering why this works then you have to go back to IE5 and remember that text-align:center on a parent will centre block level children.

    This behaviour is still present in IE6 and 7 and what you may not have realised is that if you use text-align:right on the parent then the child block element will align to the right.

    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>
    body {text-align:right}
    div {
        width:300px;
        height:300px;
        background:red;
    }
    </style>
    </head>
    <body>
    <div>test</div>
    </body>
    </html>
    So all you need to have two elements in a row is to float the first element and then let the second element align to the right.

    Here is the full solution:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <style type="text/css">
    p {
        margin:0
    }
    .wrap {
        float:left;/* no width allowed*/
        clear:left;
        border:1px solid #ccc;
        padding:10px;
        margin:0 0 10px;
        background:#f2f2f2;
    }
    .image {
        height:150px;
        border:1px solid #000;
        background:red;
        line-height:150px;
        text-align:center;
    }
    .i1 {width:300px}
    .i2 {width:400px}
    .i3 {width:200px}
    .f {
        width:75px;
        height:75px;
        border:5px solid red;
        text-align:center;
        margin:1px 0 0;
        background:#ffc;
    }
    .fl {float:left}
    .fr {float:right}
    </style>
    <!--[if lte IE 7]>
    <style type="text/css">
    .wrap{text-align:right}
    .fr{float:none}
    </style>
    <![endif]-->
    
    
    </head>
    <body>
    <div class="wrap">
        <p class="image i1">Image</p>
        <p class="f fl">Text Left<br>Text Left</p>
        <p class="f fr">Text Right<br>Text Right</p>
    </div>
    <div class="wrap">
        <p class="image i2">Image</p>
        <p class="f fl">Text Left<br>Text Left</p>
        <p class="f fr">Text Right<br>Text Right</p>
    </div>
    <div class="wrap">
        <p class="image i3">Image</p>
        <p class="f fl">Text Left<br>Text Left</p>
        <p class="f fr">Text Right<br>Text Right</p>
    </div>
    </body>
    </html>
    Some of you missed that behaviour and instead used the fact that you can turn a block element into an inline-block element by declaring it as inline then applying haslayout. This has the same effect as before in that the element is now subject to the text-align properties and you can align it to the right.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <style type="text/css">
    p {
        margin:0
    }
    .wrap {
        float:left;/* no width allowed*/
        clear:left;
        border:1px solid #ccc;
        padding:10px;
        margin:0 0 10px;
        background:#f2f2f2;
    }
    .image {
        height:150px;
        border:1px solid #000;
        background:red;
        line-height:150px;
        text-align:center;
    }
    .i1 {width:300px}
    .i2 {width:400px}
    .i3 {width:200px}
    .f {
        width:75px;
        height:75px;
        border:5px solid red;
        text-align:center;
        margin:1px 0 0;
        background:#ffc;
    }
    .fl {float:left}
    .fr {float:right}
    </style>
    <!--[if lte IE 7]>
    <style type="text/css">
    .wrap{text-align:right}
    .fr{float:none;display:inline-block}
    .fr{display:inline}
    </style>
    <![endif]-->
    
    
    </head>
    <body>
    <div class="wrap">
        <p class="image i1">Image</p>
        <p class="f fl">Text Left<br>Text Left</p>
        <p class="f fr">Text Right<br>Text Right</p>
    </div>
    <div class="wrap">
        <p class="image i2">Image</p>
        <p class="f fl">Text Left<br>Text Left</p>
        <p class="f fr">Text Right<br>Text Right</p>
    </div>
    <div class="wrap">
        <p class="image i3">Image</p>
        <p class="f fl">Text Left<br>Text Left</p>
        <p class="f fr">Text Right<br>Text Right</p>
    </div>
    </body>
    </html>

    Thanks to all that took part: Gary Turner, Rayzur, EricWatson, Ryan, jeremyasnyder, rainmakr, Catharsis, Kingcool68, Poetro and Yurikolvsky (hope I've not missed anyone) .

    The Winner IS:

    Rayzur


    Well done Ray

    The quickest Entry and a close second was Gary turner - well done Gary

    I chose ray's as the winning entry because the same code worked for all browsers without any hacks or alternative code.

    Ray:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Quiz-33 Rayzur</title>
    <style type="text/css">
    p {
        margin:0
    }
    .wrap {
        float:left;/* no width allowed*/
        clear:left;
        border:1px solid #ccc;
        padding:10px;
        margin:0 0 10px;
        background:#f2f2f2;
        text-align:right;/*added this*/
    }
    .image {
        height:150px;
        border:1px solid #000;
        background:red;
        line-height:150px;
        text-align:center;
    }
    .i1 {width:300px}/* cater for any width automatically*/
    .i2 {width:400px}
    .i3 {width:200px}
    .f {
        width:75px;
        height:75px;
        border:5px solid red;
        text-align:center;
        margin:1px 0 0;
        background:#ffc;
    }
    .fl {float:left}
    .fr {display:inline-block;}/*removed float*/
    </style>
     
    </head>
    <body>
    <div class="wrap">
        <p class="image i1">Image</p>
        <p class="f fl">Text Left<br>Text Left</p>
        <p class="f fr">Text Right<br>Text Right</p>
    </div>
    <div class="wrap">
        <p class="image i2">Image</p>
        <p class="f fl">Text Left<br>Text Left</p>
        <p class="f fr">Text Right<br>Text Right</p>
    </div>
    <div class="wrap">
        <p class="image i3">Image</p>
        <p class="f fl">Text Left<br>Text Left</p>
        <p class="f fr">Text Right<br>Text Right</p>
    </div>
    </body>
    </html>
    Gary:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <style type="text/css">
    p {
        margin:0
    }
    .wrap {
        float:left;/* no width allowed*/
        clear:left;
        border:1px solid #ccc;
        padding:10px;
        margin:0 0 10px;
        background:#f2f2f2;
    }
    .image {
        height:150px;
        border:1px solid #000;
        background:red;
        line-height:150px;
        text-align:center;
    }
    .i1 {width:300px}/* cater for any width automatically*/
    .i2 {width:400px}
    .i3 {width:200px}
    .f {
        width:75px;
        height:75px;
        border:5px solid red;
        text-align:center;
        margin:1px 0 0;
        background:#ffc;
    }
    .fl {float:left}
    .fr {float:right}
    </style>
    <!--[if lte IE 7]>
    <style type="text/css">
    .wrap {
        text-align: right;
        }
    
    .fr {
        display: inline-block;
        float: none;
        text-align: center;
        }
    
    </style>
    <![endif]-->
    </head>
    <body>
    <div class="wrap">
        <p class="image i1">Image</p>
        <p class="f fl">Text Left<br>Text Left</p>
        <p class="f fr">Text Right<br>Text Right</p>
    </div>
    <div class="wrap">
        <p class="image i2">Image</p>
        <p class="f fl">Text Left<br>Text Left</p>
        <p class="f fr">Text Right<br>Text Right</p>
    </div>
    <div class="wrap">
        <p class="image i3">Image</p>
        <p class="f fl">Text Left<br>Text Left</p>
        <p class="f fr">Text Right<br>Text Right</p>
    </div>
    </body>
    </html>
    Eric Watson:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <style type="text/css">
    p {
        margin:0;
    }
    .wrap {
        float:left;/* no width allowed*/
        clear:left;
        border:1px solid #ccc;
        padding:10px;
        margin:0 0 10px;
        background:#f2f2f2;
    }
    .image {
        height:150px;
        border:1px solid #000;
        background:red;
        line-height:150px;
        text-align:center;
    }
    .i1 {width:300px}/* cater for any width automatically*/
    .i2 {width:400px}
    .i3 {width:200px}
    .f {
        width:75px;
        height:75px;
        border:5px solid red;
        text-align:center;
        margin:1px 0 0;
        background:#ffc;
    }
    .fl { float:left}
    .fr { float:right}
    </style>
    <!--[if lte IE 7]>
    <style type="text/css">
    .wrap {text-align:right;}
    .fr { float:none;}
    </style>
    <![endif]-->
    
    </head>
    <body>
    <div class="wrap">
        <p class="image i1">Image</p>
        <p class="f fl">Text Left<br>Text Left</p>
        <p class="f fr">Text Right<br>Text Right</p>
    </div>
    <div class="wrap">
        <p class="image i2">Image</p>
        <p class="f fl">Text Left<br>Text Left</p>
        <p class="f fr">Text Right<br>Text Right</p>
    </div>
    <div class="wrap">
        <p class="image i3">Image</p>
        <p class="f fl">Text Left<br>Text Left</p>
        <p class="f fr">Text Right<br>Text Right</p>
    </div>
    </body>
    </html>
    Rainmakr:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <style type="text/css">
    p {
        margin:0
    }
    .wrap {
        float:left;/* no width allowed*/
        clear:left;
        border:1px solid #ccc;
        padding:10px;
        margin:0 0 10px;
        background:#f2f2f2;
    }
    .image {
        height:150px;
        border:1px solid #000;
        background:red;
        line-height:150px;
        text-align:center;
    }
    .i1 {width:300px}/* cater for any width automatically*/
    .i2 {width:400px}
    .i3 {width:200px}
    .f {
        width:75px;
        height:75px;
        border:5px solid red;
        text-align:center;
        margin:1px 0 0;
        background:#ffc;
    }
    .fl {float:left}
    .fr {float:right}
    </style>
    <!--[if lte IE 7]>
    <style type="text/css">
    .wrap {text-align:right;}
    .wrap * {text-align:center;}
    .fr {float:none; margin:1px 10px 0 0;}
    </style>
    <![endif]-->
    </head>
    <body>
    <div class="wrap">
        <p class="image i1">Image</p>
        <p class="f fl">Text Left<br>Text Left</p>
        <p class="f fr">Text Right<br>Text Right</p>
    </div>
    <div class="wrap">
        <p class="image i2">Image</p>
        <p class="f fl">Text Left<br>Text Left</p>
        <p class="f fr">Text Right<br>Text Right</p>
    </div>
    <div class="wrap">
        <p class="image i3">Image</p>
        <p class="f fl">Text Left<br>Text Left</p>
        <p class="f fr">Text Right<br>Text Right</p>
    </div>
    </body>
    </html>
    Catharsis:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <style type="text/css">
    p {
        margin:0
    }
    .wrap {
        float:left;/* no width allowed*/
        clear:left;
        border:1px solid #ccc;
        padding:10px;
        margin:0 0 10px;
        background:#f2f2f2;
    }
    .image {
        height:150px;
        border:1px solid #000;
        background:red;
        line-height:150px;
        text-align:center;
    }
    .i1 {width:300px}/* cater for any width automatically*/
    .i2 {width:400px}
    .i3 {width:200px}
    .f {
        width:75px;
        height:75px;
        border:5px solid red;
        text-align:center;
        margin:1px 0 0;
        background:#ffc;
    }
    .fl {float:left}
    .fr {float:right}
    </style>
    <!--[if lte IE 7]>
    <style type="text/css">
    .wrap { text-align: right;}
    .fr { float: none; }
    </style>
    <![endif]-->
    </head>
    <body>
    <div class="wrap">
        <p class="image i1">Image</p>
        <p class="f fl">Text Left<br>Text Left</p>
        <p class="f fr">Text Right<br>Text Right</p>
    </div>
    <div class="wrap">
        <p class="image i2">Image</p>
        <p class="f fl">Text Left<br>Text Left</p>
        <p class="f fr">Text Right<br>Text Right</p>
    </div>
    <div class="wrap">
        <p class="image i3">Image</p>
        <p class="f fl">Text Left<br>Text Left</p>
        <p class="f fr">Text Right<br>Text Right</p>
    </div>
    </body>
    </html>
    Yurikolovsky:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <style type="text/css">
    p {
        margin:0
    }
    .wrap {
        float:left;/* no width allowed*/
        clear:left;
        border:1px solid #ccc;
        padding:10px;
        margin:0 0 10px;
        background:#f2f2f2;
    }
    .image {
        height:150px;
        border:1px solid #000;
        background:red;
        line-height:150px;
        text-align:center;
    }
    .i1 {width:300px}/* cater for any width automatically*/
    .i2 {width:400px}
    .i3 {width:200px}
    .f {
        width:75px;
        height:75px;
        border:5px solid red;
        text-align:center;
        margin:1px 0 0;
        background:#ffc;
    }
    .fl {float:left}
    .fr {float:right}
    
    .fr {
        float:none;
        display:inline-block;
    }
    .wrap {
        text-align:right;
    }
    </style>
    </head>
    <body>
    <div class="wrap">
        <p class="image i1">Image</p>
        <p class="f fl">Text Left<br>Text Left</p>
        <p class="f fr">Text Right<br>Text Right</p>
    </div>
    <div class="wrap">
        <p class="image i2">Image</p>
        <p class="f fl">Text Left<br>Text Left</p>
        <p class="f fr">Text Right<br>Text Right</p>
    </div>
    <div class="wrap">
        <p class="image i3">Image</p>
        <p class="f fl">Text Left<br>Text Left</p>
        <p class="f fr">Text Right<br>Text Right</p>
    </div>
    </body>
    </html>
    As an example of the absolute method I will just post one entry at Random but as mentioned above this is not the best way to do this:

    Jeremeyasnyder
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <style type="text/css">
    p {
    margin:0;
    }
    .wrap {
    float:left;/* no width allowed*/
    clear: left;
    border:1px solid #ccc;
    padding:10px;
    margin:0 0 10px;
    background:#f2f2f2;
    position: relative;
    }
    .image {
    height:150px;
    border:1px solid #000;
    background:red;
    line-height:150px;
    text-align:center;
    }
    .i1 {width:300px}/* cater for any width automatically*/
    .i2 {width:400px}
    .i3 {width:200px}
    .f {
    width:75px;
    height:75px;
    border:5px solid red;
    text-align:center;
    margin:1px 0 0;
    background:#ffc;
    }
    .fl {float:left;}
    .fr {float: right;}
    </style>
    <!--[if lte IE 7]>
    <style type="text/css">
    .fr {
    float: none;
    position: absolute;
    right: 10px;
    }
    </style>
    <![endif]-->
    
    </head>
    <body>
    <div class="wrap">
    <p class="image i1">Image</p>
    <p class="f fl">Text Left<br>Text Left</p>
    <p class="f fr">Text Right<br>Text Right</p>
    </div>
    <div class="wrap">
    <p class="image i2">Image</p>
    <p class="f fl">Text Left<br>Text Left</p>
    <p class="f fr">Text Right<br>Text Right</p>
    </div>
    <div class="wrap">
    <p class="image i3">Image</p>
    <p class="f fl">Text Left<br>Text Left</p>
    <p class="f fr">Text Right<br>Text Right</p>
    </div>
    </body>
    </html>
    Well done to all that took part and hope that you find this useful as it has real value in certain situations for IE7. (It could even be used for round corners to stop the 1px jog that you get with absolute elements placed in the corners in IE.)

    Remember to fix your sights on a new quiz coming your way very soon

  20. #45
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the quiz Paul, I'm glad we got this one sorted.
    (and you don't hate IE6 as much when you can have fun with it)

  21. #46
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Thanks Timo

    New Quiz Posted

  22. #47
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Uhm... You guys know those all break on large font/120 dpi systems in Opera, IE7 and earlier, right?

    Just saying... (all you have to do is set the font-size in px or change the box sizes to em)

  23. #48
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,622
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    THe point wasn't in creating a stable layout Jason, it was just to overcome teh bug .
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  24. #49
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Yes as Ryan said the main point was to overcome the bug. In the real world you could use ems and not set a height and it would scale reasonably well within limits.

    My version scales reasonably well in IE without the heights set and without changing much else it is but would of course be better in ems.


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
  •