mozilla

Compare Revisions

Consistent list indentation

Change Revisions

Revision 20022:

Revision 20022 by Dria on

Revision 20023:

Revision 20023 by Sheppy on

Title:
Consistent List Indentation
Consistent List Indentation
Slug:
Consistent_List_Indentation
Consistent_List_Indentation
Tags:
css, NeedsUpdate
css, NeedsUpdate
Content:

Revision 20022
Revision 20023
n8      <span class="comment">Summary: Trying to change the indentan8      <span class="comment">Summary: Trying to change the indenta
>tion of lists with CSS is trickier than it looks, but only becaus>tion of lists with CSS is trickier than it looks, but only becaus
>e CSS-conformant browsers took different paths to default indenta>e CSS-conformant browsers took different paths to default indenta
>tion. Find out how to get them all in line.</span> One of the mos>tion. Find out how to get them all in line.</span> One of the mos
>t common style changes made to lists is a change in the indentati>t common style changes made to lists is a change in the indentati
>on distance-- that is, how far the list items are pushed over to >on distance -- that is, how far the list items are pushed over to
>the right. This often leads to frustration, because what works in> the right. This often leads to frustration, because what works i
> one browser often doesn't have the same effect in another. For e>n one browser often doesn't have the same effect in another. For 
>xample, if you declare that lists have no left margin, they move >example, if you declare that lists have no left margin, they move
>over in Explorer, but sit stubbornly in place in Gecko-based brow> over in Explorer, but sit stubbornly in place in Gecko-based bro
>sers.>wsers.
n11      In order to understand why this is the case, and more imporn11      In order to understand why this is the case, and more impor
>tantly how to avoid the problem altogether, it will be necessary >tantly how to avoid the problem altogether, it's necessary to exa
>to examine the details of list construction.>mine the details of list construction.
n20      <img align="none" alt="Figure 1" src="File:en/Media_Galleryn20      <img align="none" alt="Figure 1" fileid="619" src="File:en/
>/Consistent-list-indentation-figure1.gif">>Media_Gallery/Consistent-list-indentation-figure1.gif">
n26      <img align="none" alt="Figure 2" src="File:en/Media_Galleryn26      <img align="none" alt="Figure 2" fileid="620" src="File:en/
>/Consistent-list-indentation-figure2.gif">>Media_Gallery/Consistent-list-indentation-figure2.gif">
n29      Now we wrap these in a parent element; in this case, we'll n29      Now we wrap these in a parent element; in this case, we'll 
>wrap them in an unordered list (i.e., <code>ul</code>). According>wrap them in an unordered list (i.e., <code>&lt;ul&gt;</code>). A
> to the CSS box model, the list items' boxes must be displayed wi>ccording to the CSS box model, the list items' boxes must be disp
>thin the parent element's content area. Since that parent has no >layed within the parent element's content area. Since that parent
>padding or margins yet, we get the situation shown in Figure 3.> has no padding or margins yet, we get the situation shown in Fig
 >ure 3.
n32      <img align="none" alt="Figure 3" src="File:en/Media_Galleryn32      <img align="none" alt="Figure 3" fileid="621" src="File:en/
>/Consistent-list-indentation-figure3.gif">>Media_Gallery/Consistent-list-indentation-figure3.gif">
n35      Here, the dotted blue border shows us the edges of the <codn35      Here, the dotted blue border shows us the edges of the <cod
>e>ul</code> element's content area. Since we have no padding for >e>&lt;ul&gt;</code> element's content area. Since we have no padd
>the <code>ul</code> element, its content wraps snugly around the >ing for the <code>&lt;ul&gt;</code> element, its content wraps sn
>three list items.>ugly around the three list items.
n41      <img align="none" alt="Figure 4" src="File:en/Media_Galleryn41      <img align="none" alt="Figure 4" fileid="622" src="File:en/
>/Consistent-list-indentation-figure4.gif">>Media_Gallery/Consistent-list-indentation-figure4.gif">
n44      Visually, the markers are <i>outside</i> the content area on44      Visually, the markers are <i>outside</i> the content area o
>f the <code>ul</code>, but that's not the important part here. Wh>f the <code>&lt;ul&gt;</code>, but that's not the important part 
>at's key is that the markers are placed outside the "principal bo>here. What's key is that the markers are placed outside the "prin
>x" of the <code>li</code> elements, not the <code>ul</code>. They>cipal box" of the <code>&lt;li&gt;</code> elements, not the <code
>'re sort of like appendages to the list items, hanging outside th>>&lt;ul&gt;</code>. They're sort of like appendages to the list i
>e content-area of the <code>li</code> but still attached to the <>tems, hanging outside the content-area of the <code>&lt;li&gt;</c
>code>li</code>.>ode> but still attached to the <code>&lt;li&gt;</code>.
n47      This is why, in every browser except Internet Explorer for n47      This is why, in every browser except Internet Explorer for 
>Windows, markers are placed outside any border set for an <code>l>Windows, markers are placed outside any border set for an <code>&
>i</code> element, assuming the value of <code>list-style-position>lt;li&gt;</code> element, assuming the value of <code>list-style-
></code> is <code>outside</code>. If it's changed to <code>inside<>position</code> is <code>outside</code>. If it's changed to <code
>/code>, then the markers are brought inside the <code>li</code>'s>>inside</code>, then the markers are brought inside the <code>&lt
> content, as though they're an inline box placed at the very begi>;li&gt;</code>'s content, as though they're an inline box placed 
>nning of the <code>li</code>.>at the very beginning of the <code>&lt;li&gt;</code>.
n65      <li>Give each <code>li</code> element a left margin.n65      <li>Give each <code>&lt;li&gt;</code> element a left margin
 >.
n67      <li>Give the <code>ul</code> element a left margin.n67      <li>Give the <code>&lt;ul&gt;</code> element a left margin.
n69      <li>Give the <code>ul</code> element some left padding.n69      <li>Give the <code>&lt;ul&gt;</code> element some left padd
 >ing.
n76      Let's look at the two approaches for a moment. In Internet n76      Let's look at the two approaches for a moment. In Internet 
>Explorer and Opera, the lists are indented by setting a left marg>Explorer and Opera, the lists are indented by setting a left marg
>in of 40 pixels on the <code>ul</code> element. If we apply a bac>in of 40 pixels on the <code>&lt;ul&gt;</code> element. If we app
>kground color to the <code>ul</code> element and leave the list i>ly a background color to the <code>&lt;ul&gt;</code> element and 
>tem and <code>ul</code> borders in place, we get the result shown>leave the list item and <code>&lt;ul&gt;</code> borders in place,
> in Figure 5.> we get the result shown in Figure 5.
n79      <img align="none" alt="Figure 5" src="File:en/Media_Galleryn79      <img align="none" alt="Figure 5" fileid="623" src="File:en/
>/Consistent-list-indentation-figure5.gif">>Media_Gallery/Consistent-list-indentation-figure5.gif">
n82      Gecko, on the other hand, sets a left <i>padding</i> of 40 n82      Gecko, on the other hand, sets a left <i>padding</i> of 40 
>pixels for the <code>ul</code> element, so given the exact same s>pixels for the <code>&lt;ul&gt;</code> element, so given the exac
>tyles as were used to produce Figure 5, loading the example into >t same styles as were used to produce Figure 5, loading the examp
>a Gecko-based browser gives us Figure 6.>le into a Gecko-based browser gives us Figure 6.
n85      <img align="none" alt="Figure 6" src="File:en/Media_Galleryn85      <img align="none" alt="Figure 6" fileid="624" src="File:en/
>/Consistent-list-indentation-figure6.gif">>Media_Gallery/Consistent-list-indentation-figure6.gif">
n88      As we can see, the markers remain attached to the <code>li<n88      As we can see, the markers remain attached to the <code>&lt
>/code> elements, no matter where they are. The difference is enti>;li&gt;</code> elements, no matter where they are. The difference
>rely in how the <code>ul</code> is styled. We can only see the di> is entirely in how the <code>&lt;ul&gt;</code> is styled. We can
>fference if we try to set a background or border on the <code>ul<> only see the difference if we try to set a background or border 
>/code> element.>on the <code>&lt;ul&gt;</code> element.
n94      Boil it all down, and what we're left with is this: if you n94      Boil it all down, and what we're left with is this: if you 
>want consistent rendering of lists between Gecko, Internet Explor>want consistent rendering of lists between Gecko, Internet Explor
>er, and Opera, you need to set <b>both</b> the left margin and le>er, and Opera, you need to set <b>both</b> the left margin and le
>ft padding of the <code>ul</code> element. We can ignore <code>li>ft padding of the <code>&lt;ul&gt;</code> element. We can ignore 
></code> altogether for these purposes. If you want to reproduce t><code>&lt;li&gt;</code> altogether for these purposes. If you wan
>he default display in Netscape 6.x, you write:>t to reproduce the default display in Netscape 6.x, you write:
n106      Of course, you can fill in your own preferred values. Set bn106      Of course, you can fill in your own preferred values. Set b
>oth to <code>1.25em</code>, if you like-- there's no reason why y>oth to <code>1.25em</code>, if you like -- there's no reason why 
>ou have to stick with pixel-based indentation. If you want to res>you have to stick with pixel-based indentation. If you want to re
>et lists to have no indentation, then you still have to zero out >set lists to have no indentation, then you still have to zero out
>both padding and margin:> both padding and margin:
t144    </div>{{ wiki.languages( { "fr": "fr/Indentation_homog\u00e8nt144    </div>{{ languages( { "fr": "fr/Indentation_homog\u00e8ne_des
>e_des_listes" } ) }}>_listes" } ) }}

Back to History