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.
[B]==============================================
First Quiz.
[/B]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)
- Do not alter the HTML format for the quiz. That means no tag-chaining to remove white-space nodes.
- 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 */ ) - You are free to edit or add whatever you choose below these comments: /* EDIT and ADD rules below as you choose! */
- No CSS hacks or Webkit @media screen targeting.
- 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.
<!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 & 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: [/B]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.
<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.
