why is the icon moved away to top in ie6?

Question

why is the icon moved away to top in ie6
it display ok in other browsers but not in ie6,what happened
how to fix this problem?
and can any one tell me how to write a better structure of my code showed on my demo?
demo : http://linjuming.pydra.org/leb/ie6_cw/index.html

Answer 1

Try using display: inline-block; instead of display: inline;

.summary .grade_world {
    display: inline-block; <------- Here
    float: left;  <------ You don't need this
    background: url(grade_world.png) no-repeat scroll 0 0 transparent;
    height: 19px;
    width: 82px;
    position: relative; 
    top: 3px;
}