What's the secret to removing the indent from an OL & UL?

efeezy

efeezy

New member
Oct 5, 2007
5,250
136
0
50
Why is this not removing the huge indent from my ordered & unordered lists?

Code: 
}

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

This isn't doing it either.

Code: 
ol li {
	margin: 0;
	padding: 0;
}

I'm sure I'm missing something stupid. Any suggestions? Thanks.
 


without seeing the entire css file and your source code it would be hard to tell... however, try !important
 
flaw3d said:
The secret is google......................

#Nolie
Click to expand...

Everything I got from a search included just adding

{margin: 0;
padding: 0;}

to the ol & ul. Which I've tried, and it's not doing the trick. I'll keep messing with it.
 
Works for me...

Code: 
<style type="text/css">
ul.notindented {
  margin: 0;
  padding: 0;
}

ul.notidented li {
  list-type: none;
  margin: 0;
  padding: 5px 0 5px 0;
  /* pad top and bottom, but not right and left */
}
</style>

<ul class="notindented">
<li>No bullet mark and not indented.</li>
</ul>
 
  • Like
Reactions: efeezy
Inspect element on Chrome. You can see the hierarchy of the CSS, which attributes are actually applied, and which ones are being overridden by other CSS. It's the only real way I know of to sniff this kind of thing out.
 
rish3 said:
Works for me...

Code: 
<style type="text/css">
ul.notindented {
  margin: 0;
  padding: 0;
}

ul.notidented li {
  list-type: none;
  margin: 0;
  padding: 5px 0 5px 0;
  /* pad top and bottom, but not right and left */
}
</style>

<ul class="notindented">
<li>No bullet mark and not indented.</li>
</ul>
Click to expand...

Genius man...genius. +rep
 
always use chrome's dev tools to see what rule has precedence over multiple css rules. you can even edit the css right from the dev panel which saves a lot of time of editing code and refreshing.
 
Meatytreats said:
yep!

hence, the !important to override them!
Click to expand...

This shouldn't be necessary. Using !important should be avoided.

FWIW, these are my default list styles, "plain" being flush left with no bullets or digits:

Code: 
ul {
	margin: 0 0 20px 24px;
	padding: 0;
	list-style: disc outside;
}

ol {
	margin: 0 0 20px 24px;
	padding: 0;
	list-style: decimal outside;
}

li ul,
li ol {
	margin-bottom: 0;
}

.plain {
	list-style: none;
	margin: 0 0 20px 0;
}
 
xmcp123 said:
Inspect element on Chrome. You can see the hierarchy of the CSS, which attributes are actually applied, and which ones are being overridden by other CSS. It's the only real way I know of to sniff this kind of thing out.
Click to expand...

Or Firebug if you're a Firefox guy.
 
Meatytreats said:
yep!

hence, the !important to override them!
Click to expand...

That is lazy coding. You're not fixing the overriding problem. What should he do when he gets to the next section and has the same problem? use !important? just keep using it over and over until pretty soon the whole css is !important?
 
dmnEPC said:
That is lazy coding. You're not fixing the overriding problem. What should he do when he gets to the next section and has the same problem? use !important? just keep using it over and over until pretty soon the whole css is !important?
Click to expand...

I agree that using !important is lazy, but it is a useful way to test your code. If !important makes the code work, it's probably a specificity issue. The code could then be fixed by adding more selectors and removing !important. Here is an explanation of specificity for anyone who isn't familiar with the concept:

CSS Specificity: Things You Should Know | Smashing Coding
 
You must log in or register to reply here.
Top Bottom
Back