SitePoint Sponsor

User Tag List

Page 2 of 2 FirstFirst 12
Results 26 to 44 of 44
  1. #26
    Resident curmudgeon bronze trophy gary.turner's Avatar
    Join Date
    Jan 2009
    Location
    Dallas
    Posts
    990
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    OK, installed Google-Chrome for Debian. (Their package is buggy, not handling dependencies properly had to pre-install one manually)

    I won't be able to debug against Safari/webkit, as google-chrome/webkit (Linux) works as expected.

    cheers,

    gary
    Anyone can build a usable website. It takes a graphic
    designer to make it slow, confusing, and painful to use.

    Simple minded html & css demos and tutorials

  2. #27
    SitePoint Member sikatangpinoy's Avatar
    Join Date
    Dec 2009
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    yup, I'm using GC in my Linux

  3. #28
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by gary.turner View Post
    I won't be able to debug against Safari/webkit, as google-chrome/webkit (Linux) works as expected.
    Ah. Yeah, there are some rendering differences between Chrome 4 (I assume that's what's available for Linux) and Safari 4. I'd assume that Chrome 4 is using a newer build of Webkit, but haven't tried to find out for sure.
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  4. #29
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,108
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    his quiz is very simple so all levels can have a go.
    Hmm, I'll try again in the morning. But can't find a solution at the moment.

  5. #30
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,374
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    I'll post answers late on Monday so if anyone still wants a go then you better hurry

  6. #31
    SitePoint Member
    Join Date
    Dec 2009
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I don't have any iphone,so I cant play this quiz right now.
    But this quiz is really informative and interesting quiz.I will definitely play this quiz when I purchase the iphone.

  7. #32
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,374
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Just has an entry from Mark (Markbrown4) but needs a bit more work Thanks for having a go though.

    Answers posted later today.

  8. #33
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,374
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    SOLUTION TIME

    Ok, Hope you all had a good Christmas and are now excitedly waiting the answers to this little quiz.

    On the surface of it the quiz seemed quite simple but as some of you found out there were a few little obstacles in the way.

    The main stumbling block is that the middle fluid column can't be set with margins or by using overflow:hidden because it would not line up at the left edge. The main trick was to use a 100% wide float for the middle column and then offset the overlapping difference with negative margins to draw everything back onto the page.

    Here is an online solution that I have tested on an actual iphone. As mentioned earlier you do need a couple of specific commands for the iphone otherwise it always tries to scale the page to 980px. Apart from that the code is just normal css. (If you have a mac computer you can download an iphone emulator from here.)

    Gary was quickest with the first solution followed by Kravvittz but unfortunately both failed in Safari which is a bit of a shame because that's the browser that the iphone uses.

    Therefore the winner to this quiz is yurikolovsky (Timo) as his answer worked as required. Well done Timo

    Thanks to all for taking part and for all the the submissions I received.

    My original Code:
    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>
    <meta name="viewport" content="width = 320" />
    
    <style type="text/css">
    @media only screen and (max-device-width: 480px) {
     body {
     width:320px
    }
    }
    html, body {
        margin:0;
        padding:0;
    }
    p {
        margin:0 0 1em
    }
    .col1 {
        width:314px;
        background:red;
        margin:0 0 0 5px;
        float:left;
        padding:1px 0;
        border:1px solid #000;
    }
    .col2 {
        min-width:314px;
        float:left;
        width:100%;
        margin:0 -648px 0 5px;
        min-width:934px;
        padding:1px 0;
    }
    .col3 {
        width:314px;
        margin:0 0 5px 5px;
        float:left;
        background:blue;
        border:1px solid #000;
    }
    .inner {
        background:green;
        min-height:0;
        margin:0 648px 0 0;
        padding:1px 0;
        border:1px solid #000;
        min-width:314px;
    }
    #outer {
        width:100%;
        min-width:320px;
        overflow:hidden;
        background:#fffccc;
    }
    .footer,.header {
        clear:both;
        background:orange;
        margin:5px 5px;
        border:1px solid #000;
    }
    h1{text-align:center;margin:0;padding:10px;}
    </style>
    </head>
    <body>
    <div id="outer">
    <div class="header"><h1>Header</h1></div>
        <div class="col1">
            <p>Column 1 : Column 1 : Column 1 : Column 1 : Column 1 : Column 1 : Column 1 : Column 1 : Column 1 : Column 1 : Column 1 : Column 1 : Column 1 : Column 1 : Column 1 : Column 1 : Column 1 : Column 1 : Column 1 : Column 1 : </p>
            <p>Column 1 : Column 1 : Column 1 : Column 1 : Column 1 : Column 1 : Column 1 : Column 1 : Column 1 : Column 1 : Column 1 : Column 1 : Column 1 : Column 1 : Column 1 : Column 1 : Column 1 : Column 1 : Column 1 : Column 1 : </p>
                    <p>Column 1 : Column 1 : Column 1 : Column 1 : Column 1 : Column 1 : Column 1 : Column 1   </p>
        </div>
        <div class="col2">
            <div class="inner">
                <p>This is middle column : This is middle column : This is middle column : This is middle column : This is middle column : This is middle column : This is middle column : This is middle column : This is middle column : This is middle column : This is middle column : This is middle column : This is middle column : This is middle column : This is middle column : This is middle column : This is middle column : This is middle column : This is middle column : This is middle column : This is middle column : This is middle column : This is middle column : This is middle column : This is middle column : This is middle column : This is middle column : This is middle column : </p>
            </div>
        </div>
        <div class="col3">
            <p>This is column 3 (right column) : This is column 3 (right column) :This is column 3 (right column) :This is column 3 (right column) :This is column 3 (right column) :This is column 3 (right column) :This is column 3 (right column) :This is column 3 (right column) :This is column 3 (right column) :This is column 3 (right column) :This is column 3 (right column) :This is column 3 (right column) :This is column 3 (right column) :This is column 3 (right column) :This is column 3 (right column) :This is column 3 (right column) :This is column 3 (right column) :This is column 3 (right column) :This is column 3 (right column) :This is column 3 (right column) :</p>
        </div>
        <div class="footer">
            <p>This is the footer This is the footerThis is the footerThis is the footerThis is the footerThis is the footerThis is the footerThis is the footerThis is the footerThis is the footerThis is the footerThis is the footerThis is the footerThis is the footerThis is the footerThis is the footerThis is the footerThis is the footerThis is the footerThis is the footerThis is the footerThis is the footerThis is the footerThis is the footerThis is the footerThis is the footerThis is the footer </p>
        </div>
    </div>
    </body>
    </html>
    Yurikolovsky:
    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">
    <meta name="viewport" content="width=320" />
    <title>iPhone Columns : Paul remake</title>
    <style type="text/css">
    /*@media only screen and (max-device-width: 480px) {*/
    * {
        margin:0;
        padding:0;
    }
    p {
        padding-bottom:1em;
    }
    div {
        margin:3px;
        border:solid black 1px;
    }
    #outer {
        margin:4px;
        min-width:316px;
        border:0;
    }
    .header {
        background:orange;
        text-align:center;
        padding:10px 0;
    }
    .footer {
        background:orange;
        clear:left;
    }
    .col1, .col2, .col3 {
        float:left;
        width:308px;/*316 - 6*/
    }
    .col1 {
        background:red;
    }
    .col2 {
        border:0;
        width:100%;
        margin:0 0 0 -632px;/*316 + 316*/
        min-width:948px;/*316 + 316 + 316*/
    }
    .col3 {
        background:blue;
    }
    .inner {
        background:green;
        margin-left:635px;/*316 + 316 + 3*/
    }
    /*}*/
    </style>
    </head>
    <body>
    <div id="outer">
        <div class="header">
            <h1>Header</h1>
        </div>
        <div class="col1">
            <p>Column 1 : Column 1 : Column 1 : Column 1 : Column 1 : Column 1 : Column 1 : Column 1 : Column 1 : Column 1 : Column 1 : Column 1 : Column 1 : Column 1 : Column 1 : Column 1 : Column 1 : Column 1 : Column 1 : Column 1 : </p>
            <p>Column 1 : Column 1 : Column 1 : Column 1 : Column 1 : Column 1 : Column 1 : Column 1 : Column 1 : Column 1 : Column 1 : Column 1 : Column 1 : Column 1 : Column 1 : Column 1 : Column 1 : Column 1 : Column 1 : Column 1 : </p>
            <p>Column 1 : Column 1 : Column 1 : Column 1 : Column 1 : Column 1 : Column 1 : Column 1 </p>
        </div>
        <div class="col2">
            <div class="inner">
                <p>This is middle column : This is middle column : This is middle column : This is middle column : This is middle column : This is middle column : This is middle column : This is middle column : This is middle column : This is middle column : This is middle column : This is middle column : This is middle column : This is middle column : This is middle column : This is middle column : This is middle column : This is middle column : This is middle column : This is middle column : This is middle column : This is middle column : This is middle column : This is middle column : This is middle column : This is middle column : This is middle column : This is middle column : </p>
            </div>
        </div>
        <div class="col3">
            <p>This is column 3 (right column) : This is column 3 (right column) :This is column 3 (right column) :This is column 3 (right column) :This is column 3 (right column) :This is column 3 (right column) :This is column 3 (right column) :This is column 3 (right column) :This is column 3 (right column) :This is column 3 (right column) :This is column 3 (right column) :This is column 3 (right column) :This is column 3 (right column) :This is column 3 (right column) :This is column 3 (right column) :This is column 3 (right column) :This is column 3 (right column) :This is column 3 (right column) :This is column 3 (right column) :This is column 3 (right column) /p> 
        </div>
        <div class="footer">
            <p>This is the footer This is the footerThis is the footerThis is the footerThis is the footerThis is the footerThis is the footerThis is the footerThis is the footerThis is the footerThis is the footerThis is the footerThis is the footerThis is the footerThis is the footerThis is the footerThis is the footerThis is the footerThis is the footerThis is the footerThis is the footerThis is the footerThis is the footerThis is the footerThis is the footerThis is the footerThis is the footer </p>
        </div>
    </div>
    </body>
    </html>
    Gary: Fails in Safari
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTM 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml"
          xml:lang="en-US"
          lang="en-US">
    <head>
    <meta http-equiv="Content-Type"
            content="text/html; charset=utf-8" />
    <title>quiz 31</title>
    <style type="text/css">
    /*<![CDATA[*/
      body, html {
    }
    #content {
        min-width: 316px;
        overflow: hidden;
    }
    #header, #footer {
        background-color: pink;
    }
    #leftcol {
        background-color: lightblue;
        float: left;
        margin: 0 5px;
        overflow: hidden;
        width: 306px;
    }
    #rightcol {
        background-color: lightyellow;
        float: right;
        margin: 0 5px;
        overflow: hidden;
        width: 306px;
    }
    #centercol {
        min-width: 306px;
        overflow: hidden;
    }
    
    
      /*]]>*/
    </style>
    </head>
    <body>
    <h1 id="header">Header</h1>
    <div id="content">
        <div id="leftcol">
            <h2>Left Column</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec urna sem;
                tempus quis vehicula in, convallis nec tellus. Pellentesque viverra metus
                et odio adipiscing id feugiat nisi cursus. Proin a est felis. Cum sociis
                natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
                Integer sagittis fringilla odio in pulvinar. Aliquam interdum dignissim
                nisl vitae condimentum. Sed condimentum mattis magna. Etiam congue
                tincidunt dapibus. Etiam ullamcorper velit sed dolor faucibus volutpat.
                Vestibulum id neque ac diam faucibus blandit sollicitudin ut felis. Mauris
                risus nibh, condimentum a suscipit nec; hendrerit vitae tellus? Donec in
                nunc ut leo mollis mollis faucibus at est. Fusce molestie ullamcorper mi,
                id fermentum risus luctus viverra! Maecenas lectus tellus, ultrices eget
                feugiat sit amet, auctor quis tortor. Quisque at tortor metus, quis varius
                metus? Nullam quis consectetur neque. Suspendisse porttitor faucibus
                turpis, vel luctus tellus commodo eget. Integer in magna eget metus cursus
                gravida quis vitae neque. Nunc mi dui, porttitor in rutrum ut, cursus sed
                velit. Pellentesque nunc neque, vulputate fermentum rutrum adipiscing,
                bibendum sed odio!</p>
        </div>
        <div id="rightcol">
            <h2>Right Column</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ac
                ipsum et nulla consectetur facilisis? Proin sit amet lectus nulla, a
                malesuada dolor. Pellentesque facilisis sodales elementum. Lorem ipsum
                dolor sit amet, consectetur adipiscing elit. Aenean dignissim condimentum
                sem a accumsan? Vestibulum dapibus pellentesque tellus, sit amet porttitor
                orci congue vitae? Sed eu elit erat, et aliquam purus? In hac habitasse
                platea dictumst. Vestibulum ante ipsum primis in faucibus orci luctus et
                ultrices posuere cubilia Curae; In molestie venenatis pulvinar.</p>
        </div>
        <div id="centercol">
            <h2>Center Column</h2>
            <p>Nullam fringilla, est adipiscing tincidunt porttitor; lacus mauris
                laoreet dui, molestie fringilla nibh est vitae turpis. In volutpat metus et
                magna dictum blandit. Suspendisse felis metus, aliquet ac blandit cursus,
                posuere aliquet neque. Aenean ut augue et magna adipiscing blandit. In id
                augue eget tellus ornare semper non a est. Duis ante massa, bibendum congue
                dictum sed, scelerisque at justo. Nam aliquet, nunc sit amet tincidunt
                viverra, ligula tortor condimentum mauris; vel convallis mauris ante in
                leo. Integer aliquam varius sem vel vestibulum! Nullam varius sollicitudin
                velit, nec fermentum tellus commodo ac. Aliquam id ipsum vitae libero
                viverra pretium. In eu nibh lacus, non mattis ipsum. Ut sit amet quam in
                diam sodales congue. Quisque sodales lacus et elit ultrices eget varius
                arcu mattis. Phasellus tempus semper erat, pretium suscipit ante pharetra
                et. Vivamus convallis turpis semper turpis tempor semper.</p>
        </div>
    </div>
    <p id="footer">Footer</p>
    </body>
    </html>
    Kravittz: Fails in Safari

    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=iso-8859-1">
    <!-- Created: 2009-12-19 -->
    <!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=iso-8859-1">
    <title></title>
    <style type="text/css">
    /* <![CDATA[ */
    
    body {
        min-width: 316px;
    }
    #header, #footer {
        background: #FFA500;
        clear: both;
    }
    div.majorCol {
        width: 316px;
        min-width: 316px;
    }
    #colOne {
        background: #F33;
        margin-left: 316px;
        float: left;
        margin-right: -316px;
        position: relative;
    }
    #colWrap {
        min-width: 632px;
        position: relative;
        float: left;
        width: 100%;
        margin-left: -316px;
    }
    #colTwo {
        width: auto;
        margin: 0;
        overflow: hidden;
        border-left: 316px solid transparent;
    }
    #colTwo>.innertube {
        background: #282;
        overflow: hidden;
        min-width: 316px;
    }
    #colThree {
        overflow: hidden;
        background: #33F;
    }
    
    
    /* ]]> */
    </style>
    </head>
    <body>
    <div id="header"> header
        <p>Firefox 3+, IE7+, Opera 8+, Google Chrome 4</p>
    </div>
    <div id="colWrap">
        <div id="colOne" class="majorCol"> column 1
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec scelerisque 
                purus vitae wisi accumsan fringilla. Aliquam nibh elit, imperdiet eu, 
                scelerisque at, condimentum eget, leo. Nam dolor. Etiam rutrum. Nullam nulla 
                nibh, sollicitudin in, dictum ut, ullamcorper id, mauris.</p>
        </div>
        <div id="colTwo" class="majorCol">
            <div class="innertube"> column 2
                <p>Aenean ultricies, 
                    erat quis aliquet pellentesque, sapien nulla posuere nunc, sed tincidunt wisi 
                    wisi id quam. Donec magna ante, pellentesque eu, posuere sed, ultrices sed, 
                    velit. Sed id velit. Quisque sollicitudin lacus a ante. Etiam aliquam. Nulla 
                    vitae lectus. Mauris ante neque, blandit id, vehicula nec, iaculis vitae, wisi. 
                    Mauris quis elit sed quam interdum sollicitudin. Curabitur congue egestas 
                    velit. Nulla feugiat placerat felis.</p>
            </div>
        </div>
    </div>
    <div id="colThree" class="majorCol"> column 3
        <p>Praesent felis tellus, rutrum et, faucibus 
            eget, sagittis non, ligula. Fusce porta, lorem at convallis vehicula, arcu eros 
            egestas tellus, in bibendum ante metus vel nisl. Sed erat nulla, vulputate vel, 
            fermentum et, feugiat nec, eros. Pellentesque augue tortor, rutrum eu, mattis 
            id, ornare vitae, sapien.</p>
    </div>
    <div id="footer"> footer </div>
    </body>
    </html>
    Thanks to all those that took part

    Look out for the next quiz which I will post in a few days time and unlike other quizzes I am going to give you free reign a bit and want you to come up with some CSS animation in one form or another.

    So get your thinking caps on now and see if you can think of something unusual or interesting to display.

    To get you in the mood here is an example I knocked up today in about three hours.

    Get thinking!!

  9. #34
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    some CSS animation in one form or another.
    hahaha wow, this will be a challenge.
    what about browsers? different browsers handle things differently.

    p.s. love the snake.
    you could have added some error checking by making the screen blank (or just blocking the links by some div covering) when you moved off the line. (but it would require more squares)

  10. #35
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,374
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by YuriKolovsky View Post
    hahaha wow, this will be a challenge.
    what about browsers? different browsers handle things differently.
    I'll think up some real rules when I post the quiz but I will probably keep the rules flexible so that we can see some interesting examples.

  11. #36
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,374
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    you could have added some error checking by making the screen blank (or just blocking the links by some div covering) when you moved off the line. (but it would require more squares)
    Yes - I got bored once I'd done the first part

    There actually wasn't a quick way to add error checking because of the animation which means the gaps in the background will pass over different elements and are not constant. I did leave a few black holes for you to fall into though

  12. #37
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,207
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Thanks for posting the solutions, Paul. Very interesting, although I'm still trying to understand how they work.

    I was wondering if you were going to post a solution with the columns out of source order? I thought that was the original 'easy' proposition.

    Paul, just playing with the solutions posted above, on my Mac (at least in FF and Safari) the blue box overlaps the green box by about 20px before it drops in your solution, where it doesn't in Yuri's. (Tried to see if I could stop it happening, but gave up in the end. )

  13. #38
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,207
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Hmm, typing iPhone emulator into Google brings up all sorts of options, such as this:

    http://iphonetester.com/

    Handy for testing this quiz.

  14. #39
    SitePoint Evangelist Dave Morton's Avatar
    Join Date
    Sep 2003
    Location
    Carson City, NV
    Posts
    557
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm so glad I ran across this quiz! Someone recently let me know that my site looked REALLY BAD in IE (I hate $M), and provided me a screenshot. Well it turns out that at screen sizes smaller than 1024x768 (the smallest size I had tested on) IE was letting the columns "bleed together". By adapting the CSS from this quiz, I was able to get IE back in line. It also seems to make the page look more like it should in other browsers, as well.
    This is why I love this site. I just keep learning and learning. Thank you, Paul, and everyone! And watch out for that next quiz! I've already got my entry ready!
    Making a difference, one little psychotic episode at a time
    Geek Cave Creations
    Beta testers needed for pChat
    Dave's Gallery

  15. #40
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,374
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Hmm, typing iPhone emulator into Google brings up all sorts of options, such as this:

    http://iphonetester.com/

    Handy for testing this quiz.
    Hi Ralph,

    The only real emulator is the one I linked to.

    All the others just create a small window but do not emulate the iphone at all. As you already mentioned the iphone scales layouts to fit so full size layouts won't look like they do on the iphone.


    Paul, just playing with the solutions posted above, on my Mac (at least in FF and Safari) the blue box overlaps the green box by about 20px before it drops in your solution, where it doesn't in Yuri's. (Tried to see if I could stop it happening, but gave up in the end. )
    The version I posted online is working fine it's just that I was a bit careless when I added padding and borders to the one I posted above.

    Just change the min-width in here until it fits.

    Code:
    .col2 {
        min-width:314px;
        float:left;
        width:100&#37;;
        margin:0 -648px 0 5px;
        min-width:960px;
        padding:1px 0;
    }
    I was wondering if you were going to post a solution with the columns out of source order?
    Actually I changed the rules when Gary made his entry as I thought it was too simple. However,
    I made the same mistake as Gary when I checked the code and the very simple version doesn't actually work in Safari.

    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>
    .col1 {
        width:310px;
        background:red;
        margin:0 5px;
        float:left;
    }
    .col2 {
        min-width:310px;
        margin:0 5px;
        overflow:hidden;
    }
    .col3 {
        width:310px;
        margin:0 5px;
        float:right;
        background:blue;
    }
    .inner {
        background:green;
    }
    #outer {
        min-width: 320px;
        overflow: hidden;
    }
    </style>
    </head>
    <body>
    <div id="outer">
        <div class="col1">
            <p>Column 1 : Column 1 : Column 1 : Column 1 : Column 1 : Column 1 : Column 1 : Column 1 : Column 1 : Column 1 : Column 1 : Column 1 : Column 1 : Column 1 : Column 1 : Column 1 : Column 1 : Column 1 : Column 1 : Column 1 : </p>
        </div>
        <div class="col3">
            <p>This is column 3 (right column) : This is column 3 (right column) :This is column 3 (right column) :This is column 3 (right column) :This is column 3 (right column) :This is column 3 (right column) :This is column 3 (right column) :This is column 3 (right column) :This is column 3 (right column) :This is column 3 (right column) :This is column 3 (right column) :This is column 3 (right column) :This is column 3 (right column) :This is column 3 (right column) :This is column 3 (right column) :This is column 3 (right column) :This is column 3 (right column) :This is column 3 (right column) :This is column 3 (right column) :This is column 3 (right column) :</p>
        </div>
        <div class="col2">
            <div class="inner">
                <p>This is middle column : This is middle column : This is middle column : This is middle column : This is middle column : This is middle column : This is middle column : This is middle column : This is middle column : This is middle column : This is middle column : This is middle column : This is middle column : This is middle column : This is middle column : This is middle column : This is middle column : This is middle column : This is middle column : This is middle column : This is middle column : This is middle column : This is middle column : This is middle column : This is middle column : This is middle column : This is middle column : This is middle column : </p>
            </div>
        </div>
    </div>
    </body>
    </html>
    It's fine in Opera and FF though.

    However the source order example is still pretty simple as you just use 3 floats with the middle float being 100% wide and then a negative margin equal to the width of the other two floats. Then you nest an inner with the same negative margin to keep the content away from the overlap.

  16. #41
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,207
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Thanks Paul. Your little fix for the overlap helps me understand a little better how it all works... but there are lots of concepts to absorb here!

    I don't find that simple code works too well in Firefox either, as the green box expands in width when it drops. Anyway, I'm not feeling so bad now, because I was feeling really stupid not being able to figure out how to do it. Yours and Yuri's source-order solutions are very impressive.

    Sorry about the mis-information about iPhone emulators. The link you posted seemed to lure me into an expensive developer signup process, which is not any use to me.

  17. #42
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,108
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Sorry about the mis-information about iPhone emulators. The link you posted seemed to lure me into an expensive developer signup process, which is not any use to me.
    http://phonegap.com/ and http://www.appcelerator.com/ are some other open-source projects which could simulate the browser. Their real purpose is in building native phone controls like lists and buttons but they include a web browser type control that you can render a page in which I imagine would be the same as Safari would render.

  18. #43
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,374
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    The link you posted seemed to lure me into an expensive developer signup process, which is not any use to me.
    I just signed up for the whole thing as I couldn't see a way to get just the iphone emulator. It's quite a heavy download I agree but I have plenty of disk space The emulator works great though and acts like the real thing in most respects.

    The links mark posted above look interesting also.

  19. #44


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
  •