Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 751
  • Last Modified:

CSS: Bullets don't work in unordered list (Firefox)

I see the square bullets in IE but not in Firefox.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Title</title>
<style type="text/css" media="all">
 
#tangle ol {
  margin: 0;
  padding: 0;
  display: block;
  font-size: 12px;
  color: #993333;
  list-style-position: outside; 
}
 
#tangle li {
  margin: 0;
  padding: 0 0 0 10px;
  display: block;
  font-size: 12px;
  color: #993333;
  list-style-type: square;
}
 
</style>
 
</head>
<body>
 
<div id="rect">
 <div id="tangle">
	<div>
	 <h1>sfdgfd g dfgfdg</h1>
	 <ul>
	  <li>sdfgsdf fd fdgsfdgfsd fdsgf</li>
	  <li>sfdgsdffs df fsd  fds g</li>
	  <li>sdfgsdf fd fdgsfdgfsd fdsgf</li>
	  <li>sfdgsdffs df fsd  fds g</li>
	  <li>sdfgsdf fd fdgsfdgfsd fdsgf</li>
	  <li>sfdgsdffs df fsd  fds g</li>
	  <li>sdfgsdf fd fdgsfdgfsd fdsgf</li>
	  <li>sfdgsdffs df fsd  fds g</li>
	 </ul>
	</div>
	<div>
	 <h1>sfdgfdsgsfdgfsdg</h1>
	 <ul>
	  <li>sdfgsdf fd fdgsfdgfsd fdsgf</li>
	  <li>sfdgsdffs df fsd  fds g</li>
	  <li>sdfgsdf fd fdgsfdgfsd fdsgf</li>
	  <li>sfdgsdffs df fsd  fds g</li>
	  <li>sdfgsdf fd fdgsfdgfsd fdsgf</li>
	  <li>sfdgsdffs df fsd  fds g</li>
	  <li>sdfgsdf fd fdgsfdgfsd fdsgf</li>
	  <li>sfdgsdffs df fsd  fds g</li>
	 </ul>
	</div>
 </div>
</div>
 
</body>
</html>

Open in new window

0
hankknight
Asked:
hankknight
2 Solutions
 
Roger BaklundCommented:
Put the list-style-type: square; rule on the 'ul' element, not on the 'li'.
0
 
Eternal_StudentCommented:
You had a couple of problems here which I have cleaned up for you:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Title</title>
<style type="text/css" media="all">
 
#tangle ul {
  margin: 0;
  padding: 0;
  font-size: 12px;
  color: #993333;
  list-style-position: outside; 
  list-style-type: square;
}
 
#tangle li {
  margin: 0 0 0 20px;
  padding: 0 0 0 10px;
	display:list-item;
  font-size: 12px;
  color: #993333;
}
 
</style>
 
</head>
<body>
 
<div id="rect">
 <div id="tangle">
        <div>
         <h1>sfdgfd g dfgfdg</h1>
         <ul>
          <li>sdfgsdf fd fdgsfdgfsd fdsgf</li>
          <li>sfdgsdffs df fsd  fds g</li>
          <li>sdfgsdf fd fdgsfdgfsd fdsgf</li>
          <li>sfdgsdffs df fsd  fds g</li>
          <li>sdfgsdf fd fdgsfdgfsd fdsgf</li>
          <li>sfdgsdffs df fsd  fds g</li>
          <li>sdfgsdf fd fdgsfdgfsd fdsgf</li>
          <li>sfdgsdffs df fsd  fds g</li>
         </ul>
        </div>
        <div>
         <h1>sfdgfdsgsfdgfsdg</h1>
         <ul>
          <li>sdfgsdf fd fdgsfdgfsd fdsgf</li>
          <li>sfdgsdffs df fsd  fds g</li>
          <li>sdfgsdf fd fdgsfdgfsd fdsgf</li>
          <li>sfdgsdffs df fsd  fds g</li>
          <li>sdfgsdf fd fdgsfdgfsd fdsgf</li>
          <li>sfdgsdffs df fsd  fds g</li>
          <li>sdfgsdf fd fdgsfdgfsd fdsgf</li>
          <li>sfdgsdffs df fsd  fds g</li>
         </ul>
        </div>
 </div>
</div>
 
</body>
</html>

Open in new window

0

Featured Post

New feature and membership benefit!

New feature! Upgrade and increase expert visibility of your issues with Priority Questions.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now