4 replies [Last post]
Gareth Brace
Gareth Brace's picture
Offline
newbie
Last seen: 8 years 21 weeks ago
Joined: 2011-09-03
Posts: 1
Points: 2

Hi,

In MS word bullets of type lower-alpha are aligned to the left, hence a, b, c, etc. are all shown on the same vertical plane like this:

WordBullets.gif

However, in HTML the alignment is based on the full stop of the bullet, thus de-facto aligning the bullet to the right like this:

HTMLBullets.gif

Is there any CSS attribute that I can apply to either OL or LI to achieve the left alignment example ? I can see how text can be aligned after the bullet but not the bullet itself.

p.s. Solution only has to work in IE.

Thanks in advance....

Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 22 hours 51 min ago
Timezone: GMT-4
Joined: 2009-10-09
Posts: 2043
Points: 2268

It looks really unnatural

It looks really unnatural being left aligned. If they are all going to be single letters then you could define the font-family as monospace. That'll at least line them up.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 7 hours 4 sec ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9754
Points: 3836

counting on my fingers

I have to agree with V. The browser rendering seems more appropriate to me, too. But, it is your page, so ….

First thing, read CSS §12.4 Automatic counters and numbering. I find the section confusing, so good luck.

Here's my take on getting what you want.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta content="text/html; charset=utf-8"
          http-equiv="Content-Type" />
    <title>
      test doc
    </title>
    <style type="text/css">
/*<![CDATA[*/
 
    ol {
      list-style: none;
      counter-reset: alist 11;
      }
 
    li {
      position: relative;
      }
 
    li:before {
      position: absolute;
      left: -40px;
      content: counter(alist, lower-latin) ".";
      counter-increment: alist;
      }
 
    /*]]>*/
    </style>
  </head>
  <body>
    <ol>
      <li>test
      </li>
 
      <li>test<br />
        test<br />
        test
      </li>
 
      <li>test
      </li>
 
      <li>test
      </li>
    </ol>
  </body>
</html>
Tested in modern browsers and in IE9. IE8 should work OK, but I don't know about v7. Pretty sure v6 is a major FAIL. I am happy to report I no longer support 6, so really don't care. Laughing out loud

cheers.

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 22 hours 51 min ago
Timezone: GMT-4
Joined: 2009-10-09
Posts: 2043
Points: 2268

I was working on an idea but

I was working on an idea but had to split. Nice solution, gt! Smile

gary.turner wrote:

... I am happy to report I no longer support 6, so really don't care. Laughing out loud

You're totally like my hero. Honestly! I quit worrying about IE6 a few years ago even for professional projects. No one noticed so I guess it was ok. Wink

If you change li:before from left: -40px; to left: -1.5em; you can maintain the look with text size changes.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 7 hours 4 sec ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9754
Points: 3836

Verschwindende wrote: I was

Verschwindende wrote:

I was working on an idea but had to split. Nice solution, gt! Smile

gary.turner wrote:

... I am happy to report I no longer support 6, so really don't care. Laughing out loud

You're totally like my hero. Honestly!

Excuse me, that's Super Hero to you, Bub. Tongue

Quote:

If you change li:before from left: -40px; to left: -1.5em; you can maintain the look with text size changes.

You'd probably also want to change the ul's padding-left to the same value. I just used the browsers' default indent.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.