javascript words on top of each other

Question

I have a javascript code that writes out a list. But the words are written on top of each other making it hard to read. No matter what i put in the list, and no matter the browser I use, the words are written atop eachother. It seems to allow only one word. Like "Salad" but it I use "Salad Cake" the words salad and cake will overlap. Since I don't see what the problem is, this has proved really hard to research. help?

  $(document).ready(function doEverything(element){
$.getJSON("https://api.foursquare.com/v2/venues/search?ll=-27.58818,-48.523248&         
client_id=L2VWBKPOW45D5X3FJ3P4MJB5TGVJ4ST2J005RIVAFIWG44ND%20&   
client_secret=ZKDAOLHASCA31VUOGMBTAS3RFYUOMXL4IFFYPRURIDQA3QMA%20&v=20111107",
    function(data){

one=data.response.venues[0].name;
two= data.response.venues[1].name; 
three= data.response.venues[2].name; 
four= data.response.venues[4].name; 



    var list = [];


    list[0] = [one];
    list[1] = [two];
    list[2] = [three];
    list[3] = [four];

UPDATE (hand smacks head) The missing code had a style:width of 10px. Solved.

Answer 1

The code you have posted (an AJAX call and some data manipulation) is not relevant to how the data ends up being displayed. Look at how you display the data, not how you get the data. Since we're forced to guess, I'll list the causes I can think of:

• The words are split into separate DOM elements and are given position:absolute via CSS. Remove position: absolute, calculate the words' correct position via javascript (not easy) or simply not split into several elements.
• The words are split into separate DOM elements and are given width:0 (or any width that's too small) and overflow: visible (default value for overflow). The treatment is the same - remove the respective width attribute.
• The element containing the words has width:0, line-height:0 and overflow:visible. This seems unlikely but does not imply separate elements. If this is the case, you can fix this by replacing ordinary spaces by non-breaking spaces, in addition to the correct way of fixing the CSS.
• The element has negative word-spacing. Why would anyone do that?
• CSS3 defines text-height and some ruby- properties. Since they are new, I don't expect them to have any effect in IE8.