There seems to be an issue with the second line indent when using a custom counter.
When attempting to use 'list-style-type: decimal', the numbering does not display as desired, for example:
ol {
counter-reset: ci-counter;
list-style-postion: inside;
list-style-type: none;
padding-left: 0px;
margin-top: 0;
margin-bottom: 11px;
}
ol li:before {
content: counters(ci-counter, ".")" ";
counter-increment: ci-counter;
}
Revise your HTML code in this manner
.img-cntr {
padding: 0;
margin: 0 10px 10px 0;
float:left;
}
ol {
counter-reset: ci-counter;
list-style-postion:inside;
list-style-type: none;
padding-left: 0px;
margin-top: 0;
margin-bottom: 11px;
}
ol li:before {
content: counters(ci-counter, ".") " ";
counter-increment: ci-counter;
}<div class="cntr" style="width:40%">
<div class="img-cntr">
<image src="http://www.hdwallpapery.com/static/images/image5_170127819_PxgeF3V.jpg" height="200px"/>
</div>
<ol>
<li>Each day, on average, the entire organization</li>
<li>spends hours conversing over the phone
<ol><li>test</li></ol>
</li>
<li>with the IT Service Desk, where the average wait times are per</li>
</ol>
</div>ol li{
padding: 15px 0 15px 25px;
text-indent: -1.5em;
}
Implementing this code should shift the content further away from the numbering.
I've recently started using masonry for the first time and you can check it out here: Although I have managed to set it up, I am facing some issues with its positioning of boxes when dragging items in. For example, instead of placing a medium-sized ...
Could you provide any insight as to why I'm encountering an error message "Can't create event listener on null" when using the following code: var my; my.newVidObj = document.createElement('video'); my.newVidObj.src = "vid- ...
I am looking to create a centered table that is 900px wide with one row and two cells. The right cell should always be 200px wide, while the left cell should fill up the remaining space. However, I am facing an issue where the right cell jumps below the le ...
My goal with Python is to extract and print words from a list that are entirely made up of smaller words in another list. Let's consider the following example: list1 = ('ABCDEFGHI', 'DEFABCGHI', 'ABCABCGHIABC', 'AA ...
As a newcomer to AngularJS, I have successfully disabled fields based on previous field selections. However, my goal is to set the default value of "ALL" for all fields (country, state, city). If the country value is set to "ALL," then the state and city ...
My question is about a select element: <select id="position"> <option *ngFor='#contactType of contactTypes' [attr.value]='contactType.contactTypeId'> {{contactType.description}} </option> </select ...
After clicking on a submit button labeled as "continue" within a form, a new form will appear for you to complete in order to continue the registration process. ...
Just as seen on SO with the B button: **bold text** Including that bold text is automatically highlighted and the cursor is placed right before the b ...
I have a dropdown list displaying existing tags/chips created by users in the past. However, I'm having an issue where when I select a tag from the dropdown list, it doesn't show up in my input field (similar to the Chart tag currently). I am abl ...
As a newcomer to html and css, I have successfully created a div that contains city names. The issue I am currently facing is when I click on a button to display the div, it gets hidden behind the next section of my page. Take a look at the image below for ...
Having trouble with a calculation using a CSS property that is not returning any value. Seems like the issue might be due to the CSS property returning '200px' instead of just '200'. Any suggestions for a workaround? Thanks in advance. ...
After struggling to make my code work, I decided to create a piece of JavaScript to disable a text input when "Cash" payment is selected from the dropdown menu. On the contrary, I aimed to enable the text input if "Credit Card" payment was chosen. Unfortun ...
I'm currently working on implementing a navigation to a specific anchor tag when the user clicks the continue button on the cart page. This project involves a mobile application built with Cordova, and the function call is done using jQuery. Here is ...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=ut ...
I am currently working on a Django project and have set up a static folder in my "accueil" application. However, when I resize the browser window, the button to show the menu does not function as expected. The template I downloaded for free is not working ...
Struggling to create a print layout for my web page that seamlessly transitions from the digital realm to the physical world. Utilizing HTML and CSS has presented challenges in aligning the "digital" design with a "real printable" page due to uncertainties ...
I need to position two panels in a column, with one on the left and the other on the right. Currently, they are not aligned properly, as shown in this image: https://i.stack.imgur.com/RU636.png The first panel should be moved to the left to align with the ...
I need a way to showcase a collection of around 30 links in a horizontal layout without the links wrapping to a new line if they exceed the width of the parent container. A horizontal scroll should appear for users to navigate through the overflowing links ...
There are various ways to trigger a function automatically in javascript when a page loads. I am interested in knowing which method is considered the most effective and reliable. If you have a unique approach that differs from others, please share it here ...
Is there a way to dynamically change the contents of a <style> block in my Vue component using Vue variables? Many commonly suggested solutions involve inline styles or accessing the .style property with JavaScript. However, I am looking for a metho ...