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.
<!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;
[B] display: table;
width:100%;[/B]
}
/*=== 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 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.
<!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 & 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).
<!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 & 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.