Hello,

I have been working on a page that uses nested <ul> tags. Im setting this page up to act as a sitemap for users and want it to look well presented. When i initially did a very raw draft (not using much styleing) the format was perfect.

I was getting parent and sub categories of the <ul>'s to indent properly. However now with the final priduct the bullets do not show up and the nested <ul>'s do not indent.

In FF the bullets show correctly, but they are outside the background and nothing is indented.

here is the site;

digitalvisions.org/SM.php

this is my code...take note that the page is generated using 3 files...this is just the code for the content. (the files go SM.php > SM_body.html > SMlist_body.html) This code will be from from SMlist_body.html

I simply wana know how i can get the information under the white titles in the blue blocks to follow normal <ul> parameters, in other words showing bullets and having indents.

**code below**

I actually cannot post the code...its not working ive tried a bunch of ways...if its really needed ill figure out a way

You have the universal selector at the beginning of the CSS document zeroing out all margins and padding with:

CSS

* {
margin: 0;
padding: 0;
}

the indent on a <ul> comes from a left margin. It is probably better not to mess with the browser reset, so what you should do is place a class on the <ul> you're interested in, say class="bullets". Then, in the CSS document, you can do something like this:

CSS

ul.bullets {
margin-left: 15px;
}

Also, if you're interested in the nested <ul> having a margin on it also, so it stands out from the parent, you can do this:

CSS

ul.bullets ul {
margin-left: 15px;
}

Wayfarer, i could make love to you...i wont because the awsomeness of it would overwhelm you...but im almost happy enough to take the risk

Seriously thank you, fixed up my problem easily. I spent a good hour or so on it. I have been teaching myself CSS and HTML for a few months and have been exploring new methods of using CSS.

I have heard the term "browser reset" a few times, this is a setting to make sure that the padding and indents is universal (or close to it) amonsgt browsers right? So its better to leave it then overide that setting by digging a little deeper like you just showed?

Originally Posted by ctbinccp

I have heard the term "browser reset" a few times, this is a setting to make sure that the padding and indents is universal (or close to it) amonsgt browsers right?

Correct. There are different ways of dealing with this, but I choose the simplest way, which is exactly as it is done in your CSS document. You do need to be aware that this will strip margins and padding from paragraphs and form elements, but this is generally ok, since you can just put them back in a way that you prefer them.

Originally Posted by ctbinccp

So its better to leave it then overide that setting by digging a little deeper like you just showed?

Correct.

Originally Posted by ctbinccp

I have been teaching myself CSS and HTML for a few months and have been exploring new methods of using CSS.

Keep teaching yourself. It's how most of us learned. You'll get there soon enough.

Cheers

Oddly enough i realised today that i actually overcame this same issue with paragraphs. I couldnt for the life of me figure out why the <p> wasnt causing indents so i just made a css selector/class (termonology is not something im good with) for the <p>'s i wanted to indent.

Never occured to me what was causing it though

With the unordered lists i figured it was some larger issue, more with html syntax then css practices. I toiled with the concept that maybe i had to nest the <ul>'s that were messed up inside a container tag like div or span, which didnt matter of course.

had you not heled i may have spent days and lots of time searching the net until i stumbled on simply adding the indent. You saved me a ton of time thanks.

You're welcome