circular bullets are not displaying in html page

StackOverflow https://stackoverflow.com/questions/23213587

  •  07-07-2023
  •  | 
  •  

Question

I am writing an un-ordered list in a html page. I have used css class for getting bullets for "li" tag. But bullets are not displaying, Instead horizontal lines are coming. I am writing html page in ColdFusion (.cfm) pages.

My html Page:

<!DOCTYPE HTML>

<html>
<head>
<title>Resource Optimization</title>

<META NAME="resource-type" CONTENT="document">
<META NAME="Description" CONTENT="DEPT: RESOURCE Optimization: Index">
<META NAME="KeyWords" CONTENT="Departments, Index, DEPT, Resource, Management, North, Generation, Report, Reports, OATI, On, Line, Tagging, Daily, Gas, Totals, Energy, Marketing, Purchase, Sales, Schedule, Schedules, Pricing, Pathing, Optimization">
<META NAME="Author" CONTENT="Intranet Contruction Crew for Sierra Pacific Resources">
<META NAME="Reply-to" CONTENT="dtheiss@nevp.com">
<META NAME="Generator" CONTENT="ColdFusion Studio 4.0">
<META NAME="Copyright" CONTENT="2000 Sierra Pacific Resources">

<META HTTP-EQUIV="content-style-type" CONTENT="text/css">
<META HTTP-EQUIV="content-language" CONTENT="en-US">
<style type="text/css">
ul.list{
list-style-type:circle;
}
</style>

</head>

<cfinclude template="/matrix_nav_top_full_min.cfm"><br> 

<!--- <body> --->
<div id="page">
    <div class="container">
        <div class="container-inner">       
                <div class="page-container" >
                <!--- <cfinclude template="/matrix_nav_top_full.cfm"> --->
                <!-------Resource Management DEPARTMENT INDEX PAGE---------->
                <font style="font-family: Verdana, Arial, Helvetica; font-size: 10pt;">
                <div align="right" style="background-color:FFFFFF; "><strong>Keyword: RM</strong></div>
                <div align="left" style="background-color:FFFFFF; ">
                <!---LOKI 17129 &nbsp;&nbsp;<img src="/dept/Graphics/title_resourceMgmt.jpg" width="480" height="40" border="0" alt="Resource Management Department">--->
                <!--- LOKI 19816&nbsp;&nbsp;&nbsp;<img src="/dept/Graphics/title_resourceProcurementOpt.jpg" width="99%" border="0" alt="Resource Procurement and Optimization">--->
                &nbsp;&nbsp;&nbsp;<img src="/dept/Graphics/title_resourceOptimization.jpg" width="98%" border="0" alt="Resource Optimization">
                <hr size="3">
                <br>
                <strong>Departmental Areas:</strong>
                <ul class="list">
                <li><a href="/DEPT/RM/gas/index.htm">Gas Optimization</a>
                <li><a href="/DEPT/RM/MarketPrices/index.htm">Market Prices</a>
                <li><a href="/DEPT/RM/Reports/index.htm">Reports</a>
                <li><a href="/DEPT/RM/STA/index.htm">Short-Term Analysis</a>
                <li><a href="/DEPT/RM/RMN/index.htm">Short-Term Optimization</a>
                <li><a href="/DEPT/RM/TMA/index.htm">Transaction and Market Analysis</a>
                </ul>
                <br><br>
                <!--- <cfinclude template="/new_footer.cfm"> --->
                </div>
                </div>

<cfinclude template="/new_footer_rd_min.cfm">                       
<!--- </body>
</html> --->

I am getting a page like below. My Unordered list

How can I get Bullets in li.

Was it helpful?

Solution

<li> elements naturally have a bullet beside them, however, you may have some other property overriding this making dashes showing up.

Add the proper list-style-type to force them back to bullets:

li{
    list-style-type: disc;
}

This is not shown in your fiddle because no CSS is provided in your fiddle, so the fiddle will appear to be exactly the same. Note that the elements do have bullets beside them in your fiddle. If I apply the list-style-type to my fiddle, it still looks the same.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top