SitePoint Sponsor

User Tag List

Page 1 of 3 123 LastLast
Results 1 to 25 of 61
  1. #1
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,809
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)

    CSS - Test Your CSS Skills Number 35 - inline-block

    Quiz now finished - see solution in post #51.

    It's been a while since we had a quiz so her are two little quizzes to help make the week whiz by.

    The first quiz (brought to you by Rayzur) is cure a real life problem in webkit browsers when using display:inline-block and you will need to find a solution to the white space problem that inline-block causes.

    The second quiz is "just for fun" so please no comments about not styling form controls as I don't expect you to use this technique for real but as an exercise in solving problems. The task is to style an input of the "type='file'" which (if you google it) has never been fully achieved without using javascript at some stage.

    ==============================================
    First Quiz.

    Fix The Webkit Inline-Block + Word-Spacing Bug

    There are many times when we need to have "Centered Widthless Blocks" in a simple UL. That is easily accomplished by setting text-align:center on the UL and then setting display:inline-block; on the LI. Since the list items are still actually following the rules of inline elements we get white-space nodes when the HTML is formatted in the normal manner.

    There are many tricks to hiding the white-space nodes but they all fall short in the Webkit browser engine. It was a hot topic of discussion in this recent thread.

    font-size:0 DOES NOT kill white space bug in webkit

    The font-size:0; trick: only allows us to reset the children font-sizes in pixel values and it still leaves about a 1px gap in Chrome and Safari (both using the Webkit engine). That just doesn't give enough flexibility nor does it resolve the problem completely.

    The word-spacing:-1em; trick: works well for all other modern browsers since they do not collapse the over-sized negative values. That is really our best option until/ if white-space-collapse: is accepted into the CSS3 specs. The problem is that Webkit completely ignores the word-spacing property when it is used on inline-blocks.

    Other tricks: include using extra wrapping divs or altering the HTML tags by chaining them together. Those methods do work but they have their downsides too. They are discussed in detail within the thread link above.

    I have also set up a test-case which explains the buggy behavior with Webkit. It can be found in Post #33 of that discussion thread.

    Your goal is to take the code below as a starting point and find a pure CSS solution to the "Webkit Inline-Block + Word-Spacing Bug". Yes, there is a solution to it and it is very simple. It should not require more than two new rules in the css to bring it to a fully X-Browser solution.

    Rules: (There are always rules)

    1. Do not alter the HTML format for the quiz. That means no tag-chaining to remove white-space nodes.
    2. Do not remove or edit the css rules that are commented with: /* DO NOT ALTER RULE */ ... (e.g. .nav li {
      display:inline-block; /* DO NOT ALTER RULE */ )
    3. You are free to edit or add whatever you choose below these comments: /* EDIT and ADD rules below as you choose! */
    4. No CSS hacks or Webkit @media screen targeting.
    5. No Javascript

    Remember we are solving the inline-block problem so there will be no prizes for removing the inline-block and using some other method such as floating etc.


    Here is the code you will be using as your starting point.
    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;
    }
    /*=== 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</li>
        <li>inline-block</li>
    </ul>    
    
    </body>
    </html>
    If anything is not clear or if I have made a mistake somewhere then just shout.

    Remember this is to solve a real life problem and will result in a fully workable solution but there will be no prizes other than the satisfaction of completing the task.

    Don't post your answers in this thread but PM with the details instead so that all can have a go.


    ==========================================
    Quiz 2.

    Style a File input button without using javascript

    Disclaimer:
    I know I always tell you not to mess around with styling form elements because they vary so much between browsers and you will usually end up breaking their function in some way but just for the purposes of this quiz forget about that for a minute (Indeed if anyone feels the need to voice the same opinion then please don't as I will just remove any posts that aren't taking part in the actual quiz.)

    The task is to style an input file field so that it matches the attachment called file-input.png. This is styled using only background colours and borders and no images. The attachment file-input2.png shows another example that has been styled with a background image to show that it is possible to use images also.

    In each attachment you can see the normal state, the hover state, and the state when the filename has been selected.

    In the first atttachment I have also shown the normal state of the button when not styled just for reference.

    The browser support required is IE7+, Firefox 3+ and Opera10+. As you can see from attachment 1 Safari/Chrome don't play ball very nicely so we won't worry about them. However, If you can find a solution that I didn't then all the better.

    This needs to be a fully working example that allows you to select the file and displays it in the input box as shown in the attachments. No scripting is allowed - just use html/css although for IE you may need to use some common hacks.

    Use whatever css and html you need and here is some basic html you can change to your hearts content.

    Code:
        <form method='post' action=''>
            <div class='file-input'>
                <input id="upload" name='upload' type='file' class='file' />
            </div>
        </form>
    If anything is unclear or I have made an error in my logic then just shout. The winner won't necessarily be the first correct one I receive (but the first entry always gets a big mention and may indeed be the preferred solution).

    Remember this is just for fun and there are no prizes.

    Don't post your answers in this thread but PM with the details instead so that all can have a go.


    Have fun.


    PS. : In case you missed the other tests you can find them all listed here:

    PPS: A couple of you have sent me in some ideas for quizzes a while ago and I haven't forgotten them and I will get around to posting them so thanks for the support.
    Attached Images Attached Images
    Last edited by Paul O'B; Nov 1, 2010 at 11:36.

  2. #2
    Non-Member
    Join Date
    Jun 2010
    Location
    4727′35″N 2618′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    That means no tag-chaining to remove white-space nodes.
    i hereby declare openly that Paul O'B is a dictator and as such i choose to be a dissident and not obey his rule! i will not comply to any forced labour he may impose on me! down with the dictator! stop tormenting webkit browsers! freedom for the webkit browsers!


  3. #3
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,233
    Mentioned
    47 Post(s)
    Tagged
    1 Thread(s)
    ^ Lawlz.

    They say restrictions and boundries increase creativity. Creativity in captivity.

  4. #4
    Floridiot joebert's Avatar
    Join Date
    Mar 2004
    Location
    Kenneth City, FL
    Posts
    823
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    No CSS hacks or Webkit @media screen targeting
    I just want to point out the irony here.

    Code:
    <!--[if lt IE 8]>
    <style type="text/css">
    /* Let IE6/7 Join In! */
    .nav li { display:inline;}
    </style>
    <![endif]-->

  5. #5
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,734
    Mentioned
    31 Post(s)
    Tagged
    1 Thread(s)
    Paul: Answer PM'ed, to part one at least.
    and Joe: Great, now I have Alanis M. running on repeat in my head. Thanks!

  6. #6
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by joebert View Post
    No CSS hacks or Webkit @media screen targeting
    I just want to point out the irony here.
    Hi Joe,

    It's really not ironic when you think about it. IE6/7 are not modern browsers and they do not have native support for inline-block. The tripswitch is the only way to get them to display the blocks inline, and even then they do not render the nodes.

    Webkit is a modern browser and this has been a frustrating bug for quite some time. They need to get it fixed because the inline-blocks should in fact be following the same initial rules as display:inline. I have mentioned that in the thread.

    The point of that rule was to encourage you to find the solution which in fact does not require a hack at all.

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,809
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by dresden_phoenix View Post
    Paul: Answer PM'ed, to part one at least.
    Thanks for your entry and thanks for taking part


    I just want to point out the irony here.

    Code:
    <!--[if lt IE 8]>
    <style type="text/css">
    /* Let IE6/7 Join In! */
    .nav li { display:inline;}
    </style>
    <![endif]-->
    Yes that is ironic and I suppose for the quiz we should have said forget about IE for the time being as we all know how to make then work but at the same time we didn't want you to break it for IE either which is why the code was left in place.

    We are really only interested in you solving the webkit bug using valid usable code and didn't want to send you on a wild goose chase through miles of advanced css3 and webkit vendor extensions looking for a solution.

  8. #8
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    This one is particularly annoying for me as not being able to change markup OR THE CSS? What the ****?!? My solution in this case is always don't use inline-block; either float them or use display:table-cell...

    Since as a rule I would never put inline-block on a LI since IE knows it not... usually when I need this there are ANCHORS inside the LI and I'd probably never use inline-block on anything other than a menu.

    I suppose adding a new display rule after the 'feel free to edit' would be cheating?

    Already walking away from the first one as "oh, **** this"

    Let's see the second one... and no. Given how completely screwed up Sucko and Web**** are on styling form elements (which is to say they won't do it at all) much less that FF will not accept width or height the same as other browsers I don't see how that's even possible even with CSS3... Which is what I'm assuming is being alluded to.

  9. #9
    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)
    Are vendor prefixes considered a hack?

    Edit:

    Quote Originally Posted by Paul O'Brien
    We are really only interested in you solving the webkit bug using valid usable code and didn't want to send you on a wild goose chase through miles of advanced css3 and webkit vendor extensions looking for a solution.
    Note to self: read the darn thread before asking dumb questions.
    Maleika E. A. | Rockatee | Twitter | Dribbble



  10. #10
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Oh, and it's broken in the last version of nyetscape in gecko mode as well as iceweasel here because it omits the OTHER more recent gecko property - display:-moz-inline-block; inline-box is for pre gecko 1.5, between 1.5 and 1.8 you need inline-block, and declaring both (-moz-inine-block first) fixes bugs in various versions of gecko based browsers that are SUPPOSED to support -moz-inline-block but still screw it up.

    That's why you should always use all three in this order:

    display:-moz-inline-block;
    display:-moz-inline-box;
    display:inline-block;

    ... and again, give IE's support is why I'd NEVER put inline-block on a LI.

  11. #11
    SitePoint Wizard rguy84's Avatar
    Join Date
    Sep 2005
    Location
    Durham, NC
    Posts
    1,659
    Mentioned
    5 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Rayzur View Post
    It's really not ironic when you think about it. IE6/7 are not modern browsers and they do not have native support for inline-block. The tripswitch is the only way to get them to display the blocks inline, and even then they do not render the nodes.
    Ray,

    I think Joe was talking about what the code says (unless I am tired).
    Code:
    <!--[if lt IE 8]>
    <style type="text/css">
    /* Let IE6/7 Join In! */
    .nav li { display:inline;}
    </style>
    If [you] are IE8, (start the line). If you are IE 6 & 7, jump in line too!
    Ryan B | My Blog | Twitter

  12. #12
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by deathshadow60 View Post
    This one is particularly annoying for me as not being able to change markup OR THE CSS? What the ****?!?

    I suppose adding a new display rule after the 'feel free to edit' would be cheating?
    You can change the CSS , just not the ones that say: /*DO NOT ALTER RULE*/

    No it's not cheating to add a new rule where it says: /* EDIT and ADD rules below as you choose! */

    The point of the quiz is to overcome the Webkit inline-block/word-spacing bug.

    That's why you should always use all three in this order:

    display:-moz-inline-block;
    display:-moz-inline-box;
    display:inline-block;
    You CAN set up the -moz cascade correctly, we simply overlooked display:-moz-inline-block;

    Once again though, the quiz is about fixing Webkit while using inline-block on the direct child of the parent.

  13. #13
    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've sent my solution for quiz 1.
    Maleika E. A. | Rockatee | Twitter | Dribbble



  14. #14
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Rayzur View Post
    You can change the CSS , just not the ones that say: /*DO NOT ALTER RULE*/
    At which point why the restriction on changing or removing them, as isn't overriding them the same thing?

    I mean in my version, that code would be overridden by my sending the two values that would kind-of make it work... to the point that code might as well not even be in the source.

    Though the obvious solution of letter-spacing (which I'm willing to bet people are trying to use and SHOULD be mentioned in the original post!) should NOT be the correct answer either, since you cannot predict the character width of a space cross-system.

    In fact anything that uses letter-spacing or negative margin tricks is pretty much NOT a correct answer! Or am I intentionally ignoring the 'corrent' answer? (In which case enjoy your centering being broken in FF -- though you already have that with the word-spacing!)

  15. #15
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by deathshadow60 View Post
    At which point why the restriction on changing or removing them, as isn't overriding them the same thing?
    I made some edits to my last post ^


    I mean in my version, that code would be overridden by my sending the two values that would kind-of make it work... to the point that code might as well not even be in the source.
    We are working with inline-block on the LI

    Though the obvious solution of letter-spacing (which I'm willing to bet people are trying to use and SHOULD be mentioned in the original post!) should NOT be the correct answer either, since you cannot predict the character width of a space cross-system.

    In fact anything that uses letter-spacing or negative margin tricks is pretty much NOT a correct answer!
    Right, those are not the correct answer.

  16. #16
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,233
    Mentioned
    47 Post(s)
    Tagged
    1 Thread(s)
    display:-moz-inline-block;
    display:-moz-inline-box;
    display:inline-block;
    At least in K-Meleon (FF2 engine), the last-listed -moz statement overrules the first one. So I've stopped using both block and box together, because then I always have "box" which sometimes doesn't do what I'm after.

  17. #17
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,809
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by rguy84 View Post
    Ray,

    I think Joe was talking about what the code says (unless I am tired).
    Code:
    <!--[if lt IE 8]>
    <style type="text/css">
    /* Let IE6/7 Join In! */
    .nav li { display:inline;}
    </style>
    If [you] are IE8, (start the line). If you are IE 6 & 7, jump in line too!
    The code above says if you are less than IE8 then read this rule. Or did you mean something else?

  18. #18
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Oh, also, unless you set zoom:1; on your IE values, they WILL overlap on that word-spacing. Set opacity to see what I mean.

  19. #19
    Non-Member
    Join Date
    Jun 2010
    Location
    4727′35″N 2618′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    though still against it, sent mine for the first part: inline-block. how about it Paul?

  20. #20
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,809
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    As Ray said we are looking for a cure for the webit bug with inline-block. Changing or over-riding the inline-block to something else may make the display work but doesn't actually address the bug at all.

    If I said I wanted you to fix the IE double margin float bug and you simply changed the float to non floated so that the margin worked properly then that would not address the original issue although it may superficially make it look the same.

    However, I will say that if you do have good alternative or different methods of producing the above then we would still like to see them even if they don't precisely fit into the quiz aspect.

    Regarding the file input challenge:
    Let's see the second one... and no. Given how completely screwed up Sucko and Web**** are on styling form elements (which is to say they won't do it at all) much less that FF will not accept width or height the same as other browsers I don't see how that's even possible even with CSS3... Which is what I'm assuming is being alluded to.
    Remember the second quiz is just for fun but is quite a challenge. I have already said not to worry about Safari and I have shown a picture of how my version works in safari. The screenshots I attached are actual working versions from Opera and Firefox.

    One of the key properties required is CSS3 but is a common property that all browsers except IE have implemented for years (that's a big clue) and indeed some well known sites list it as a css2 property even though it's not.

    You can change the html as much as you like.

  21. #21
    Non-Member
    Join Date
    Jun 2010
    Location
    4727′35″N 2618′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Changing or over-riding the inline-block to something else may make the display work but doesn't actually address the bug at all.
    are you referring to my solution? 'cos it's not affecting the inline-block status at all


  22. #22
    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)
    Quote Originally Posted by deathshadow60 View Post
    At which point why the restriction on changing or removing them, as isn't overriding them the same thing?

    I mean in my version, that code would be overridden by my sending the two values that would kind-of make it work... to the point that code might as well not even be in the source.

    Though the obvious solution of letter-spacing (which I'm willing to bet people are trying to use and SHOULD be mentioned in the original post!) should NOT be the correct answer either, since you cannot predict the character width of a space cross-system.

    In fact anything that uses letter-spacing or negative margin tricks is pretty much NOT a correct answer! Or am I intentionally ignoring the 'corrent' answer? (In which case enjoy your centering being broken in FF -- though you already have that with the word-spacing!)

    None of that plays a role in my version.
    Maleika E. A. | Rockatee | Twitter | Dribbble



  23. #23
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,809
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    We have correct solutions for the inline-block quiz from Maleika (kohoutek) and from noonnope.

    Well done to both and thanks for taking part.

    I've had a few other entries but they don't quite meet the criteria but please keep the entries coming in.

    No entries for the second quiz yet though

  24. #24
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,809
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by noonnope View Post
    are you referring to my solution? 'cos it's not affecting the inline-block status at all

    No I wasn't referring to your solution which was fine and what we were looking for

  25. #25
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Paul -- if you add opacity or borders to test for overlap, do those submissions work?

    That's what's making me not submit anything -- the only solutions I can think of add/remove overlap depending on the font-size or font-face...

    I don't think these 'solutions' are solutions unless I'm missing something obvious or overthinking the requirements.


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
  •