SitePoint Sponsor

User Tag List

Page 3 of 3 FirstFirst 123
Results 51 to 61 of 61
  1. #51
    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

    Thanks to all that took part and thanks to Ray for the idea and code for the first quiz.

    Both quizzes caused a lot of debate and I hope at least you learned something new or had some fun fiddling around with the code

    Quiz 1:
    All the following got the answer to quiz 1 correct:

    Kohoutek, noonnope, dresden_phoenix, raffles, ericWatson, scallioxtx

    Well done to all the above but the winner has to be Maleika (Kohoutek) as her entry was correct and the first received.

    The solution as Ray intimated at the start was simply to add two lines of code to the .nav element as follows.

    display: table;
    width:100%;


    or:

    display:inline-table;
    width:100%;


    Both will work.

    The reason that this fixes the whitespace bug is down to the rules contained in the specs for table elements here.

    As I understand it the method works because the browser has to construct anonymous elements to make the table complete and so in effect it constructs anonymous table-rows and anonymous table cells around the inline-blocks. I believe its rule 5 here that specifically kills the whitespace in this structure as white text nodes are explicitly set to display:none in this structure.

    Here's the full code from Maleika's entry.
    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">
    
    <title>CSS Quiz #35: Fix The Webkit Inline-Block + Word-Spacing Bug</title>
    
    <style type="text/css">
    h1,p {
        margin:0 0 .5em;
        font:bold 1.5em/1.5 arial;
        text-align:center;
    }
    p {font:bold 1em/1.3 arial;}
    
    /*=== UL Parent Rules ===*/
    .nav  {
        text-align:center; /* DO NOT ALTER RULE */   
        word-spacing:-1em; /* DO NOT ALTER RULE */ 
        
        /* EDIT and ADD rules below as you choose! */
        margin:1em 0 0;
        padding:.25em 0;
        list-style:none;
        background:#000;
        display: table;
        width:100%;
    }
    /*=== UL Child Rules ===*/
    .nav li {
        display:-moz-inline-box; /* FF2 and K-Meleon */    
        display:inline-block; /* DO NOT ALTER RULE */ 
        word-spacing:0; /* DO NOT ALTER RULE */ 
    
        /* EDIT and ADD rules below as you choose! */
        margin:0;
        padding:0 .5em;
        font:bold 1em/1.5 arial;
        background:#98FB98;
    }
    /* EDIT and ADD rules below as you choose! */
    .nav li:first-child+li {background:#00FFFF;}
    
    </style>
    
    <!--[if lt IE 8]>
    <style type="text/css">
    /* Let IE6/7 Join In! */
    .nav li { display:inline;}
    </style>
    <![endif]-->
    
    </head>
    <body>
    
    <h1>CSS Quiz #35: Fix The Webkit Inline-Block + Word-Spacing Bug</h1>
    
    <p>Do not alter the HTML format for the quiz. That means no tag-chaining to remove white-space nodes.</p>
    <p>The white-space nodes will be the gaps between the list items, you will see them in Chrome &amp; Safari.</p>
    
    <ul class="nav">
        <li>inline-block</li>
        <li>inline-block long block testinline-block long block testinline-block long block test</li>
        <li>inline-block</li>
        <li>inline-block</li>
    </ul>    
    
    </body>
    </html>
    All the other entries were basically the same so I won't post them all but feel free to discuss further or post your entry.

    There was one other entry that may be of interest from Dresden_Phoenix which was based on the font-size:0 trick but instead left a very small height that could be resorted with a multiplier on the nested element.

    It's not a full proof solution unlike the other fix but worthy of note.

    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">
    
    <title>CSS Quiz #35: Fix The Webkit Inline-Block + Word-Spacing Bug</title>
    
    <style type="text/css">
    h1,p   {
        margin:0 0 .5em;
        font:bold 1.5em/1.5 arial;
        text-align:center;
    }
    p, .nav {font:bold 1em/1.3 arial;}/*added nav class here for extra points, use it to compare LI font-size to P font-size*/
    
    /*=== UL Parent Rules ===*/
    .nav  {
        text-align:center; /* DO NOT ALTER RULE */   
        word-spacing:-1em; /* DO NOT ALTER RULE */ 
        
        /* EDIT and ADD rules below as you choose! */
        margin:1em 0 0;
        padding:  0;/*FF wasnt honoring top/boittom padding anyway*/
        list-style:none;
        background:#000;
        
                text-wrap:pre-line;
            
            font-size:.0625em; /* my tweak to my'asymptote' solution to  font-size:0 problem!!! Gotta love math*/
       /*as each font stack I tested seemed to have its  own optimal  letter-spacing and word-spacing values, i found it best to  use a "specific" stack; sans , serif, or    monospaced, font family can easily be reset later. */
        font-family:Georgia, "Times New Roman", Times, serif;
        letter-spacing:-.25em;
        vertical-align:top;
    }
    /*=== UL Child Rules ===*/
    .nav li {
        display:-moz-inline-box; /* FF2 and K-Meleon */    
        display:inline-block; /* DO NOT ALTER RULE */ 
        word-spacing:0; /* DO NOT ALTER RULE */ 
    
        /* EDIT and ADD rules below as you choose! */
        margin:0;
        padding:0 .5em;
        background:#98FB98;
        
        font-size:16em;/* resets font-size to 100% of parent's parent--nice!*/
        font-family:"what ever it was before", Arial, sans-serif;/* resets font fam*/
        letter-spacing:0; /*snormalpre-wrap;*/    
    
    }
    /* EDIT and ADD rules below as you choose! */
    .nav li:first-child+li {background:#00FFFF;}
    
    </style>
    
    <!--[if lt IE 8]>
    <style type="text/css">
    /* Let IE6/7 Join In! */
    .nav li { display:inline;}
    </style>
    <![endif]-->
    
    </head>
    <body>
    
    <h1>CSS Quiz #35: Fix The Webkit Inline-Block + Word-Spacing Bug</h1>
    
    <p>Do not alter the HTML format for the quiz. That means no tag-chaining to remove white-space nodes.</p>
    <p>The white-space nodes will be the gaps between the list items, you will see them in Chrome &amp; Safari.</p>
    
    <ul class="nav">
        <li>inline-block</li>
        <li>inline-block long block testinline-block long block testinline-block long block test</li>
        <li>inline-block</li>
        <li>inline-block</li>
    </ul>    
    
    </body>
    </html>
    Quiz 2.

    I only received one correct entry for quiz2 and that was from Raffles. well done Rafael

    Some of you may have tried to google the answer and perhaps found yourself here. However, that solution will not work without javascript to copy the filename backwards and forwards into a holding element.

    The basis of the above technique is that it places a completely transparent file input on top of an image. Although the input is transparent it can still be clicked as usual except that the filename text is invisible which is why the javascript needs to grab the filename and paste it into a holding element so it can be seen.

    The answer to my quiz is very similar except that we place an image on top of the file input to hide it completely. Of course we can't click the file input because it's underneath but all that needs to be done is that on hover we bring the file input to the top of the stack and at the same time make it transparent while hovered. Then when we let go the input goes underneath the image but we make sure the filename part is not obscured by our image.

    Here is a live example.

    It's a bit clunky as some file inputs are different sizes so the target areas are not exactly defined but as proof of concept it does work although I would advise against using it for real. I only used it as the basis of a quiz because up to now it has been said to be impossible to do

    Raffles entry was much the same as mine but has a few differences and is shown in full below (along with his answer to quiz 1).

    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">
    
    <title>CSS Quiz #35: Fix The Webkit Inline-Block + Word-Spacing Bug</title>
    
    <style type="text/css">
    h1,p {
        margin:0 0 .5em;
        font:bold 1.5em/1.5 arial;
        text-align:center;
    }
    p {font:bold 1em/1.3 arial;}
    
    /*=== UL Parent Rules ===*/
    .nav  {
        text-align:center; /* DO NOT ALTER RULE */   
        word-spacing:-1em; /* DO NOT ALTER RULE */ 
        
        /* EDIT and ADD rules below as you choose! */
        margin:1em 0 0;
        padding:.25em 0;
        list-style:none;
        background:#000;
        display:table;
        width:100%;
    }
    /*=== UL Child Rules ===*/
    .nav li {
        display:inline-block; /* DO NOT ALTER RULE */ 
        word-spacing:0; /* DO NOT ALTER RULE */ 
    
        /* EDIT and ADD rules below as you choose! */
        margin:0;
        padding:0 .5em;
        font:bold 1em/1.5 arial;
        position:relative;
        background:#98FB98;
    }
    /* EDIT and ADD rules below as you choose! */
    .nav li:first-child+li {background:#00FFFF;}
    
    
    form {margin-top:4em;}
    .file-input {
      position:relative;
      float:left;
    }
    .file-input * {
      border:1px solid red;
      background:blue;
      color:white;
      height:24px;
      position:relative
    }
    .file-input button {
      position:absolute;
      right:0;
      font-size:1em;
      padding:0 0.4em;
      z-index:2;
      outline:12px solid white;
    }
    .file-input:hover button {
      background-color:green;
      z-index:-1;
    }
    .file-input:hover #upload {
      z-index:3;
      filter:alpha(opacity=0);
      opacity:0;
    }
    #upload {
      position:relative;
      height:25px;
      top:-1px;
      border-color:transparent;
      z-index:1;
    }
    #dud {
      border:1px solid red;
      background:transparent;
      position:absolute;
      z-index:2;
      top:0;
      left:0;
      padding:0;
      height:22px;
      line-height:10px;
      font-size:10px;
      outline:20px solid white;
      width:134px;
    }
    #dud:empty {
      outline:12px solid white
    }
    .file-input:hover #dud {
      background:blue
    }
    </style>
    
    <!--[if lt IE 8]>
    <style type="text/css">
    /* Let IE6/7 Join In! */
    .nav li { display:inline;}
    </style>
    <![endif]-->
    
    </head>
    <body>
    
    <h1>CSS Quiz #35: Fix The Webkit Inline-Block + Word-Spacing Bug</h1>
    
    <p>Do not alter the HTML format for the quiz. That means no tag-chaining to remove white-space nodes.</p>
    <p>The white-space nodes will be the gaps between the list items, you will see them in Chrome &amp; Safari.</p>
    
    <ul class="nav">
        <li>inline-block</li>
        <li>inline-block</li>
        <li>inline-block</li>
    </ul>
    
     <form method='post' action=''>
            <div class='file-input'>
                <button>Browse</button>
                <input type="text" id="dud">
                <input id="upload" name="upload" type="file">
            </div>
        </form>
    
    </body>
    </html>
    Thanks to all that took part and contributed to the lively discussions and congratulations once again to Maleika and Rafael.

    Look out for another quiz in the next couple of weeks.

  2. #52
    Non-Member
    Join Date
    Jun 2010
    Location
    4727′35″N 2618′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    indeed, "Congrats Maleika and Rafael" !


    and yes, though reluctantly, i did learned something. so i believe a "Thank you Paul!" it's also adequate.

  3. #53
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    I refuse to look at the solution for quiz 2 because I'd like to try it out myself sometime this week.

    But congrats to everyone! And congrats Rafael!

    @Μitică, thank you!

    Thanks for the quizzes, Paul and Ray.

    <= *eagerly awaiting next round of quizz time*
    Maleika E. A. | Rockatee | Twitter | Dribbble



  4. #54
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the quiz, Paul! And congrats to you too Maleika.

    I'm also fired up for the next quiz.

  5. #55
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Off Topic:

    how could I have missed this!
    oh well, I'll be sure to catch the next one and try this one in some free time.

  6. #56

  7. #57
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    For reference, this is now broken in Opera 11 too. It also still (as listed) never worked for me in the browsers previously mentioned.

    Came back to this because I thought I could use it... no joy.

  8. #58
    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 Jason,

    If you post what's not working for you then we can see if there is a solution that suits your set up. Some bright spark may have an idea

  9. #59
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    The examples from the winners in this thread do the job. Opera 11 is now putting a blank space between the inline-blocks even when the UL is set to display:table.

    Which is odd, since Opera was one of the few browsers this solution worked for me in.

  10. #60
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    I'm not getting any gaps between the inline-blocks in Opera 11.

    It also still (as listed) never worked for me in the browsers previously mentioned.
    Which leads me to believe that the problem lies somewhere else on your end. It worked fine for everyone else in all the browsers you mentioned.

    Out of curiosity what happens when you run the code below at 96 dpi?
    It shouldn't make any difference though.

    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">
    <title>CSS Quiz #35: Inline-Block</title>
    
    <style type="text/css">
    .nav {
        display: table;
        width: 100%;
        word-spacing: -1em;
        margin: 0;
        padding: .25em 0;
        list-style: none;
        text-align: center;
        background: #000;
    }
    .nav li {
        display: inline-block;
        word-spacing: 0;
        padding: 0 .5em;
        font: bold 1em/1.5 arial;
        background: #FFA500;
    }
    .nav li:nth-child(2n+1) {
        background: #0F0;
    }
    </style>
    
    </head>
    <body>
    
    <ul class="nav">
        <li>inline-block</li>
        <li>inline-block</li>
        <li>inline-block</li>
        <li>inline-block</li>
        <li>inline-block</li>
    </ul>    
    
    </body>
    </html>

  11. #61
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Actually, I found what's messing it up. Putting anchors inside the LI and bothering to have formatting as it's the anchors I need to put padding on, so those are display:inline-block as well. It's adding them INSIDE the LI. The LI themselves are collapsing just fine.


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
  •