Dynamically loaded text gets cut in half

Rather than try describe it, I should just show you. The Korean text is loaded by Ajax when the page is ready. The English options on the right are also loaded in this way but they are fine. The only difference I can see is that they are DIVs whereas the Korean is in a SPAN but I need to it to be the way to let it re-size to the contents and yet stay centered in the same spot. I have not been able to achieve this properly when it's rendered as a block or even with float left. Has anyone ever experienced this before?

This is the CSS for the SPAN #base and it's containing SPAN #basewrap which is the container

#base
{
background-color: #B8BFCD;
font-size: 35.5pt;
padding: 29px;
-moz-border-radius: 10px;
border-radius: 10px;
border: 1px solid;
}
#basewrap
{
width: 591px;
text-align: center;
position: relative;
left: -25%;
top: 51px;
height: 113px;
}


<div style="z-index:100;" id="baselabel"><span class="eng">Korean</span><span                                        class="kor">한국어 단어</span>
<div class="ttslink" onclick="$(&quot;#please&quot;).text(&quot;please be patient!&quo         t;).css(&quot;color&quot;,&quot;green&quot;).fadeIn(300).delay(1400).fadeOut(300);var kor =   $(&quot;#base&quot;).text();var tts = window.open(&quot;http://text-to- speech.imtranslator.net/speech.asp? url=WMfl&amp;dir=ko&amp;text=&quot;+kor,&quot;mywindow&quot;,&quot;location=no,status=no,scr ollbars=no,width=0,height=0&quot;);">
<img alt="korean audio" src="speaker.png"></div></div>
<span id="basewrap"><span id="base">목욕 수건</span></span>

And this is the JQuery code that does the dynamic loading, word groups are pulled from MySQL with a PHP script and sent back as JSON

var getset = function (){
$("#qcount").text("/" + qcount);
$("#wincount").text(wincount); 
var percent = parseFloat(wincount/qcount*100).toFixed(0);
if (isNaN(percent)){percent = 0};
$("#percent").text("(" + percent + "%)");
$.ajax({
    type: "POST",
    url: "gamescript.php",
    data: "correct="+correct+"&win="+win+"&id="+baseid,
    success: function(json){
        var r = eval(json);
        if (r.length < 4){alert("there are no new words left! Reloading     page");location.reload();};
        $("#base").html(r[0]["korean"]).data("id", r[0]["id"]);
        random($("#option"));
        $(".option").each(function(){
            $(this).mouseover(function(){
            if($(this).css("background-color")!= "rgb(183, 190, 204)" &&     $(this).css("background-color")!= "rgb(229, 232, 238)")return;
                $(this).css({'background-color' : "#E5E8EE"});
            }).mouseout(function(){
                if($(this).css("background-color")!= "rgb(183, 190, 204)" &&     $(this).css("background-color")!= "rgb(229, 232, 238)")return;
                $(this).css("background-color", "#B7BECC");
            })
        });

        $("#option1").html(r[0]["english"]).data("id", r[0]["id"]).css("background- color","#B7BECC");
        $("#op开发者_JS百科tion2").html(r[1]["english"]).data("id", r[1]["id"]).css("background-color","#B7BECC");
        $("#option3").html(r[2]["english"]).data("id", r[2]["id"]).css("background-color","#B7BECC");
        $("#option4").html(r[3]["english"]).data("id", r[3]["id"]).css("background-color","#B7BECC");
        loading = 0;
        },
    error: function(){alert("error")}
});
}

This is a solution using div's instead of spans which auto size to the content and the wrapper remains where it is

http://jsfiddle.net/peter/2aLwB/

thanks, I actually fixed the problem by turning all icons into sprites , it was the fact that there was an image above the span that caused it to mess up, now that the sprites all have predetermined dimensions everything is fine. In retrospect I could have probably fixed it by simply specifying the image dimensions in the first place. but this is better all round :)