Display problem in Firefox

Hello, I’m using the below setup and it’s working fine in both Chrome and IE8, but the text right next to the bullet points going over to the next line down (instead of being a normal bullet list) in Firefox 3.6.8

<div class="container">

<li><a href="#" class="question" onclick="togglediv('Intro1'); return false">Question 1?</a></li>
<div class="answer" id="Intro1">
content here
</div>
</div>
  .question { 
	font-size: 12px; 
	color: #2d3644; 
	text-decoration: none; 
	cursor: hand; 
	display: block; 
	padding: 3 0 3 0; }
	
  .question a:hover { 
	color: #5493ff;
	text-decoration: underline;	
	}

  .answer { 
	font-size: 12px; 
	display: none; 
	padding: 2 0 5 30; 
	}
  
  .container { display: block; }
  
  .container li { padding: 0 0 0 20; }

and the Javascript, incase you need it:

function togglediv(whichLayer)
{
var elem, vis;
if( document.getElementById ) // this is the way the standards work
elem = document.getElementById( whichLayer );
else if( document.all ) // this is the way old msie versions work
elem = document.all[whichLayer];
else if( document.layers ) // this is the way nn4 works
elem = document.layers[whichLayer];
vis = elem.style;
// if the style.display value is blank we try to figure it out here
if(vis.display==''&&elem.offsetWidth!=undefined&&elem.offsetHeight!=undefined)
vis.display = (elem.offsetWidth!=0&&elem.offsetHeight!=0)?'block':'none';
vis.display = (vis.display==''||vis.display=='block')?'none':'block';
}

Can anyone help?

Thanks very much!
Your first setup works excellent and is exactly what I needed!

If you wanted to stick with your original code you’d need something like this.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
ul {
    margin:0;
    padding:0;
    list-style:none
}
.question {
    font-size: 12px;
    color: #2d3644;
    text-decoration: none;
    cursor: hand;
    display: block;
    padding: 3px 0;
}
a.question:hover {
    color: #5493ff;
    text-decoration: underline;
}
.container li.answer {
    padding: 2px 0 5px 10px;
    background:red;
    list-style:none;
    display:none;
}
ul.container {
    margin:0;
    padding:0 0 0 20px;
    list-style:disc;
}

</style>
<script type="text/javascript">
function togglediv(whichLayer)
{
var elem, vis;
if( document.getElementById ) // this is the way the standards work
elem = document.getElementById( whichLayer );
else if( document.all ) // this is the way old msie versions work
elem = document.all[whichLayer];
else if( document.layers ) // this is the way nn4 works
elem = document.layers[whichLayer];
vis = elem.style;
// if the style.display value is blank we try to figure it out here
if(vis.display==''&&elem.offsetWidth!=undefined&&elem.offsetHeight!=undefined)
vis.display = (elem.offsetWidth!=0&&elem.offsetHeight!=0)?'block':'none';
vis.display = (vis.display==''||vis.display=='block')?'none':'block';
}
</script>
</head>
<body>
<ul class="container">
    <li><a href="#" class="question" onclick="togglediv('Intro1'); return false">Question 1?</a></li>
    <li class="answer" id="Intro1"> content here </li>
</ul>
</body>
</html>


Hi Welcome to Sitepoint.

Your code is invalid I’m afraid as list elements must be contained withn a ul parent. You have also missed the units of the dimensions which means that in standards mode they will be treated as zero.

I’m guessing that you don’t have a doctype either :slight_smile:

If I understand what you want then I would do something unobtrusively like this:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
ul {
    margin:0;
    padding:0;
    list-style:none
}
.question {
    font-size: 12px;
    color: #2d3644;
    text-decoration: none;
    cursor: hand;
    display: block;
    padding: 3px 0;
}
a.question:hover {
    color: #5493ff;
    text-decoration: underline;
}
.container li ul {
    padding: 2px 0 5px 10px;
    background:red;
    list-style:none;
}
ul.container {
    margin:0;
    padding:0 0 0 20px;
    list-style:disc;
}
ul.container li a:focus {outline:0;color:#5493ff;}
ul.container li ul {
    margin-left:-999em;
    position:absolute;
}
ul.container li.onx ul {
    margin-left:0;
    position:static;
}

/* .myClick is the class that identifies which menus will open onclick. For accessibility menus should really be open by default and only closed if javascript is available. Or perhaps make them work on hover instead if javascript is disabled.

The js adds a class of .onx to the list element which the css then uses to either hide or show the nested ul by moving it off screen or bringing it back again.

*/
</style>
</head>
<body>
<ul class="container">
    <li class="myClick"><a href="#nogo" class="question">Question 1?</a>
        <ul>
            <li>
                <p>Content goes here</p>
            </li>
        </ul>
    </li>
    <li class="myClick"><a href="#nogo" class="question">Question 2?</a>
        <ul>
            <li>
                <p>Content goes here</p>
            </li>
        </ul>
    </li><li class="myClick"><a href="#nogo" class="question">Question 3?</a>
        <ul>
            <li>
                <p>Content goes here</p>
            </li>
        </ul>
    </li>
</ul>
<script type="text/javascript" src="getElementsByClassName-1.0.1.js"></script>
<script type="text/javascript" src="myonclick.js"></script>
</body>
</html>



// myonclick.js 
startList = function() {
if (document.getElementById) {
    navRoot = getElementsByClassName("myClick");
    for (i=0,ii=navRoot.length; i<ii; i++) {
          node = navRoot[i];
            node.onclick=function() {
              var c = " " + this.className + " ";
              if (c.indexOf(" " + "onx" + " ") != -1){
              this.className=this.className.replace('onx', '')
            } else { 
              this.className +=" onx";
            }
        }
     }
 }
}
// addLoadEvent 
function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      if (oldonload) {
        oldonload();
      }
      func();
    }
  }
}
addLoadEvent(startList);



/*
    Developed by Robert Nyman, http://www.robertnyman.com
    Code/licensing: http://code.google.com/p/getelementsbyclassname/
*/    
var getElementsByClassName = function (className, tag, elm){
    if (document.getElementsByClassName) {
        getElementsByClassName = function (className, tag, elm) {
            elm = elm || document;
            var elements = elm.getElementsByClassName(className),
                nodeName = (tag)? new RegExp("\\\\b" + tag + "\\\\b", "i") : null,
                returnElements = [],
                current;
            for(var i=0, il=elements.length; i<il; i+=1){
                current = elements[i];
                if(!nodeName || nodeName.test(current.nodeName)) {
                    returnElements.push(current);
                }
            }
            return returnElements;
        };
    }
    else if (document.evaluate) {
        getElementsByClassName = function (className, tag, elm) {
            tag = tag || "*";
            elm = elm || document;
            var classes = className.split(" "),
                classesToCheck = "",
                xhtmlNamespace = "http://www.w3.org/1999/xhtml",
                namespaceResolver = (document.documentElement.namespaceURI === xhtmlNamespace)? xhtmlNamespace : null,
                returnElements = [],
                elements,
                node;
            for(var j=0, jl=classes.length; j<jl; j+=1){
                classesToCheck += "[contains(concat(' ', @class, ' '), ' " + classes[j] + " ')]";
            }
            try    {
                elements = document.evaluate(".//" + tag + classesToCheck, elm, namespaceResolver, 0, null);
            }
            catch (e) {
                elements = document.evaluate(".//" + tag + classesToCheck, elm, null, 0, null);
            }
            while ((node = elements.iterateNext())) {
                returnElements.push(node);
            }
            return returnElements;
        };
    }
    else {
        getElementsByClassName = function (className, tag, elm) {
            tag = tag || "*";
            elm = elm || document;
            var classes = className.split(" "),
                classesToCheck = [],
                elements = (tag === "*" && elm.all)? elm.all : elm.getElementsByTagName(tag),
                current,
                returnElements = [],
                match;
            for(var k=0, kl=classes.length; k<kl; k+=1){
                classesToCheck.push(new RegExp("(^|\\\\s)" + classes[k] + "(\\\\s|$)"));
            }
            for(var l=0, ll=elements.length; l<ll; l+=1){
                current = elements[l];
                match = false;
                for(var m=0, ml=classesToCheck.length; m<ml; m+=1){
                    match = classesToCheck[m].test(current.className);
                    if (!match) {
                        break;
                    }
                }
                if (match) {
                    returnElements.push(current);
                }
            }
            return returnElements;
        };
    }
    return getElementsByClassName(className, tag, elm);
};