I was revisiting my answer to PaulOB’s CSS quiz about the webkit white space bug
I think that Paul’s solution of using display-table to mitigate the word-spacing issue from which webkit browsers suffer is still the best way to go, in most cases. In this case, I am concerned about IE’s lack of support for display:table; as one can easily code a fall back or just rely on the default display property for non-webkit browsers , since the reason we are even using display:table is to address a webkit bug.It feels almost surreal to be concern about a bug in a non-IE browser, doesn’t it?
Anyway, sometimes display:table; may not be an option. FF has an AP position bug with tables or you may want to have more sizing or margin control over the element. While it is rare to encounter these situations, they do occur and you are often left with having to go back to floating the child elements.
In those cases I often back to my “asymptote solution”: giving he parent element an infinitesimally small font size, adjusting one px, and then multiplying by the same order of magnitude for the font size of the child elements. But, compared to display:table, this solution didn’t seem as graceful or clever as before and there was in deed something risky about relying entirely on really tiny unit values.
Then it struck me. If we knew the actual size of the white space we could mitigate it with negative letter spacing of the same value. The problem with that of course, for anyone familiar with typography, is that letter proportions vary from typeface to typeface and character to character in all fonts. All fonts, that is, except MONOSPACED fonts! As one can easily change font families between elements w/o consequence this seems like the ‘near’ perfect alternative to display:table.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width">
<style type="text/css">
.nav {margin: 0;padding: 0; list-style: none; font-family: monospace; text-align: center; letter-spacing: -.65em; word-spacing: -1em; }
.nav li { font-family: arial; display: inline-block; background: pink; padding:6px; letter-spacing: 0; border:1px solid; letter-spacing: normal; vertical-align:top ;vertical-align: top;padding:.5em; word-spacing:normal;}
.nav a { text-decoration: none}
</style>
</head>
<body>
<ul class="nav"> <li><a href="#">item</a></li> <li><a href="#">item</a></li> <li><a href="#">item</a></li> <li><a href="#">item longer sample item</a></li> <li><a href="#">item</a></li> </ul>
<p> It appears the bug is in the \
character in Safari</p>
<ul class="nav">
<li><a href="#">item</a></li>
<li><a href="#">item</a></li>
<li><a href="#">item</a></li>
<li><a href="#">item longer sample item</a></li>
<li><a href="#">item</a></li>
</ul>
</body>
</html>
There is still a slight issue. I noticed that the webkit bug is not only caused by webkit not honoring word-spacing property , but also that webkit doesnt ignore the new-line character. So, just to make it bullet resistant, I like to add a bit of size reduction.
.nav {margin: 0;padding: 0; list-style: none; font-family: monospace; text-align: center; font-size: .1em ; letter-spacing: -.65em; word-spacing: -1em; }
.nav li { font-family: arial; display: inline-block; background: pink; padding:6px; letter-spacing: 0; border:1px solid; letter-spacing: normal; vertical-align:top ;vertical-align: top;padding:.5em; word-spacing:normal; font-size: 10em }
Again this, is NOT a replacement for display:table bur a good option to have for when you have painted yourself into a corner.
hope you guys find this useful
