Garo Garabedyan's Divergent Thinking Blog

HTML OrderedList: Overflow is not preventable

with one comment

I would like to explain the small presentation bug I have found in Microsoft Internet Explorer, Mozilla Firefox and Google Chrome. All of the used browsers fail to present correctly huge numbers of ordered list items. An ordered list with type=”i” or type=”I” fails to visualise the begining of the list item numbers starting from number 888. An ordered list with type=”1″ fails to visualise the beginning of the list item numbers starting from number 10000.

The following HTML codes causes browsers to behave incorrect rendering:

<ol type="I" start="888">
  <li>List Item Number: 888</li>
  <li>List Item Number: 889</li>
  <li>List Item Number: 890</li>
  <li>List Item Number: 891</li>
  <li>List Item Number: 892</li>
  <li>List Item Number: 893</li>
  <li>List Item Number: 894</li>
</ol>

<ol type="1" start="10000">
  <li>List Item Number: 10000</li>
  <li>List Item Number: 10001</li>
  <li>List Item Number: 10002</li>
  <li>List Item Number: 10003</li>
  <li>List Item Number: 10004</li>
  <li>List Item Number: 10005</li>
  <li>List Item Number: 10006</li>
</ol>

The observed phenomena of incorrect rendering small Roman numerls (using I, V, X, L, C, D, M) than Western Hindu-Arabic (using 1, 2, 3, 4, 5, 6, 7, 8, 9, 0) is due to the fact that 8*10n (n=0,1,2,3,4…) is coded with 4 letters in Roman numerals.

8 = VIII (4 letters)

80 = LXXX (4 letters)

800 = DCCC (again 4 letters)

Therefore:

88 = LXXXVIII (4 + 4 = 8 letters)

888 = DCCCLXXXVIII (4 + 4 + 4 = 12 letters)

One thousand in Roman numerals is 1 letter in length- M.

Roman numerals on Wikipedia can be found at this address. Arabic numerals on Wikipedia can be found at this address. I have tested the above code under Internet Explorer v. 8, Mozilla Firefox v.3.6.8, Google Chrome v.6.

Advertisements

Written by garabedyan

September 28, 2010 at 19:38

One Response

Subscribe to comments with RSS.

  1. http://css-tricks.com/ie-css-bugs-thatll-get-you-every-time/
    IE CSS Bugs That’ll Get You Every Time

    Bugs in IE on The Box Model, The Double Margin, No Min Widths / Min Height, Stepdown of Floating Objects, No Hover States, No Alpha Transparent PNG Support until IE7. The article presents techniques for bypassing this bugs and limitations in older versions of Microsoft IE.

    garabedyan

    October 5, 2010 at 13:12


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s