Improve company productivity with a Business Account.Sign Up

x
?
Solved

CSS "list-style-type: initial" rule makes an ordered list use discs

Posted on 2014-03-04
5
Medium Priority
?
464 Views
Last Modified: 2014-03-04
I've got this bit of HTML, adapted from an example on w3schools.com:

<!DOCTYPE html>
<html>
<head>
<title>List Style Test</title>
<style type="text/css">

li
{
   list-style-type: initial;
}

</style>
</head>
<body>

<ol type="A">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>
 
</body>
</html>

Open in new window


Firefox and Chrome both render the list as if I'd specified list-style-type: disc. Shouldn't the initial value for that rule be list-style-type: upper-roman? Am I misunderstanding how initial works?
0
Comment
Question by:CPColin
  • 2
  • 2
5 Comments
 
LVL 35

Expert Comment

by:Paul MacDonald
ID: 39903989
list-style-type: initial sets the list type to whatever is default for the browser.  

list-style-type: upper-roman will force the use of I, II, III, etc.
0
 
LVL 58

Accepted Solution

by:
Gary earned 2000 total points
ID: 39903996
The default is disc and that is what you are setting using initial
Why do you think it should be upper-roman

edit.
I understand the confusion, OL will be styled differently (roman) but setting initial overrides the browser styles and sets it back to disc.
0
 
LVL 14

Author Comment

by:CPColin
ID: 39904003
In my mind, it should be upper-roman because the ol element has a type="A" attribute.
0
 
LVL 58

Expert Comment

by:Gary
ID: 39904020
initial is not supported in IE ergo not overriding.

I would assume the CSS is overriding the tag declaration since that is not css.
0
 
LVL 14

Author Closing Comment

by:CPColin
ID: 39904303
Question: "Am I misunderstanding how initial works?"
Answer: "Yes."

Looks like initial grabs the value from the CSS specification, not the browser's defaults, which is not at all what I expected.
0

Featured Post

Easily Design & Build Your Next Website

Squarespace’s all-in-one platform gives you everything you need to express yourself creatively online, whether it is with a domain, website, or online store. Get started with your free trial today, and when ready, take 10% off your first purchase with offer code 'EXPERTS'.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

608 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question