SitePoint Sponsor

User Tag List

Page 3 of 4 FirstFirst 1234 LastLast
Results 51 to 75 of 99
  1. #51
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,623
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    I have another solution from Ryan that is now pretty close and accepted as an entry Well Done.
    I believe the hardest quiz yet...
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  2. #52
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    i took a break from all the work i had, and made this quiz work!
    hope it qualifies.

    RyanReese
    I believe the hardest quiz yet...
    nah

  3. #53
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,623
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by YuriKolovsky View Post
    i took a break from all the work i had, and made this quiz work!
    hope it qualifies.


    nah
    Maybe not for you but this is my first interaction with tables.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  4. #54
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    RyanReese
    Maybe not for you but this is my first interaction with tables.
    for me too.

    so no excuses! xD

  5. #55
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,623
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Sorry...just for clarification , who got the quiz done first... lol jk. Can't wait for the answers.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  6. #56
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    i tried it for 15mins a couple of days ago, and i tried it today, if i tried it immediately, i would have gotten it sooner!

    but yea, first is first.

  7. #57
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,370
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Well done Yurikolovsky that works well Well done yet again.

  8. #58
    SitePoint Enthusiast fvsch's Avatar
    Join Date
    Apr 2009
    Location
    Lyon, France
    Posts
    64
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hmm... i might have a try at this. Though i don't really see the point of this less-than-sexy solution to the long table problem. :/

  9. #59
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,370
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by Florent V. View Post
    Hmm... i might have a try at this. Though i don't really see the point of this less-than-sexy solution to the long table problem. :/
    That's what most people who can't do it say

  10. #60
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,278
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    You mean, there's a sexier solution?

    Just heard someone on another forum wanted to do something like, have a container with two side-by-side tables... the left table isn't very long, and sets the height of the container. Meaning the right table, who does get quite long, is supposed to be scrolled. However the left table isn't a static height but can change, meaning the tables' container can't be a "set" height with overflow.

    I expect the solution to this quiz might maybe be part of the solution to this other one.

  11. #61
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,370
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by Stomme poes View Post

    Just heard someone on another forum wanted to do something like, have a container with two side-by-side tables... the left table isn't very long, and sets the height of the container. Meaning the right table, who does get quite long, is supposed to be scrolled. However the left table isn't a static height but can change, meaning the tables' container can't be a "set" height with overflow.
    You can do that quite easily for all browsers except IE6 like this.

    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">
    #outer {
        position:relative;
        width:800px;
        border:1px solid #000;
    }
    table {
        width:380px;
    }
    td, th {
        border:1px solid #000
    }
    .table2 {
        width:400px;
        position:absolute;
        right:0;
        top:0;
        bottom:0;
        overflow:auto;
    }
    </style>
    </head>
    <body>
    <h1>Table test</h1>
    <div id="outer">
        <table cellspacing="0" cellpadding="0">
            <tr>
                <th scope="col">Test1</th>
                <th scope="col">Test2</th>
                <th scope="col">Test3</th>
                <th scope="col">Test4</th>
            </tr>
            <tr>
                <td>data</td>
                <td>data</td>
                <td>data</td>
                <td>data</td>
            </tr>
            <tr>
                <td>data</td>
                <td>data</td>
                <td>data</td>
                <td>data</td>
            </tr>
            <tr>
                <td>data</td>
                <td>data</td>
                <td>data</td>
                <td>data</td>
            </tr>
            <tr>
                <td>data</td>
                <td>data</td>
                <td>data</td>
                <td>data</td>
            </tr>
            <tr>
                <td>data</td>
                <td>data</td>
                <td>data</td>
                <td>data</td>
            </tr>
            <tr>
                <td>data</td>
                <td>data</td>
                <td>data</td>
                <td>data</td>
            </tr>
        </table>
        <div class="table2">
            <table cellspacing="0" cellpadding="0">
                <tr>
                    <th scope="col">Test1</th>
                    <th scope="col">Test2</th>
                    <th scope="col">Test3</th>
                    <th scope="col">Test4</th>
                </tr>
                <tr>
                    <td>data</td>
                    <td>data</td>
                    <td>data</td>
                    <td>data</td>
                </tr>
                <tr>
                    <td>data</td>
                    <td>data</td>
                    <td>data</td>
                    <td>data</td>
                </tr>
                <tr>
                    <td>data</td>
                    <td>data</td>
                    <td>data</td>
                    <td>data</td>
                </tr>
                <tr>
                    <td>data</td>
                    <td>data</td>
                    <td>data</td>
                    <td>data</td>
                </tr>
                <tr>
                    <td>data</td>
                    <td>data</td>
                    <td>data</td>
                    <td>data</td>
                </tr>
                <tr>
                    <td>data</td>
                    <td>data</td>
                    <td>data</td>
                    <td>data</td>
                </tr>
                <tr>
                    <td>data</td>
                    <td>data</td>
                    <td>data</td>
                    <td>data</td>
                </tr>
                <tr>
                    <td>data</td>
                    <td>data</td>
                    <td>data</td>
                    <td>data</td>
                </tr>
                <tr>
                    <td>data</td>
                    <td>data</td>
                    <td>data</td>
                    <td>data</td>
                </tr>
                <tr>
                    <td>data</td>
                    <td>data</td>
                    <td>data</td>
                    <td>data</td>
                </tr>
                <tr>
                    <td>data</td>
                    <td>data</td>
                    <td>data</td>
                    <td>data</td>
                </tr>
                <tr>
                    <td>data</td>
                    <td>data</td>
                    <td>data</td>
                    <td>data</td>
                </tr>
            </table>
        </div>
    </div>
    </body>
    </html>
    You could (probably) even incorporate the fixed header from this quiz for the right table.

  12. #62
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,278
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    Yes they would want one, I think, otherwise scrolling a long table would become painful if the height isn't all that high.

    Why I'm sitting here waiting : )

  13. #63
    SitePoint Enthusiast fvsch's Avatar
    Join Date
    Apr 2009
    Location
    Lyon, France
    Posts
    64
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    That's what most people who can't do it say
    Well tried. Tonge-in-cheek provocation is an efficient way of drawing more participants in. But not good enough.

    I maintain that this isn't very interesting, as the end result is not really sexy. And by sexy i mean: decent usability. The main issue with the goal for this exercise is that the table ends up with a fixed height. Why would one want to restrict the available height to display lengthy content? This is the same mistake that websites with a smallish fixed height (like 400 or 500px) do, often in order to keep some header and navigation always visible; only this time it's for a substet of the content.

    I may be wrong, but i think an interesting solution to the long table issue would require scripting, as just using position:fixed is not flexible enough (provided it works for THEAD or TH elements, or the elements within a THEAD > TH).

  14. #64
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,623
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    I can tell you one reason I would like the header always there-in reallly long tables I would forget the columns, etc. It is always a little reminder. The purpose of this entire thing iss just to see if you can do it.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  15. #65
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    this quiz is more about understanding css than creating a table

  16. #66
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,370
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by Florent V. View Post
    Well tried. Tonge-in-cheek provocation is an efficient way of drawing more participants in. But not good enough.
    Oh well.... I tried my best

    I maintain that this isn't very interesting, as the end result is not really sexy. And by sexy i mean: decent usability. The main issue with the goal for this exercise is that the table ends up with a fixed height. Why would one want to restrict the available height to display lengthy content? .
    Actually it's an often requested function and one that has never been satisfactorily met by any the coders which is why I created it for the quiz.

    I can't bear looking at long tables and not knowing to what each column refers. Take this very common page for example where the table is virtually unusable unless you have more than 760px free vertical space on your monitor. Even then it is incredibly difficult to pinpoint which column the data belongs. This would be a cinch in my example and in my book that makes it pretty sexy (to borrow a phrase) .


    I may be wrong, but i think an interesting solution to the long table issue would require scripting, as just using position:fixed is not flexible enough (provided it works for THEAD or TH elements, or the elements within a THEAD > TH
    The solution to the quiz doesn't use position:fixed (No more clues)

    I dislike scripted solutions where the table header floats over the table and 99% of the time is a usability nightmare because it gets in the way of the data. Each to their own I suppose

    Anyway while I appreciate your comments the questions are really irrelevant because as I always state these quizzes are all about pushing the boundaries of css and about having some fun at the same time. In fact we have filed a number of bug reports in previous quizzes and unearthed hitherto unknown inconcistent behaviour in various browsers. This must be a plus for everyone.

    The quizzes don't necessarily have to have a day to day use as that is not the purpose of the quiz. In fact in some of the previous quizzes I explicitly say don't do this for real.

    However the techniques learned in the quizzes will stand you in good stead in the future especially when someone tells you "You can't do that with CSS"!

    Just take a look at the previous quizzes and you will see that impossible things have been solved and a lot of fun had at the same time.

    Remember the main aim is to have fun and to learn something at the same time.

  17. #67
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,623
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    When are answers to the quiz going to be given?
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

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

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

    Ok another so called "CSS can't do" bites the dust and it's time to reveal the solutions.

    Thanks to all those that took part (Tommy, Ryan, Ajaxdinesh, Yurikolovsky) and to all those that watched with interest.

    As I mentioned a number of times this is extremely easy to do in Firefox because you can just set tbody to scroll independently of the headers and footers and is as simple as providing a height and overflow:auto to the tbody element. Unfortunately no other browsers have implemented this so we have to abandon it for this quiz.

    As a matter of interest it is possible to have a similar effect in IE due to a bug where elements with position:relative applied become fixed inside an element that has overflow:auto/scroll set. This means a fixed table header can easily b emade to work in IE also as this very old demo shows.

    Some of you tried initially to use fixed positioning and although this can work to a degree it will not work once the viewport has scrolled because fixed elements are always placed in relation to the viewport and the header would stay in place long after the table had scrolled away.

    The solution involves absolutely placing the content in the table head above the actual table itself by creating a stacking context on a parent element and moving the table head content into some reserved space above the table.

    As long as we are repeating the table head data on the table footer then the cells will be sized correctly even if we have absolutely removed the content from the head.

    As we can't absolutely position a th element then an inner element was nested (p element) inside the "th" element and that inner p element instead was pushed above the table.

    The table itself can't scroll so another wrapper is used around the table and that is the element that carries the scrollbar and will scroll the table within it.

    The rest is just minor details and tidying up.

    Here is a live example.

    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 0 1em}
    table p {margin :0}
    .wrap {
        margin:50px 0 0 2%;
        width:95%;
        float:left;
        position:relative;
        height:200px;
        overflow:hidden;
        padding:25px 0 0;
        background:#fffccc;
        border:1px solid #000;
    }
    .inner {
        width:100%;
        height:200px;
        overflow:auto;
    }
    table {
        width:100%;
        margin:0 0 0 -1px;
        border-collapse:collapse;
    }
    td {
        padding:5px;
        border:1px solid #000;
        text-align:center;
        background:yellow;
    }
    tfoot th, thead th {
        font-weight:bold;
        text-align:left;
        border:1px solid #000;
        padding:0 3px 0 5px;
        background:#ffffcc;
    }
    thead th {border:none;}
    thead tr p {
        position:absolute;
        top:0;
    }
    .last {
        padding-right:15px!important;
    }
    </style>
    <!--[if lte IE 7]>
    <style type="text/css">
    .inner {overflow-x:hidden}
    
    </style>
    <![endif]-->
    
    </head>
    
    
    <body>
    <h1>Table with fixed header in IE6 - 8, Firefox 2.+, Safari 3 and Opera 9.5+</h1>
    <p>Notes: The header is part of the same table and not a separate table on top. The width of the table cells or header cells is not defined and will match whatever content is in the cells. The table can be a fluid length and will resize within reasonable limits accordingly.</p>
    <div class="wrap">
        <div class="inner">
            <table id="data" cellspacing="0" cellpadding="0">
                <thead>
                    <tr>
                        <th><p>Jan</p></th>
                        <th><p>Feb</p></th>
                        <th><p>Mar</p></th>
                        <th><p>Apr</p></th>
                        <th><p>May</p></th>
                        <th><p>Jun</p></th>
                        <th><p>Jul</p></th>
                        <th><p>Aug</p></th>
                        <th><p>September</p></th>
                        <th><p>Oct</p></th>
                        <th><p>Nov</p></th>
                        <th class="last"><p>Dec</p></th>
                    </tr>
                </thead>
                <tfoot>
                    <tr>
                        <th><p>Jan</p></th>
                        <th><p>Feb</p></th>
                        <th><p>Mar</p></th>
                        <th><p>Apr</p></th>
                        <th><p>May</p></th>
                        <th><p>Jun</p></th>
                        <th><p>Jul</p></th>
                        <th><p>Aug</p></th>
                        <th><p>September</p></th>
                        <th><p>Oct</p></th>
                        <th><p>Nov</p></th>
                        <th class="last"><p>Dec</p></th>
                    </tr>
                </tfoot>
                <tbody>
                    <tr>
                        <td>1</td>
                        <td>3</td>
                        <td>5</td>
                        <td>1</td>
                        <td>1</td>
                        <td>3</td>
                        <td>1</td>
                        <td>5</td>
                        <td>7</td>
                        <td>1</td>
                        <td>1</td>
                        <td class="last">3</td>
                    </tr>
                    <tr>
                        <td>1</td>
                        <td>3</td>
                        <td>5</td>
                        <td>1</td>
                        <td>1</td>
                        <td>3</td>
                        <td>1</td>
                        <td>1</td>
                        <td>1</td>
                        <td>3 more data</td>
                        <td>5</td>
                        <td class="last">7</td>
                    </tr>
                    <tr>
                        <td>2</td>
                        <td>4</td>
                        <td>6</td>
                        <td>1</td>
                        <td>1</td>
                        <td>3</td>
                        <td>1</td>
                        <td>23</td>
                        <td>4</td>
                        <td>1</td>
                        <td>6</td>
                        <td class="last">6</td>
                    </tr>
                    <tr>
                        <td>1</td>
                        <td>1</td>
                        <td>6</td>
                        <td>1</td>
                        <td>4</td>
                        <td>7</td>
                        <td>1</td>
                        <td>7</td>
                        <td>1</td>
                        <td>1</td>
                        <td>3</td>
                        <td class="last">6</td>
                    </tr>
                    <tr>
                        <td>2</td>
                        <td>3 with more data</td>
                        <td>2</td>
                        <td>3</td>
                        <td>3</td>
                        <td>3</td>
                        <td>8</td>
                        <td>1</td>
                        <td>1</td>
                        <td>2</td>
                        <td>8</td>
                        <td class="last">6</td>
                    </tr>
                    <tr>
                        <td>6</td>
                        <td>4</td>
                        <td>4</td>
                        <td>4</td>
                        <td>2</td>
                        <td>9</td>
                        <td>4</td>
                        <td>4</td>
                        <td>6</td>
                        <td>1</td>
                        <td>1</td>
                        <td class="last">3</td>
                    </tr>
                    <tr>
                        <td>1</td>
                        <td>1</td>
                        <td>3</td>
                        <td>7</td>
                        <td>4</td>
                        <td>5</td>
                        <td>5</td>
                        <td>2</td>
                        <td>0</td>
                        <td>3</td>
                        <td>23</td>
                        <td class="last">6</td>
                    </tr>
                    <tr>
                        <td>7</td>
                        <td>4</td>
                        <td>2</td>
                        <td>67</td>
                        <td>2</td>
                        <td>1</td>
                        <td>1</td>
                        <td>3</td>
                        <td>1</td>
                        <td>4</td>
                        <td>4</td>
                        <td class="last">4</td>
                    </tr>
                    <tr>
                        <td>2</td>
                        <td>4</td>
                        <td>3</td>
                        <td>1</td>
                        <td>1</td>
                        <td>1</td>
                        <td>3</td>
                        <td>2</td>
                        <td>2</td>
                        <td>5</td>
                        <td>65</td>
                        <td class="last">4</td>
                    </tr>
                    <tr>
                        <td>2</td>
                        <td>4</td>
                        <td>4</td>
                        <td>1</td>
                        <td>2</td>
                        <td>13</td>
                        <td>6</td>
                        <td>1</td>
                        <td>1</td>
                        <td>3</td>
                        <td>7</td>
                        <td class="last">4</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
    </body>
    </html>
    Winners

    The winner of this quiz is Yurikolovsky with Tommy coming a close second and Ryan in third place. Ajaxdinesh was fourth due to the layout only working properly in Firefox.

    Here are their solutions.

    Yurikolovsky
    (used 3 ie hacks instead of the 2 allowed)
    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>YuriKolovsky - CSS Quiz 22 - Scrolling Tables</title>
    <style type="text/css">
    * {
        padding:0;
        margin:0;
    }
     
    h1 {margin:0.2em 0.2em 0;}
    p {margin:0.5em 0.5em 1em;}
    table p {margin :0}
    table {
        width:100%;/*inconsistent across all browsers?*/
        /*border-collapse:collapse;/*causes weird bugs*/
    }
    td {
        text-align:center;
        background:#FC6;
    }
    th {
        font-weight:bold;
        text-align:left;
    }
     
     
     
    /*added stuff*/
    .container {
        position:relative;
        padding:1.3em 0 0 0;/*compensation for top bottom header footer*/
        width:99%;/*this has to be the same as below*/
        background:#ffffcc;
        margin:0 auto;
    }
    .scroll {
        overflow:auto;
        overflow-x:hidden;
        height:9.6em;
    }
     
    .container thead tr {/*this keeps header at top*/
        position:absolute;
        top:0;
    }
     
    .container th, .container td {/*makes table aestetically pleasing*/
        width:100em; /*this should hold em*/
    }
     
     
    td {
        border-right:1px solid #000;
        border-top:1px solid #000;
    }
    th {
        border-right:1px solid #000;
    }
    .container thead th {
        border:0;
    }
    .container thead th.last {
        border-right:18px solid #ffffcc;
    }
    .container tfoot th {
        border-top:1px solid #000; 
    }
    .container {
        border:solid #000 1px; 
    }
     
    </style>
    <!--[if lte IE 7]>
    <style type="text/css">
    .container {
    width:99%;/*this has to be the same as above*/
    }
    .container thead th.last {
    border-right:0;
    }
    table {
    width:auto;/*if this is 100% it causes scrollbar to dissapear in ie7*/
    }
    </style>
    <![endif]-->
     
    </head>
    <body>
    <h1>Table with fixed header in IE6 - 8, Firefox 2.+, Safari 3 and Opera 9.5+</h1>
    <p>Notes: The header is part of the same table and not a separate table on top. The width of the table cells or header cells is not defined and will match whatever content is in the cells. The table can be a fluid length and will resize within reasonable limits accordingly.</p>
    <div class="container">
    <div class="scroll">
        <table id="data" cellspacing="0" cellpadding="0">
          <thead>
            <tr>
                <th><p>Jan</p></th>
                <th><p>Feb</p></th>
                <th><p>Mar</p></th>
                <th><p>Apr</p></th>
                <th><p>May</p></th>
                <th><p>Jun</p></th>
                <th><p>Jul</p></th>
                <th><p>Aug</p></th>
                <th><p>September</p></th>
                <th><p>Oct</p></th>
                <th><p>Nov</p></th>
                <th class="last"><p>Dec</p></th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <th><p>Jan</p></th>
                <th><p>Feb</p></th>
                <th><p>Mar</p></th>
                <th><p>Apr</p></th>
                <th><p>May</p></th>
                <th><p>Jun</p></th>
                <th><p>Jul</p></th>
                <th><p>Aug</p></th>
                <th><p>September</p></th>
                <th><p>Oct</p></th>
                <th><p>Nov</p></th>
                <th class="last"><p>Dec</p></th>
            </tr>
        </tfoot>
          <tbody>
            <tr>
                <td>1</td>
                <td>3</td>
                <td>5</td>
                <td>1</td>
                <td>1</td>
                <td>3</td>
                <td>1</td>
                <td>5</td>
                <td>7</td>
                <td>1</td>
                <td>1</td>
                <td class="last">3</td>
            </tr>
            <tr>
                <td>1</td>
                <td>3</td>
                <td>5</td>
                <td>1</td>
                <td>1</td>
                <td>3</td>
                <td>1</td>
                <td>1</td>
                <td>1</td>
                <td>3 more data</td>
                <td>5</td>
                <td class="last">7</td>
            </tr>
            <tr>
                <td>2</td>
                <td>4</td>
                <td>6</td>
                <td>1</td>
                <td>1</td>
                <td>3</td>
                <td>1</td>
                <td>23</td>
                <td>4</td>
                <td>1</td>
                <td>6</td>
                <td class="last">6</td>
            </tr>
            <tr>
                <td>1</td>
                <td>1</td>
                <td>6</td>
                <td>1</td>
                <td>4</td>
                <td>7</td>
                <td>1</td>
                <td>7</td>
                <td>1</td>
                <td>1</td>
                <td>3</td>
                <td class="last">6</td>
            </tr>
            <tr>
                <td>2</td>
                <td>3 with more data</td>
                <td>2</td>
                <td>3</td>
                <td>3</td>
                <td>3</td>
                <td>8</td>
                <td>1</td>
                <td>1</td>
                <td>2</td>
                <td>8</td>
                <td class="last">6</td>
            </tr>
            <tr>
                <td>6</td>
                <td>4</td>
                <td>4</td>
                <td>4</td>
                <td>2</td>
                <td>9</td>
                <td>4</td>
                <td>4</td>
                <td>6</td>
                <td>1</td>
                <td>1</td>
                <td class="last">3</td>
            </tr>
            <tr>
                <td>1</td>
                <td>1</td>
                <td>3</td>
                <td>7</td>
                <td>4</td>
                <td>5</td>
                <td>5</td>
                <td>2</td>
                <td>0</td>
                <td>3</td>
                <td>23</td>
                <td class="last">6</td>
            </tr>
            <tr>
                <td>7</td>
                <td>4</td>
                <td>2</td>
                <td>67</td>
                <td>2</td>
                <td>1</td>
                <td>1</td>
                <td>3</td>
                <td>1</td>
                <td>4</td>
                <td>4</td>
                <td class="last">4</td>
            </tr>
            <tr>
                <td>2</td>
                <td>4</td>
                <td>3</td>
                <td>1</td>
                <td>1</td>
                <td>1</td>
                <td>3</td>
                <td>2</td>
                <td>2</td>
                <td>5</td>
                <td>65</td>
                <td class="last">4</td>
            </tr>
            <tr>
                <td>2</td>
                <td>4</td>
                <td>4</td>
                <td>1</td>
                <td>2</td>
                <td>13</td>
                <td>6</td>
                <td>1</td>
                <td>1</td>
                <td>3</td>
                <td>7</td>
                <td class="last">4</td>
            </tr>
        </tbody>
    </table>
    </div>
    </div>
    </body>
    </html>

    Tommy (scroll bar on page in IE)

    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 0 1em}
    table p {margin :0}
    table {
        width:100%;
        border-collapse:collapse;
    }
    td {
        border:1px solid #000;
        text-align:center;
        background:yellow;
    }
    th {
        font-weight:bold;
        border:1px solid #000;
        background:#ffffcc;
            text-align:left
    }
    .scrolled-table {
      position:relative;
      width:100%;
      padding-top:1.5em;
      background:#ffc;
      border:1px solid #000;
    }
    .scrolled-table-inner {
      width:100%;
      height:9em;
      overflow:auto;
    }
    .scrolled-table thead th {
      border:none;
    }
    .scrolled-table thead p {
      position:absolute;
      top:0;
    }
    </style>
    <!--[if lte IE 7]>
    <style type="text/css">
    .scrolled-table-inner {
      width:auto;
      overflow-y:scroll;
      overflow-x:hidden;
    }
    *+html .scrolled-table-inner {
      padding-right:18px;
    }
    </style>
    <![endif]-->
    </head>
    <body>
    <h1>Table with fixed header in IE6 - 8, Firefox 2.+, Safari 3 and Opera 9.5+</h1>
    <p>Notes: The header is part of the same table and not a separate table on top. The width of the table cells or header cells is not defined and will match whatever content is in the cells. The table can be a fluid length and will resize within reasonable limits accordingly.</p>
    <div class="scrolled-table">
    <div class="scrolled-table-inner">
    <table id="data" cellspacing="0" cellpadding="0">
        <thead>
            <tr>
                <th><p>Jan</p></th>
                <th><p>Feb</p></th>
                <th><p>Mar</p></th>
                <th><p>Apr</p></th>
                <th><p>May</p></th>
                <th><p>Jun</p></th>
                <th><p>Jul</p></th>
                <th><p>Aug</p></th>
                <th><p>September</p></th>
                <th><p>Oct</p></th>
                <th><p>Nov</p></th>
                <th class="last"><p>Dec</p></th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <th><p>Jan</p></th>
                <th><p>Feb</p></th>
                <th><p>Mar</p></th>
                <th><p>Apr</p></th>
                <th><p>May</p></th>
                <th><p>Jun</p></th>
                <th><p>Jul</p></th>
                <th><p>Aug</p></th>
                <th><p>September</p></th>
                <th><p>Oct</p></th>
                <th><p>Nov</p></th>
                <th class="last"><p>Dec</p></th>
            </tr>
        </tfoot>
        <tbody>
            <tr>
                <td>1</td>
                <td>3</td>
                <td>5</td>
                <td>1</td>
                <td>1</td>
                <td>3</td>
                <td>1</td>
                <td>5</td>
                <td>7</td>
                <td>1</td>
                <td>1</td>
                <td class="last">3</td>
            </tr>
            <tr>
                <td>1</td>
                <td>3</td>
                <td>5</td>
                <td>1</td>
                <td>1</td>
                <td>3</td>
                <td>1</td>
                <td>1</td>
                <td>1</td>
                <td>3 more data</td>
                <td>5</td>
                <td class="last">7</td>
            </tr>
            <tr>
                <td>2</td>
                <td>4</td>
                <td>6</td>
                <td>1</td>
                <td>1</td>
                <td>3</td>
                <td>1</td>
                <td>23</td>
                <td>4</td>
                <td>1</td>
                <td>6</td>
                <td class="last">6</td>
            </tr>
            <tr>
                <td>1</td>
                <td>1</td>
                <td>6</td>
                <td>1</td>
                <td>4</td>
                <td>7</td>
                <td>1</td>
                <td>7</td>
                <td>1</td>
                <td>1</td>
                <td>3</td>
                <td class="last">6</td>
            </tr>
            <tr>
                <td>2</td>
                <td>3 with more data</td>
                <td>2</td>
                <td>3</td>
                <td>3</td>
                <td>3</td>
                <td>8</td>
                <td>1</td>
                <td>1</td>
                <td>2</td>
                <td>8</td>
                <td class="last">6</td>
            </tr>
            <tr>
                <td>6</td>
                <td>4</td>
                <td>4</td>
                <td>4</td>
                <td>2</td>
                <td>9</td>
                <td>4</td>
                <td>4</td>
                <td>6</td>
                <td>1</td>
                <td>1</td>
                <td class="last">3</td>
            </tr>
            <tr>
                <td>1</td>
                <td>1</td>
                <td>3</td>
                <td>7</td>
                <td>4</td>
                <td>5</td>
                <td>5</td>
                <td>2</td>
                <td>0</td>
                <td>3</td>
                <td>23</td>
                <td class="last">6</td>
            </tr>
            <tr>
                <td>7</td>
                <td>4</td>
                <td>2</td>
                <td>67</td>
                <td>2</td>
                <td>1</td>
                <td>1</td>
                <td>3</td>
                <td>1</td>
                <td>4</td>
                <td>4</td>
                <td class="last">4</td>
            </tr>
            <tr>
                <td>2</td>
                <td>4</td>
                <td>3</td>
                <td>1</td>
                <td>1</td>
                <td>1</td>
                <td>3</td>
                <td>2</td>
                <td>2</td>
                <td>5</td>
                <td>65</td>
                <td class="last">4</td>
            </tr>
            <tr>
                <td>2</td>
                <td>4</td>
                <td>4</td>
                <td>1</td>
                <td>2</td>
                <td>13</td>
                <td>6</td>
                <td>1</td>
                <td>1</td>
                <td>3</td>
                <td>7</td>
                <td class="last">4</td>
            </tr>
        </tbody>
    </table>
    </div>
    </div>
    </body>
    </html>
    Ryan (table headers are not stretching columns though).

    Code:
    <!doctype html>
    <html>
    <head>
    <title>quiz</title>
    <style>
    div.tableContainer
    {
    
    border: 1px solid #963;
    
    height: 315px;
    
    float:left;
    overflow:hidden;
    }
    
    div.tableContainer table
    {
    
    float: left;/*shrink to fit*/
    }
    thead.fixed tr
    {
    /*only the head can have position relative. IE6 glitch*/
    
    }
    html>body .fixed tr
    {
    
    display: block
    }
    html>body .fixed tr th
    {width:1000px;}
    .fixed th
    {
    background: #ffffcc;
    padding: 4px 3px;
    text-align: left
    }
    html>body tbody.scrollContent
    {
    
    display: block;
    
    height: 262px;
    
    overflow-y:scroll;
    overflow-x:hidden;
    
    width: 100%
    }
    tbody.scrollContent *
    {
    height:auto;
    }
    tbody.scrollContent td, tbody.scrollContent tr td
    {
    
    background: yellow;
    padding: 2px 3px 3px 4px
    }
    </style>
    <!--[if IE]>
    <style>
    div.tableContainer
    {
        overflow-y:scroll;
    }
    .iefix
    {
        position:relative;
        z-index:0
    }
    </style>
    <![endif]-->
    </head>
    <body>
    <div class="tableContainer">
    <table cellpadding="0" cellspacing="0" class="scrollTable">
    <thead class="fixed">
    <tr class="iefix">
    <th>Jan</th>
    <th>Feb</th>
    <th>Mar</th>
    <th>Apr</th>
    <th>May</th>
    <th>Jun</th>
    <th>Jul</th>
    <th>Aug</th>
    <th>Sep</th>
    <th>Oct</th>
    <th>Nov</th>
    <th>Dec</th>
    </tr>
    </thead>
    <tfoot class="fixed">
    <tr>
    <th>Jan</th>
    <th>Feb</th>
    <th>Mar</th>
    <th>Apr</th>
    <th>May</th>
    <th>Jun</th>
    <th>Jul</th>
    <th>Aug</th>
    <th>Sep</th>
    <th>Oct</th>
    <th>Nov</th>
    <th>Dec</th>
    </tr>
    </tfoot>
    <tbody class="scrollContent">
    <tr>
    <td>Cell Content 1</td>
    <td>Cell Content 2</td>
    <td>Cell Content 3</td>
    <td>Cell Content 1</td>
    <td>Cell Content 2</td>
    <td>Cell Content 3</td>
    <td>Cell Content 1</td>
    <td>Cell Content 2</td>
    <td>Cell Content 3</td>
    <td>Cell Content 1</td>
    <td>Cell Content 2</td>
    <td>Cell Content 3</td>
    </tr>
    <tr>
    
    <td>More Cell Content 1</td>
    <td>More Cell Content 2</td>
    <td>More Cell Content 3</td>
    <td>More Cell Content 1</td>
    <td>More Cell Content 2</td>
    <td>More Cell Content 3</td>
    <td>More Cell Content 1</td>
    <td>More Cell Content 2</td>
    <td>More Cell Content 3</td>
    <td>More Cell Content 1</td>
    <td>More Cell Content 2</td>
    <td>More Cell Content 3</td>
    </tr>
    <tr>
    <td>Even More Cell Content 1</td>
    <td>Even More Cell Content 2</td>
    <td>Even More Cell Content 3</td>
    <td>Even More Cell Content 1</td>
    <td>Even More Cell Content 2</td>
    <td>Even More Cell Content 3</td>
    <td>Even More Cell Content 1</td>
    <td>Even More Cell Content 2</td>
    <td>Even More Cell Content 3</td>
    <td>Even More Cell Content 1</td>
    <td>Even More Cell Content 2</td>
    <td>Even More Cell Content 3</td>
    </tr>
    <tr>
    <td>And Repeat 1</td>
    <td>And Repeat 2</td>
    <td>And Repeat 3</td>
    <td>And Repeat 1</td>
    <td>And Repeat 2</td>
    <td>And Repeat 3</td>
    <td>And Repeat 1</td>
    <td>And Repeat 2</td>
    <td>And Repeat 3</td>
    <td>And Repeat 1</td>
    <td>And Repeat 2</td>
    <td>And Repeat 3</td>
    </tr>
    <tr>
    <td>Cell Content 1</td>
    <td>Cell Content 2</td>
    <td>Cell Content 3</td>
    <td>Cell Content 1</td>
    <td>Cell Content 2</td>
    <td>Cell Content 3</td>
    <td>Cell Content 1</td>
    <td>Cell Content 2</td>
    <td>Cell Content 3</td>
    <td>Cell Content 1</td>
    <td>Cell Content 2</td>
    <td>Cell Content 3</td>
    </tr>
    <tr>
    <td>More Cell Content 1</td>
    <td>More Cell Content 2</td>
    <td>More Cell Content 3</td>
    <td>More Cell Content 1</td>
    <td>More Cell Content 2</td>
    <td>More Cell Content 3</td>
    <td>More Cell Content 1</td>
    <td>More Cell Content 2</td>
    <td>More Cell Content 3</td>
    <td>More Cell Content 1</td>
    <td>More Cell Content 2</td>
    <td>More Cell Content 3</td>
    </tr>
    <tr>
    <td>Cell Content 1</td>
    <td>Cell Content 2</td>
    <td>Cell Content 3</td>
    <td>Cell Content 1</td>
    <td>Cell Content 2</td>
    <td>Cell Content 3</td>
    <td>Cell Content 1</td>
    <td>Cell Content 2</td>
    <td>Cell Content 3</td>
    <td>Cell Content 1</td>
    <td>Cell Content 2</td>
    <td>Cell Content 3</td>
    </tr>
    <tr>
    <td>More Cell Content 1</td>
    <td>More Cell Content 2</td>
    <td>More Cell Content 3</td>
    <td>More Cell Content 1</td>
    <td>More Cell Content 2</td>
    <td>More Cell Content 3</td>
    <td>More Cell Content 1</td>
    <td>More Cell Content 2</td>
    <td>More Cell Content 3</td>
    <td>More Cell Content 1</td>
    <td>More Cell Content 2</td>
    <td>More Cell Content 3</td>
    </tr>
    <tr>
    <td>Even More Cell Content 1</td>
    <td>Even More Cell Content 2</td>
    <td>Even More Cell Content 3</td>
    <td>Even More Cell Content 1</td>
    <td>Even More Cell Content 2</td>
    <td>Even More Cell Content 3</td>
    <td>Even More Cell Content 1</td>
    <td>Even More Cell Content 2</td>
    <td>Even More Cell Content 3</td>
    <td>Even More Cell Content 1</td>
    <td>Even More Cell Content 2</td>
    <td>Even More Cell Content 3</td>
    </tr>
    <tr>
    <td>And Repeat 1</td>
    <td>And Repeat 2</td>
    <td>And Repeat 3</td>
    <td>And Repeat 1</td>
    <td>And Repeat 2</td>
    <td>And Repeat 3</td>
    <td>And Repeat 1</td>
    <td>And Repeat 2</td>
    <td>And Repeat 3</td>
    <td>And Repeat 1</td>
    <td>And Repeat 2</td>
    <td>And Repeat 3</td>
    </tr>
    <tr>
    <td>Cell Content 1</td>
    <td>Cell Content 2</td>
    <td>Cell Content 3</td>
    <td>Cell Content 1</td>
    <td>Cell Content 2</td>
    <td>Cell Content 3</td>
    <td>Cell Content 1</td>
    <td>Cell Content 2</td>
    <td>Cell Content 3</td>
    <td>Cell Content 1</td>
    <td>Cell Content 2</td>
    <td>Cell Content 3</td>
    </tr>
    <tr>
    <td>Even More Cell Content 1</td>
    <td>Even More Cell Content 2</td>
    <td>Even More Cell Content 3</td>
    <td>Even More Cell Content 1</td>
    <td>Even More Cell Content 2</td>
    <td>Even More Cell Content 3</td>
    <td>Even More Cell Content 1</td>
    <td>Even More Cell Content 2</td>
    <td>Even More Cell Content 3</td>
    <td>Even More Cell Content 1</td>
    <td>Even More Cell Content 2</td>
    <td>Even More Cell Content 3</td>
    </tr>
    <tr>
    <td>End of Cell Content 1</td>
    <td>End of Cell Content 2</td>
    <td>End of Cell Content 3</td>
    <td>End of Cell Content 1</td>
    <td>End of Cell Content 2</td>
    <td>End of Cell Content 3</td>
    <td>End of Cell Content 1</td>
    <td>End of Cell Content 2</td>
    <td>End of Cell Content 3</td>
    <td>End of Cell Content 1</td>
    <td>End of Cell Content 2</td>
    <td>End of Cell Content 3</td>
    </tr>
    </tbody>
    </table>
    </div>
    
    </body></html>

    That wraps the quiz up and hope you have enjoyed it and earned something along the way.

    Look out for the next quiz which I will post on Monday morning or later tonight.

  20. #70
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,623
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Tommy why did you not just remove the scrollbars? It takes no time at all
    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">
    *{margin:0;padding:0;}
    p {margin:0 0 1em}
    table p {margin :0}
    table {
        width:100&#37;;
        border-collapse:collapse;
    }
    td {
        border:1px solid #000;
        text-align:center;
        background:yellow;
    }
    th {
        font-weight:bold;
        border:1px solid #000;
        background:#ffffcc;
            text-align:left
    }
    .scrolled-table {
      position:relative;
      padding-top:1.5em;
      background:#ffc;
      border:1px solid #000
    }
    .scrolled-table-inner {
      width:100%;
      height:9em;
      overflow-y:scroll;
    overflow-x:hidden;
    }
    .scrolled-table thead th {
      border:none;
    }
    .scrolled-table thead p {
      position:absolute;
      top:0;
    }
    </style>
    <!--[if lte IE 7]>
    <style type="text/css">
    .scrolled-table-inner {
      width:auto;
      overflow-y:scroll;
      overflow-x:hidden;
    }
    *+html .scrolled-table-inner {
      padding-right:18px;
    }
    </style>
    <![endif]-->
    </head>
    <body>
    <h1>Table with fixed header in IE6 - 8, Firefox 2.+, Safari 3 and Opera 9.5+</h1>
    <p>Notes: The header is part of the same table and not a separate table on top. The 
    
    width of the table cells or header cells is not defined and will match whatever content 
    
    is in the cells. The table can be a fluid length and will resize within reasonable 
    
    limits accordingly.</p>
    <div class="scrolled-table">
    <div class="scrolled-table-inner">
    <table id="data" cellspacing="0" cellpadding="0">
        <thead>
            <tr>
                <th><p>Jan</p></th>
                <th><p>Feb</p></th>
                <th><p>Mar</p></th>
                <th><p>Apr</p></th>
                <th><p>May</p></th>
                <th><p>Jun</p></th>
                <th><p>Jul</p></th>
                <th><p>Aug</p></th>
                <th><p>September</p></th>
                <th><p>Oct</p></th>
                <th><p>Nov</p></th>
                <th class="last"><p>Dec</p></th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <th><p>Jan</p></th>
                <th><p>Feb</p></th>
                <th><p>Mar</p></th>
                <th><p>Apr</p></th>
                <th><p>May</p></th>
                <th><p>Jun</p></th>
                <th><p>Jul</p></th>
                <th><p>Aug</p></th>
                <th><p>September</p></th>
                <th><p>Oct</p></th>
                <th><p>Nov</p></th>
                <th class="last"><p>Dec</p></th>
            </tr>
        </tfoot>
        <tbody>
            <tr>
                <td>1</td>
                <td>3</td>
                <td>5</td>
                <td>1</td>
                <td>1</td>
                <td>3</td>
                <td>1</td>
                <td>5</td>
                <td>7</td>
                <td>1</td>
                <td>1</td>
                <td class="last">3</td>
            </tr>
            <tr>
                <td>1</td>
                <td>3</td>
                <td>5</td>
                <td>1</td>
                <td>1</td>
                <td>3</td>
                <td>1</td>
                <td>1</td>
                <td>1</td>
                <td>3 more data</td>
                <td>5</td>
                <td class="last">7</td>
            </tr>
            <tr>
                <td>2</td>
                <td>4</td>
                <td>6</td>
                <td>1</td>
                <td>1</td>
                <td>3</td>
                <td>1</td>
                <td>23</td>
                <td>4</td>
                <td>1</td>
                <td>6</td>
                <td class="last">6</td>
            </tr>
            <tr>
                <td>1</td>
                <td>1</td>
                <td>6</td>
                <td>1</td>
                <td>4</td>
                <td>7</td>
                <td>1</td>
                <td>7</td>
                <td>1</td>
                <td>1</td>
                <td>3</td>
                <td class="last">6</td>
            </tr>
            <tr>
                <td>2</td>
                <td>3 with more data</td>
                <td>2</td>
                <td>3</td>
                <td>3</td>
                <td>3</td>
                <td>8</td>
                <td>1</td>
                <td>1</td>
                <td>2</td>
                <td>8</td>
                <td class="last">6</td>
            </tr>
            <tr>
                <td>6</td>
                <td>4</td>
                <td>4</td>
                <td>4</td>
                <td>2</td>
                <td>9</td>
                <td>4</td>
                <td>4</td>
                <td>6</td>
                <td>1</td>
                <td>1</td>
                <td class="last">3</td>
            </tr>
            <tr>
                <td>1</td>
                <td>1</td>
                <td>3</td>
                <td>7</td>
                <td>4</td>
                <td>5</td>
                <td>5</td>
                <td>2</td>
                <td>0</td>
                <td>3</td>
                <td>23</td>
                <td class="last">6</td>
            </tr>
            <tr>
                <td>7</td>
                <td>4</td>
                <td>2</td>
                <td>67</td>
                <td>2</td>
                <td>1</td>
                <td>1</td>
                <td>3</td>
                <td>1</td>
                <td>4</td>
                <td>4</td>
                <td class="last">4</td>
            </tr>
            <tr>
                <td>2</td>
                <td>4</td>
                <td>3</td>
                <td>1</td>
                <td>1</td>
                <td>1</td>
                <td>3</td>
                <td>2</td>
                <td>2</td>
                <td>5</td>
                <td>65</td>
                <td class="last">4</td>
            </tr>
            <tr>
                <td>2</td>
                <td>4</td>
                <td>4</td>
                <td>1</td>
                <td>2</td>
                <td>13</td>
                <td>6</td>
                <td>1</td>
                <td>1</td>
                <td>3</td>
                <td>7</td>
                <td class="last">4</td>
            </tr>
        </tbody>
    </table>
    </div>
    </div>
    </body>
    </html>
    Or have you just not had time?

    Next quiz time?

    Edit: Lol someone deleted hte post I was about to...sneaky..
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  21. #71
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by RyanReese View Post
    Tommy why did you not just remove the scrollbars?
    I just wanted to see if this quiz was as hard as it seemed, since there were no submissions yet. I didn't really have time, but I spent 10 or 15 minutes on it and had something that was close enough. I knew the remaining quirks could be ironed out, but I had to get back to work, so I submitted it to get things started.
    Birnam wood is come to Dunsinane

  22. #72
    SitePoint Zealot ajaxdinesh's Avatar
    Join Date
    Apr 2009
    Location
    India
    Posts
    137
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question

    we can't fix the footer?
    Cheers,
    Dinesh

  23. #73
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    wow, hahah, i did not expect to win, but YAY nevertheless

    p.s. i did not alter the html too much, i could have removed the class="last" in the td's because i did not use it.
    (and the 3rd hack is for visual purposes only!)


    ajaxdinesh
    we can't fix the footer?
    We CAN! and its easy


    Code CSS:
    .container tfoot tr {/*this keeps footer at bottom*/
        position:absolute;
        bottom:0;
    }
    .container {
    	padding-bottom:1.3em;	
    }


    this is just from the top of my head, but should work.

  24. #74
    SitePoint Zealot ajaxdinesh's Avatar
    Join Date
    Apr 2009
    Location
    India
    Posts
    137
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by YuriKolovsky View Post
    wow, hahah, i did not expect to win, but YAY nevertheless

    p.s. i did not alter the html too much, i could have removed the class="last" in the td's because i did not use it.
    (and the 3rd hack is for visual purposes only!)



    We CAN! and its easy


    Code CSS:
    .container tfoot tr {/*this keeps footer at bottom*/
        position:absolute;
        bottom:0;
    }
    .container {
    	padding-bottom:1.3em;	
    }


    this is just from the top of my head, but should work.
    Hi,

    I checked this code in safari 3.0.3. Some gap in header and footer but that gap is not come in other browsers.
    Attached Images Attached Images
    Cheers,
    Dinesh

  25. #75
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ajaxdinesh View Post
    Hi,

    I checked this code in safari 3.0.3. Some gap in header and footer but that gap is not come in other browsers.
    i dont have safari 3.03 (i use safari 4, and i cant install v303 because of this)
    and according to the internet Safari 3.0.3 is a Beta.

    it looks like it repeats the padding 2 times.

    edit:
    i posted a possibly better version (its on page 4 of this thread)


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
  •