Page 1 of 1

CSS: Inline UL with square bullets

Posted: Wed Mar 08, 2006 10:22 am
by darryladie
Hi guys, a quick CSS query, I am trying to create an inline unordered list that also has square bullets, I have made them inline and added a margin and so there is a gap etc. but cant get the square bullets to appear next the items.

Here is the CSS and XHTML I have written, any suggestions greatly appreciated :P

Code: Select all

<head>
<style type="text/css">
ul.course
	{
		margin: 12px 0;
	}
	ul.course li
	{
		display: inline;
		list-style-type: square;
		margin: 0px 8px;
		padding: 0px 8px;
	}
</style>
</head>
<body>
	<ul class="course">
		<li>What is Autism</li>
		<li>What is Asperger Syndrome?</li>
		<li>The body/ mind connection</li>
		<li>Diet and Autistic Spectrum Disorder</li>
		<li>Family History</li>
		<li>Research</li>
		<li>Tests</li>
		<li>Possible Benefits</li>
		<li>Possible Pitfalls</li>
		<li>Records</li>
		<li>Planning</li>
		<li>Case Histories</li>
		<li>Recipes and Resources</li>
	</ul>
</body>

<html>

Posted: Wed Mar 08, 2006 11:08 am
by matthijs
Float works:

Code: Select all

ul.course
   {
      margin: 12px 0;
   }
   ul.course li
   {
      list-style-type: square;
      float:left;
		  
      margin: 0px 8px;
      padding: 0px 8px;
   }

Posted: Wed Mar 08, 2006 11:16 am
by darryladie
That didnt work in Opera

and

I can't use floats because the height of the div that the content is in extends to cover all the content and it doesnt if you use float.

Could I use background and add an image to the list items? 8)

Posted: Wed Mar 08, 2006 11:36 am
by matthijs
Yes you could use images:

Code: Select all

ul {
  margin: 0;
  padding: 0;
  float: left;
  width: 700px;
  background: #ddd;
  list-style: none;
}

ul li {
  float: left;
  display: block;
  padding: 0 1em;
  line-height: 2em;
  background: url(bullet.gif) repeat-y 0 0;
  text-decoration: none;
  color: #fff;
 
}
This uses floats again, but if you run into problems floats not being cleared use clear:both on the following element. Otherwise take out the floats. The principle is the same: background image and padding-left the size of the image.
This code works in modern browsers. But you should check yourself if it works in every browser.