Getting Rid of Indent with a <li>

I am trying to get my menu to flush to the left at this site i am trying to make all css,

http://www.kardwelldev.com/wheelsofchance/newsite/

However, the <li> items seem to keep the indent no matter what I try to do to make that space go away.

Also, in IE, the spacing does not match up with what I see in FF so now I am not sure I am doing this right at all.

Any help or advice on this would be great,

paul

One uses the margin and the other uses padding to get the indent so you need to zero both.

Hi Stephen,

I did

margin:0px;
padding:0px;

for my li items and nothing changed. Am I doing something wrong here?

You also have to hit the UL.

Part of why I advocate using resets.

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

and if you need to, then adjust the margins, padding and display style to get the layout you want.

Or you could save yourself a bunch of redundant properties and set:


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

Since zero is always zero and the condensed list-style property takes 'em all down.

thanks Kalon and Deathshadow,

What happens when I want to use ul, li in the site somewhere with bullets then.

can I use a class for that then?

Also, deathshadow, what do you mean by using resets?

Thanks for the help and advice on this,

Paul

A reset is to get browser consistency for margins and padding. You start your stylesheet with it. something like:


html,body,address,blockquote,div,form,fieldset,caption,h1,h2,h3,h4,h5,h6,hr,ul,ol,ul,li,table,tr,td,th,p,img {
	margin:0; padding:0;
}

ul, ol, li {
	list-style-type: none; 	
}

img,fieldset{
	border: none;
}

Since the reset is where you start with, you indeed have to use a class to use bullets for that list

Pretty much, the reset I use is a bit smaller:


/* null margins and padding to give good cross-browser baseline */
html,body,address,blockquote,div,
form,fieldset,caption,
h1,h2,h3,h4,h5,h6,
hr,ul,li,ol,ul,
table,tr,td,th,p,img {
	margin:0;
	padding:0;
}

img,fieldset {
	border:none;
}

But is pretty much the same idea.

As to the question

>> What happens when I want to use ul, li in the site somewhere with bullets then.

that’s why I don’t do that in my reset… generally when I turn them off it’s from a ID or class on the UL.

#mainMenu {
list-style:none;
}

for example, the reset hitting all others. I’ll then add the padding back on the left side of the UL (typically 1.5em) in the cases where I’m going to have bullets.

Though you can always turn bullets back on with list-style:disc;

or one of the other styles like circle, square, decimal, etc…

Usually I don’t set defaults for ul’s or ol’s. Any slight differences between browsers in rendering lists doesn’t normally cause me any problems.

It’s only when I want to do something different to the default layout for lists that I set their css styles by giving the lists either an id or class, whichever is more appropriate.

See what is confusing to me with this project though is this,

I have a class set as

#menuitems li {
font-weight:bold;
list-style:none;
margin:0;
padding:0;
text-align:left;

with the <ul class=“menuitems”>

and for some reason it is not listening to my list-style: declaration.

ok, forget it,

that reset thing you guys taught me in this post seemed to clear up the problem that I was having.

Thanks so much for all the help with this,

Paul

If your ul has a class name then in your css

#menuitems li {

should be

[COLOR=red][B].[/B][/COLOR]menuitems li {