Problem with line height when using <span> and "float:right"

[luftikus143]

Hi there,

I am building a small WebApp, and using a list to display country values for a specific variable. It should be like

Country A 10
Country B 4
Country C 125


So, what I have in CSS is this:

.variable {
    font-size: 12px; 
    font-weight: bold;
    color: #7388a5;
}
 
.value {
    font-size: 12px; 
    text-align: right;
    float: right;
}

and the code like this:

<ul>
  <li>
    <span class="variable">Afghanistan</span>
    <span class="value">10</span>
  </li>
</ul>

But, when using a 1px border around the SPANs, I see that the "variable" box is a big as the name, but the "value" boxes are taller, as if there would be a BR attached to the SPAN.

What is this, and how can I solve this?

Thanks for any hints!

[drhowarddrfine]

I don't see this problem at all. Which browser are you using?

[luftikus143]

Ok, I stripped off all CSS code which was included in DIVs before, and started from scratch. Now it works again. Problem was related with parent-CSS.

Cheers!