Wondering if there might be a bug lurking in Chrome or if my CSS needs some tweaking. The issue at hand is that even though I've set a CSS declaration on .blockmenu li with margin: 2% !important, Chrome doesn't seem to be interpreting the percentages correctly.
To take a closer look, check out the JS fiddle link - http://jsfiddle.net/T3bWE/17/
The CSS code snippet is as follows:
.blockmenu ul {
padding: 0px !important;
margin: 0px !important;
}
.blockmenu li {
padding: 0px !important;
margin: 2% !important;
list-style: none;
list-style-position: inside;
display: block;
position: relative;
width: 25%;
float: left;
display: table;
}
.blockmenu li a {
height: 150px;
margin: 10px;
display: block;
text-align: center;
color: #fff;
display:table-cell;
vertical-align:middle;
}
.blockmenu li:nth-child(3n-2) a {
background: #e31937;
}
.blockmenu li:nth-child(3n-1) a {
background: #002f5f;
}
.blockmenu li:nth-child(3n) a {
background: #dcdcdd;
color: #58595b;
}
The HTML markup looks like this:
<div class="blockmenu">
<ul>
<li><a href="#!">item 1</a>
</li>
<li><a href="#!">item 2</a>
</li>
<li><a href="#!">item 3</a>
</li>
<li><a href="#!">item 4</a>
</li>
<li><a href="#!">item 5item 5item 5<br>item 5item 5</a>
</li>
</ul>
</div>
Just wondering if Chrome's playing tricks or if I missed something in the CSS, because it seems to display fine in other browsers. When looking at the development tools, the left margin shows differing values like 5.641, 4.234, 2.828, 1.453 in Chrome, whereas Firefox maintains consistency at 5.641.
Here's a screenshot from Chrome:
And here's one from Firefox: