ARCHIVED - How to indent text, images and form controls

Warning This information has been archived because it is outdated and no longer relevant.

Archived Content

Information identified as archived on the Web is for reference, research or recordkeeping purposes. It has not been altered or updated after the date of archiving. Web pages that are archived on the Web are not subject to the Government of Canada Web Standards. As per the Communications Policy of the Government of Canada, you can request alternate formats by contacting us.

Table of Contents

1.0 Introduction

It is important to use embedded styles for indenting since the blockquote element has been deprecated for the purpose of indenting.

2.0 Indenting text and images

2.1 How to indent text and images

Follow these instructions to indent text and images 18 pixels (indent1), 36 pixels (indent2), 54 pixels (indent3), 72 pixels (indent4 ) or 90 pixels (indent5) using embedded styles:

The indent1, indent2, indent3, indent4 and indent5 CSS classes have already been defined in the GC CLF 2.0 template. If you are not using the GC CLF 2.0 template, you will have to define the following CSS classes:

  • .indent1{padding-left: 18px;}
  • .indent2{padding-left: 36px;}
  • .indent3{padding-left: 54px;}
  • .indent4{padding-left: 72px;}
  • .indent5{padding-left: 90px;}

Surround the text and/or images with one of the following:

  • <p class="indent1"></p>
    (do not use between <form> and </form>)
  • <div class="indent1"></div>

The <h1>, <h2>, <h3>, <h4>, <h5> and <h6> elements may be used instead of the <p> or <div> elements. Do not use <p> or </p> in between <form> and </form> since there is a bug in Netscape 4.x that will cause the form engine to shut down.

2.2 Examples of how to use the embedded styles to indent text and images

  • <p class="indent1">This text has been indented 18 pixels using p and indent1.</p>

    This text has been indented 18 pixels using p and indent1.

  • <p class="indent1"><img src="images/wmms.gif" height="20" alt="Symbol of the Government of Canada" /></p>

    Symbol of the Government of Canada

  • <p class="indent2">This text has been indented 36 pixels using p and indent2.</p>

    This text has been indented 36 pixels using p and indent2.

  • <p class="indent2"><img src="images/wmms.gif " height="20" width="83" alt="Symbol of the Government of Canada" /></p>

    Symbol of the Government of Canada

  • <div class="indent3">This text has been indented 54 pixels using div and indent3.</div>

    This text has been indented 54 pixels using div and indent3.

  • <div class="indent3"><img src="images/wmms.gif" height="20" width="83" alt="Symbol of the Government of Canada" /></div>

    Symbol of the Government of Canada

2.3 Examples of other styles that can be used for indenting

  • This CSS class will indent 30 pixels on the left and 150 pixels on the right.

    .leftRightIndent{padding-left: 30px; padding-right: 150px;}

    This text has been formatted using the leftRightIndent class. The text is left-indented 30 pixels and right-indented 150 pixels.

  • This style will create a box with a grey background that is indented 30 pixels on the left with 5 pixels of padding on each side.

    .greyBox{width: 80%; margin-left: 30px; padding:5px 5px 5px 5px; background-color: #CCCCCC;}

    This text has been formatted using the greyBox class. The text has been left-indented 30 pixels. The background color is grey and there are 5 pixels of padding on each side.

3.0 Indenting form controls

Top of Page

3.1 How to indent form controls

Follow these instructions to indent form controls 18 pixels (indent1), 36 pixels (indent2), 54 pixels (indent3), 72 pixels (indent4) or 90 pixels (indent5) using embedded styles:

The indent1, indent2, indent3, indent4 and indent5 CSS classes have already been defined in the GC CLF 2.0 template. If you are not using the GC CLF 2.0 template, you will have to define the following CSS classes:

  • .indent1{padding-left: 18px;}
  • .indent2{padding-left: 36px;}
  • .indent3{padding-left: 54px;}
  • .indent4{padding-left: 72px;}
  • .indent5{padding-left: 90px;}

Surround the form control with <div class="indent1"></div>

Do not use <p> or </p> in between <form> and </form> since there is a bug in Netscape 4.x that will cause the form engine to shut down.

3.2 Examples of how to use the embedded styles to indent form controls

3.2.1 Text box

<div class="indent1"><label for="email"><strong>Email Address</strong></label>&#160;
<input name="email" id="email" size="30" maxlength="30" /></div>

 

3.2.2 Checkboxes and radio buttons

There are accessibility issues with radio buttons. The select form control must be used instead. Read Replacing Radio Buttons with Selects for more details.

<div class="indent1">
<fieldset>
<legend>Favourite colour</legend>
<input type="checkbox" name="check1" id="check1" value="Red" /><label for="check1">Red</label><br />
<label for="check2">White</label><input type="checkbox" name="check2" id="check2" value="White" />
</fieldset>
</div>

Favourite colour

3.2.3 Text area

<div class="indent1"><label for="comments"><strong>Comments</strong></label><br />
<textarea name=" comments" id="comments" rows="5" cols="30"></textarea></div>


3.2.4 Select

<div class="indent1"><label for="prov"><strong>You live in</strong></label><br />
<select name="prov" id="prov">
<option value="" selected="selected"></option>
<option value="AB">Alberta</option>
<option value="BC">British Columbia</option>
<option value="MB">Manitoba</option>
<option value="Other">Other</option>
</select></div>


3.2.5 Submit and reset buttons

<div class="indent1"><input type="submit" value="Submit" />&#160;&#160;&#160;&#160;<input type="reset" value="Clear" /></div>