Re: [css-d] How do you adjust the indent on UL LI elements?
Robert Lane asked: How would I write a style to get rid of or reduce the
indent on the list items?
I would suggest that you zero out browser default margin and padding
with:
* { margin:0 ; padding:0; }
And do not rely on inheritance for the 2nd level list item and instead
specify li margins with:
Ul li li {margin-left:20px; }
Cheers,
dino
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] How do you adjust the indent on UL LI elements?
Paul Novitski wrote:
Every browser comes with a default stylesheet; these differ slightly
from one browser to the next. Many people zero out many of these
default styles, making it easier to get the same predictable effects
cross-browser. A very simple example would be:
*
{
margin: 0;
padding: 0;
}
In other words, remove all default margins padding from all
elements on the page. If you do this, you'll then have the
responsibility for adding margins padding back to those elements
from which you expect it, such as Hn P tags. Some web developers
find this a nuisance; I find it an agreeable and necessary part of
deliberate styling.
I'm one of those who finds it a nuisance that results in more CSS not
less. :-) But even if you do choose to use it, do *not* use the
universal selector. This is far too aggressive and results in buttons no
longer acting like buttons, for instance. Read more here:
http://kurafire.net/log/archive/2005/07/26/starting-css-revisited
I would suggest only zeroing out what you really need to zero out, which
includes list margin and padding.
Zoe
--
Zoe M. Gillenwater
Design Services Manager
UNC Highway Safety Research Center
http://www.hsrc.unc.edu
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] How do you adjust the indent on UL LI elements?
Paul Novitski wrote:
Every browser comes with a default stylesheet; these differ slightly
from one browser to the next. Many people zero out many of these
default styles, making it easier to get the same predictable effects
cross-browser. A very simple example would be:
*
{
margin: 0;
padding: 0;
}
In other words, remove all default margins padding from all
elements on the page. If you do this, you'll then have the
responsibility for adding margins padding back to those elements
from which you expect it, such as Hn P tags. Some web developers
find this a nuisance; I find it an agreeable and necessary part of
deliberate styling.
At 06:04 AM 7/13/2006, Zoe M. Gillenwater wrote:
I'm one of those who finds it a nuisance that results in more CSS not
less. :-) But even if you do choose to use it, do *not* use the
universal selector. This is far too aggressive and results in buttons no
longer acting like buttons, for instance. Read more here:
http://kurafire.net/log/archive/2005/07/26/starting-css-revisited
Zoe, can you be more specific about buttons no longer acting like
buttons? In following links from Faruk Ates' article I saw a couple
of references to this problem but no more precise description nor
examples of the alleged misbehavior.
As I use Mozilla/Firefox as my primary browser and test in others,
have been using the star-selector to eliminate margins padding for
a couple of years now, and have never noticed my buttons acting like
snaps, zippers, or string ties, I'm both curious and bemused.
Regards,
Paul
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] How do you adjust the indent on UL LI elements?
One of the commenters asked Faruk that question, and here is the reply:
#21 · Faruk Ate#351; · Sep 7, 2005 (16:18)
Dean,
If you click on a default, square button, it'll invert the bevel and
move the text slightly to make it appear as if you've actually pushed
it in, pushed it deeper. Using the * selector removes that
functionality, and when you then click a button, it'll not look as if
you're pushing it in.
--Guy K. Haas
Software Exegete in Silicon Valley
Paul Novitski wrote:
Every browser comes with a default stylesheet; these differ slightly
from one browser to the next. Many people zero out many of these
default styles, making it easier to get the same predictable effects
cross-browser. A very simple example would be:
*
{
margin: 0;
padding: 0;
}
In other words, remove all default margins padding from all
elements on the page. If you do this, you'll then have the
responsibility for adding margins padding back to those elements
from which you expect it, such as Hn P tags. Some web developers
find this a nuisance; I find it an agreeable and necessary part of
deliberate styling.
At 06:04 AM 7/13/2006, Zoe M. Gillenwater wrote:
I'm one of those who finds it a nuisance that results in more CSS not
less. :-) But even if you do choose to use it, do *not* use the
universal selector. This is far too aggressive and results in buttons no
longer acting like buttons, for instance. Read more here:
http://kurafire.net/log/archive/2005/07/26/starting-css-revisited
Zoe, can you be more specific about buttons no longer acting like
buttons?
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] How do you adjust the indent on UL LI elements?
My page is at:
http://www.careercounselingservices.com/test2/outplacement.htm
If you scroll down in the lower half of the page (yes it is long!)
there are some nested unordered lists.
I want to reduce the indents.
I tried the following but it didn't seem to work:
.disc{list-style-type: disc;}
.square{list-style-type: square;}
.dash li {list-style-type: none;}
ul.disc li{margin-left: 1em;}
ul.square li{margin-left: 1em;}
ul.dash#questions li:before { content: - ; } --trying to get a
dash, am going to change it to an image based on latest list posting.
How would I write a style to get rid of or reduce the indent on the list
items?
Thanks!!!
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] How do you adjust the indent on UL LI elements?
-BEGIN PGP SIGNED MESSAGE- Hash: SHA1 Robert Lane wrote: How would I write a style to get rid of or reduce the indent on the list items? Try playing around with the paddings of the ul. Ricky -BEGIN PGP SIGNATURE- Version: GnuPG v1.4.3 (GNU/Linux) iD8DBQFEtYQ+iXbZ7NjlUcARAu79AKDKBdzKSyBGftc7vrOP7xvs4HmlLACgz2rb M7H8JyTLPU7lC/CSa8ElD6M= =HnRf -END PGP SIGNATURE- __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] How do you adjust the indent on UL LI elements?
Robert Lane wrote:
My page is at:
http://www.careercounselingservices.com/test2/outplacement.htm
If you scroll down in the lower half of the page (yes it is long!)
there are some nested unordered lists.
I want to reduce the indents.
I tried the following but it didn't seem to work:
.disc{list-style-type: disc;}
.square{list-style-type: square;}
.dash li {list-style-type: none;}
ul.disc li{margin-left: 1em;}
ul.square li{margin-left: 1em;}
ul.dash#questions li:before { content: - ; } --trying to get a
dash, am going to change it to an image based on latest list posting.
How would I write a style to get rid of or reduce the indent on the list
items?
Thanks!!!
Hi Robert,
Maybe you can give a try to:
ul.disc {margin-left: -20px;}
ul.square {margin-left: -20px;}
Then the whole ul's are shifting, inclusive their li's.
Greetings,
francky
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] How do you adjust the indent on UL LI elements?
At 03:43 PM 7/12/2006, Robert Lane wrote:
My page is at:
http://www.careercounselingservices.com/test2/outplacement.htm
If you scroll down in the lower half of the page (yes it is long!)
there are some nested unordered lists.
I want to reduce the indents.
...
How would I write a style to get rid of or reduce the indent on the list
items?
Robert,
The most obvious CSS properties affecting the indent of an
unordered list item will be the left padding margin on the UL LI
elements. On first glance I can't see where you've assigned these
styles in your stylesheets, so I'd guess your list items are being
styled by the browser itself.
Every browser comes with a default stylesheet; these differ slightly
from one browser to the next. Many people zero out many of these
default styles, making it easier to get the same predictable effects
cross-browser. A very simple example would be:
*
{
margin: 0;
padding: 0;
}
In other words, remove all default margins padding from all
elements on the page. If you do this, you'll then have the
responsibility for adding margins padding back to those elements
from which you expect it, such as Hn P tags. Some web developers
find this a nuisance; I find it an agreeable and necessary part of
deliberate styling. Other properties I commonly flatten at the
beginning of stylesheets include font-weight family.
Paul
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
