Webmaster Forum / HTML, CSS, Scripts / CSS / August 2005

   I'm seeing some unexpected behavior with Text-indent, as shown on this
page:

    http://www.chris-winter.com/Digressions/HP_Kayak/My_Kayak.html

   I set up the following style rules for footnotes:

    DIV.FootRule    { Border-bottom: 1px Solid Gray; Margin-bottom:
2px; Text-align: Left; Width: 20% }

    DIV.FootText    { Font-family: "Times New Roman", Serif;
             Font-size: Smaller;
             Margin: 0 0 0.75em 0.5em;
             Text-align: Left; Text-indent: -0.75em }

    DIV.Foot-Ele    { Padding: 0 0.5em; Text-indent: -0.75em }

    SPAN.FootMark    { Background-color: Transparent; Color: Blue;
             Font-size: Smaller; Vertical-align: Super }

   They work all right, but a minor annoyance is that in the list at the
bottom of the page, the second and subsequent lines of each footnote wrap
under the footnote number instead of being indented a small, adjustable
amount.

   The DIV "FootText" is supposed to set all styles for text within it, and
it does that -- except for the Text-indent style. That only affects the first
footnote; apparently it's being cut off by the <BR>.

   I can get the behavior I want by enclosing each footnote in its own DIV,
as shown commented out in this example from the same page:

<DIV Class="FootRule"></DIV>
<DIV Class="FootText">

   <!-- DIV Class="Foot-Ele" --><SPAN Class="FootMark">1</SPAN> CFD is not
the <EM>most</EM> demanding computational task, of course. Nuclear weapons
design, climate prediction, and many problems in astrophysics or
bioinformatics far out-rank (or "out-crank") it. But it is among the most
demanding problems I can hope to work on using a home system.<!-- /DIV
--><BR>

<SPAN Class="FootMark">2</SPAN> The evolution of HP Personal Workstations
continues, of course. The Kayak line gave way to three "Visualize" models
using top-of-the-line Pentium-III chips and HP's Visualize fx graphics cards,
specially developed for speedy 3-D modeling work. Subsequent workstations
incorporate the Pentium 4.<BR>

<SPAN Class="FootMark">3</SPAN> A cautionary note: While searching on eBay,
I've seen P3 steppings offered that Mueller does not list. It may be that his
remarkable success with the "PC Upgrade" series &mdash; long regarded as the
bible of the topic &mdash; has led him to get sloppy.

</DIV>

   But this is cumbersome, and would mean retrofitting every page that uses
footnotes. So I hope I'm missing something and can get it to work the first
way. Any advice would be appreciated.

   IE 6, Firefox 1 and Mozilla 1.7.10 work the same. (On-line, in fact, they
don't show any text indent at all. I guess this is due to browser
non-compliance with standards.)