This dilemma has been causing me frustration for quite some time. My goal is to achieve a simple task - float li elements in a ul container and give them a hover effect. Here's the code snippet: Everything seems to be in order, with all CSS reset, display block on elements, and a clear class that clears both after each element.
<ul class="clear">
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
ul > * { float: left; border: 1px solid black }
li{ padding: 10px;}
li:hover{ background-color: white; }
However, I've noticed that the width of the ul container changes in different browsers for some unknown reason (perhaps due to the font being used). This makes it difficult to hard code the width of the ul to fit all the li elements perfectly. So, my workaround involves measuring the width of each li element once everything loads, adding them up, and setting that as the width of the ul.
Unfortunately, this approach also presents challenges. Methods like jquery.width(), offsetWidth, or outerWidth only return whole numbers, while some elements have partial pixel widths like .34px. As a result, the ul ends up either slightly too wide, resulting in a gap, or too narrow, causing the floated elements to drop to the next line.
Is there a more precise way to measure the width accurately?