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.

Can we see the relevant HTML, CSS and your _rendering_ code? — John Dvorak, Nov 23 '12 at 05:51
`list[0] = [one];` Why do you create one-element arrays here, instead of just `list[0] = one`, or even `list = [one, two, three, four]`? — John Dvorak, Nov 23 '12 at 05:53
it is related to your HTML and CSS ...so please provide the same .. — Pranav, Nov 23 '12 at 05:54
The indexes to `data.response.venues` you use are `0,1,2,4`. Are you sure they should not be `0,1,2,3`? Then you could use `list = data.response.venues.slice(0,4)` — John Dvorak, Nov 23 '12 at 05:57
Please talk to us. We can't help you with your CSS without seeing it. — John Dvorak, Nov 23 '12 at 05:58
For starters, try removing `position: absolute` and `width:0` from the relevant elements. — John Dvorak, Nov 23 '12 at 05:59

score 0 · Accepted Answer · answered Nov 23 '12 at 06:33

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.

The missing code had a style:width of 10px. Upon ur suggestions I changed it to 500px, problem solved. — Celeste, Nov 23 '12 at 18:06

javascript words on top of each other

1 Answers1