Show unicode HTML entities messing up my style
css, google-chrome, html
Solution
In Chrome, `div.character` has a default `vertical-align` of `baseline`.
Try removing `height:100px;` from `div.character` in your CSS. You'll see that all the boxes are sitting on the baseline of each row.
As Huangism says, changing the `vertical-align` to `top` fixes the issue.
Problem
So, this morning, for fun, I grabbed the file of unicode characters over at http://www.unicode.org/Public/6.2.0/ucd/NamesList.txt and wrote a little tiny PHP script that will output that to the screen. It takes a couple seconds to load the literally thousands of characters and render the HTML. I tried to make a very simple grid, using inline-block divs with overflow hidden. But when I view the page in Chrome some of the boxes are shifted down or up from the rest on it's row. But only sometimes. http://shawnsworld.ca/chars/fullunicode.php The CSS code: http://shawnsworld.ca/chars/style.css Any idea why Chrome would render the boxes so they are NOT in a straight row?