Hi there, I'm encountering an issue with the ol and ul tags not displaying numbers and circles on the left side. I am not using a reset css file. Below is my code snippet:
<ol>
<li>ALL FILES</li>
<li>PHP SCRIPTS</li>
<li>WORDPRESS</li>
<li>JAVASCRIPT</li>
<li>CSS MOBILE</li>
</ol>
...
Any suggestions on how to get the ol and ul lists to show numbers and circles correctly?
UPDATE: Hover over the List link to visualize my concern:
link
It has been noted by other responses that the issue arises from the li elements being styled with display: block, causing them to expand and push the numbers or bullets out of view.
To address this problem, simply update the CSS code from:
#menu li {
display: block;
padding-left: 18px;
}
to the following:
#menu li {
display: inline-block; /* prevents bullets from disappearing while still allowing for padding */
padding-left: 8px;
margin-left: 10px; /* provides enough space for bullet points to show */
}
Furthermore, all li items in this section have been set to decimal format:
#menu .dropdown_3columns ol,
#menu .dropdown_3columns ul {
float: left;
margin-top: 40px;
margin-bottom: 25px;
list-style-type: decimal;
}
If you prefer bullet points rather than numbers, add the following code after the aforementioned section:
#menu .dropdown_3columns ul {
list-style-type: disc; /* or circle etc */
}
.....................................................
Greetings! Please eliminate the following line from the CSS code: #menu li display:block;
It should look like this now:
#menu li{
display:block;
}
Let's make some changes to the CSS code:
#menu li {
display: block; //let's get rid of this line
}
We also need to remove the following lines:
#menu .dropdown_3columns ol, #menu .dropdown_3columns ul{
list-style-type: decimal; //we don't need this anymore
}
During the collaboration with a designer on my latest project, an unexpected issue arose in my main CSS file for Angular (styles.css).
I encountered this line:
@import url("https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css")Within that snippet of code, there was:
ol,ul {
list-style:none
}
This specific block of code was causing interference and suppressing any additional styles I attempted to implement. By removing this section, the ordered list numbers were finally visible as intended.
Is there a way to center a column on mobile devices only while maintaining a fixed height for the section? <div class="" style="background-image: url(image url;); background-position: right bottom; background-size: cover; height: 462px;"> <div cl ...
The issue I am facing is that the background color of the <ol> list is not showing correctly. This problem arose after I floated the label to the left and the input to the right. How can I resolve this? The desired outcome should be: My current resu ...
Check out my website: There's a div styled with the color #D9D9D9 This is the CSS code: #full_bar { background: #D9D9D9; width: 100%; height: 100px; } I want the div to span across the full width of the website and be stuck to the footer. An ...
Every day, I have to click on a link and input some information (username, password, code). Is there any way to modify the link so that it automatically fills in my account details when clicked? <input type="text" name="u" tabindex="1" size="15" id=usr ...
My idea is to create a webpage with initially 6 input fields, which can expand to 7, 8, 9, or 10 fields when a button is pressed. These fields will have editable preset values that will be used to calculate a final value using a formula. Should I use f ...
My goal is to utilize flexbox in conjunction with bootstrap 4 to produce a design featuring 3 vertically stacked columns on the left, accompanied by a single column on the right that matches the height of the left columns. Following that, there will be som ...
When using component A to render multiple instances of component B using v-for, an animationend event is fired from component B to A. However, there are cases where the animationend event fails to fire. View the code sandbox for more information ...
My webpage has a simple function where users can log in, and depending on whether the cookie exists or not, it will display either their name or a login button. However, I am encountering an issue with unsetting the cookie. I've tried troubleshooting ...
Working on an Angular 1 web application, I am utilizing the HTML download Attribute. Using the code snippet below: <a href="/images/myw3schoolsimage.jpg" download>, I am enabling users to download presented data as an Excel spreadsheet. My goal i ...
I am looking to create a system that queries an SQL database every hour and displays the values on a website using Python. However, I am unsure of where to begin. Most resources online mention PHP or focus on pulling data from a website into a database. ...
I have a collection of bouncing balls that are colliding with each other within a confined space. Currently, the balls are just simple green circles. However, I would like to replace them with images. How can I accomplish this? Here is the render functio ...
Is there a way to remove the header navigation from the material stepper? I've tried using the following CSS code without success: .mat-horizontal-stepper-header-container{display: none} You can view the stepper on Stackblitz by clicking this link: ...
Having trouble with my join query, unsure if the issue lies within my query or somewhere else. The error message I'm receiving is: Warning: mysql_fetch_array() expects parameter 1 to be resource, boolean given in C:\xampp\htdocs\pr ...
I am looking for a way to create a menu where the drop-down items overlay the rest of the menu when the screen width is small. Here is my current code: nav{ line-height:100%; opacity:.9; }nav ul{ background: #999; padding: 0px; border-radius: 20px; ...
The CSS specification dictates that line-height should be implemented by dividing the specified value by two and applying the result both above and below a line of text. This significantly differs from the traditional concept of leading, where spacing is ...
I need help ensuring that the inner div, colored red, stays hidden within its parent div, which is blue. I attempted to use overflow: hidden; in CSS but it did not have the desired effect. I am looking for a solution using solely CSS since JavaScript cause ...
I am currently working with a dropdown menu containing countries. Initially, the selected item is set to Ukraine. <select id="country" name="country"> <option value="US">USA</option> <option value="UG">Uganda</option> ...
My goal is to generate a 2dgrid with dimensions xMax = 10, yMax = 6 that looks like the following: x 0 1 2 3 4 5 6 7 8 9 _ _ _ _ _ _ _ _ _ _ y |_|_|_|_|_|_|_|_|_|_| 0 |_|_|_|_|_|_|_|_|_|_| 1 |_|_|_|_|_|_|_|_|_|_| 2 |_|_|_|_|_|_|_|_|_|_| 3 |_|_|_|_|_|_|_ ...
I hope I don't sound silly asking this question, but using: <body onhashchange="HashChangeHandler();"> Is causing an issue with the markup validation. Is there a different location where I can place it other than inside the body tag? I am aw ...
Recently, I customized a stylish skin for my date picker. However, when the "run" button is clicked, a black bar appears underneath it. Strangely enough, once you click on the input and then on the page, the bar disappears. Is there a way to remove this ...