ul list not rendering correctly in IE8

StackOverflow https://stackoverflow.com/questions/13728543

Question

When my list shows, the first element of my list is at the correct place, but starting from the 2nd one till the end, they all appear under the bullet instead of besides it :/

if you need to see the code go to http://www.nsworld.org/development (click on the USA)

I'm trying to find a fix for this problem, it only appear in IE8, all the other browsers everything shows perfectly.

Was it helpful?

Solution

Close your anchor tags (as wellas your list items) - they're only being opened, but never closed:

"<li>"+"<a href='http://nsworld.org/'>"+"Foo"+""+""+"<br />"+"<br />"+

This code, in general, needs to be greatly re-worked. There's a lot of unnecessary concatenation going on, which destroys the legibility of this line (as well as those surrounding it).

Additionally,

There are a few things I would suggest. First would be that you start using a Standards doctype, such as <!DOCTYPE html> so that you're getting more consistent behavior across various browsers, and versions.

Secondly would be to close your tags. I noticed that these list items aren't being closed, and as such the task is left to the browser to determine how subsequent list items ought to be formatted. While this isn't invalid, it is definitely not a practice I would encourage.

Lastly would be to avoid verbose string concatenation in JavaScript, such as the following:

 switch (code) {
    case "us":
x="<ul>"+
"<li>"+"<a href='http://nsworld.org/findings/How-does-it-all-Fit-Together/Capacities#!prettyPhoto[examples2]/2/'>"+"Envision Charlotte"+""+""+"<br />"+"<br />"+
"<li><a href='http://nsworld.org/findings/Building-New-Capacities-Emergence/Innovative-Societies#!prettyPhoto[examples2]/2/'>"+"US Open Government Initiative"+""+
"<li>"+"<a href='http://nsworld.org/findings/Building-New-Capacities-Emergence/Innovative-Societies#!prettyPhoto[examples2]/3/'>"+"Unreasonable Institute"+""+""+
"<li>"+"<a href='http://nsworld.org/findings/Building-New-Capacities-Emergence/Innovative-Societies#!prettyPhoto[examples2]/4/'>"+"FailFaire"+""+""+
"<li>"+"<a href='http://nsworld.org/findings/Building-New-Capacities-Emergence/Emergent-Solutions#!prettyPhoto[examples]/1/'>"+"Ushahidi-Haiti"+""+""+
"<li>"+"<a href='http://nsworld.org/findings/Building-New-Capacities-Emergence/Public-Organizations-as-Experimentation-Platforms#!prettyPhoto[examples2]/3/'>"+"Social Innovation Fund"+""+""+
"<li>"+"<a href='http://nsworld.org/findings/Building-New-Capacities-Resilience/Adaptive-Capacity#!prettyPhoto[examples2]/1/'>"+"Community and Regional Resiliency Institute (CARRI)"+""+""+
"<li>"+"<a href='http://nsworld.org/articles/community-resilience-taking-tangible-steps-towards-achieving-societal-resilience'>"+"Community Resilience: Taking Tangible Steps Towards Achieving Societal Resilience"+""+""+
"<li>"+"<a href='http://nsworld.org/discoveries/nurse-family-partnership-co-produces-results-us'>"+"Nurse-Family Partnership Co-Produces Results in the U.S."+""+""+
""
        break;

You could instead have these lists preloaded, pulled down asynchronously, or have the data populated in a JavaScript object of some sort. As you can see, massive amounts of string concatenation make code very unreadable, and offer many more opportunities for mistakes.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top