Request 1.

How to remove default indenting with lists.

Request made by Jeremy.

The problem:

I have a problem with my design (www.affectus.net/freelance/jezz_two/). when I want to add unordered lists to the sidebar, or side menu, i can't get them to align where i want them. there is always too much blank space to the left of the ul. when i had them setup the way i wanted, i tested in a couple of browsers, and in IE, they were completely hidden. Is it best to find a compromise for alignment, or is there something I can do to the structure?

The Solution:

As you can see in the image above Jeremy's problem is the waste of space and appearance issues the list is causing. This indent is caused automatically when you create a xhtml list. It helps the reader distinguish the contents of the list by adding padding to the left of each point. Even if you remove the bullet like Jeremy has done, the indent remains.

We have to overwrite this default rule by making changes to our ul rule.

ul {
list-style: none;
padding: 0;
margin: 0;
}

list-style: none; simply removes the bullet from each point.

padding: 0; removes the default indent and 0 means there is no padding or indent on the list at all. This number can be set to any amount if you do choose to have an indent. Please remember padding: 0; is making changes to every side of your list. If you want no padding only on the indent side simply type: padding-left: 0; or padding: 5px 5px 5px 0; where 5px is every other side and 0 is the left. When using that format think of it as a clock face. 12=top, 3=right, 6=bottom and 9=left.

margin: 0; makes sure there is no margin which is pushing the indent further left then it already is. This is not necessary and can be removed from the ul rule if you already have a margin.

The final result: