The content of the DIV element is not displaying properly when trying to list items

I have a div that is styled with the following CSS properties :

HTML

<div class="messageContainer"></div>

CSS

.messageContainer {
  margin-left: 2px;
  background-color: #F7F5F2;
  width: 100%;
  min-height: 50px;
  border: solid 1px silver;
  padding-left: 5px;
  margin-top: 3px;
}

When placing this HTML code inside the div element :

Follow these steps in order: 
<ol>
   <li>
      Create a button control
   </li>
   <li>
      Assign it to the main user
   </li> 
   <li>
      Let me know what happened
   </li>
</ol>

Here is how it appears on the page: (Take a look at the numbers)

https://i.sstatic.net/N5mTY.png

So my question is, why is this happening? Why are the numbers showing outside of the div element?

UPDATE

I added this to the CSS :

.messageContainer ol
{
    list-style-position:inside;
    margin-left:5px;
}

And it fixed the issue, but now this is the result :

https://i.sstatic.net/FO8gw.png

asp.nethtmlcss

Answer №1

Give this CSS style a shot:

.messageContainer ol
{
    list-style-position: inside;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Can you explain the distinction between max-width and min-width in media queries for HTML and CSS?

Could you explain the distinction between max-width and min-width in media queries in HTML and CSS? @media (min-width:480px) { /* styles for smartphones, Android phones, and landscape iPhone */ } @media (min-width:600px) { /* styles for portrait tabl ...

cssmedia-queries

Having trouble setting margin-bottom to 0 in react and antd - why won't it reset?

While practicing with React, I added <link rel="stylesheet" href="%PUBLIC_URL%/css/reset.css" /> to the head of index.html in order to reset the styles. However, I noticed that <h1> still had a margin-bottom:0.5em that I c ...

htmlcssreactjsfrontendantd

Generating a multiplication grid using PHP

I'm currently facing a challenge regarding the presence of an additional "0" box on my multiplication table. Below is the code that I have been working with: $cols = 10; $rows = 10; $number = 0; $number2 = 0; echo "<table border=\"1\"> ...

phphtml

jQuery functions as expected in a test environment, but encounters issues when implemented on a live website

Recently, I implemented a piece of code that enables content to be copied from one div to another when a button is clicked: <a id="btn123">CLICK ME</a> <div id="test1"></div> <div id="test2"> <h1>Heading</h1> < ...

jqueryhtmljoomla

Styling elements with inline-block in IE8

Although there are countless questions addressing this particular issue, allow me to provide more details: The Dilemma The situation is as follows: aside { display: inline-block; } section { display: inline-block; margin-left: 2em; } Here, the eleme ...

htmlcssinternet-explorer-8

Utilizing a lone web element per row on a responsive webpage: A guide

click here for imageCurrently using the latest version of selenium web driver. Is there a method to utilize a single webelement (as a list webelement) in order to access row data on a responsive web page? For instance, consider the following CSS in the br ...

javacssseleniumselenium-webdriverresponsive-design

Radio button - arranging the background image and text in alignment

I'm struggling to align my custom radio buttons alongside text. Here is an example image: https://i.sstatic.net/2g5w8.jpg Despite using CSS for styling, I am unable to properly align the radio buttons. Below is a snippet of my HTML: label.item { ...

htmlcsstwitter-bootstrapradio-button

Problem with Google's PageSpeed Insights - Focus on Making Most Important Content Visible

During the process of creating a comprehensive website for a client who has a strong affinity towards Google tools and recommendations, I have encountered an interesting challenge: Despite my best efforts, I seem unable to attain a flawless score for the ...

javascriptphphtmlcssgoogle-pagespeed

I am curious about how to implement overflow:hidden along with position:sticky in React.js

My attempt to address the white space issue caused by a navbar I created led me to try using overflow:hidden. The navbar is generated using the Header component, and I desired for it to have a position: sticky attribute. However, I realized that I cannot ...

javascripthtmlcssreactjsstyling

The WCF Service hosted on IIS encountered a HTTP 400 Bad Request error upon receiving a

I've spent hours searching for a solution, but I've come up empty-handed. Let me give you a quick overview. Currently, I'm delving into WCF Services. I've just created a service and tested it. Here's the configuration file: <? ...

c#asp.net.netwcfiis

Retrieve the parent's current state by accessing it through a callback function in React

My callback function onRestore is only logging the history until the id of the clicked snapshot. Why is it showing incorrect state? I've exhausted all options, so any help would be appreciated. import React, { useState, useEffect, useRef } from "re ...

javascripthtmlcssreactjsstate

CSS // code that works on any device or platform

I have since the beginning been annoyed with the compatibility of CSS. Whats the best practice for coding css, that works with the most common platforms... ( IE7+, Firefox, Safari, Chrome AND iPad / iPhone, Blacberry, Android) Are there any list to be fo ...

csscross-browsercross-platformplatform

If a span element does not exist, a bullet can be added within it

Is there a way to add and remove a bullet from an li element with the selected class, only if there is no span already present? Currently, every time the link is clicked, a bullet gets added. What would be the best approach to avoid adding multiple bullets ...

jqueryhtml

Instructions for activating the click function for each individual looping image

When creating a blog page, I am using PHP to loop the like button images according to the total count of posts (example: Facebook like button). The issue I am facing is that while the PHP loop is working, when I click on the first post image, only the firs ...

javascriptphpjqueryhtmlcss

javascript show and hide navigation bar

I am currently working on a HTML menu that includes a button to open it and an unordered list : <nav class="menu"> <button> <h1>Menu</h1> </button> <ul class="mylist" ...

javascripthtmlcss

Is there a way to choose multiple IDs in this code that all share a common word?

I'm attempting to target several duplicate ids such as "img1, img2" in my code, but I haven't had any success. How can I select all the ids that contain the same word without relying on jQuery or any other external libraries? Below is the code s ...

javascripthtmlcssbootstrap-5

Trying to arrange HTML elements in a diagonal configuration while ensuring they are all uniform in size

My goal is to create an attractive splash page with diagonal, circular links that are all the same size. The <p>'s will function as the links, but I'm struggling to figure out how to make them all diagonal and uniform in size. I've ex ...

htmlcssflexbox

Looking for assistance with implementing mouseover scrolling on an unordered list

I am attempting to create a scrolling effect on my UL element when the mouse hovers over it, but I am having trouble getting it to work. Here is the link to my fiddle: http://jsfiddle.net/MisterStorm/4ja9apqz/3/ and here is my code: $(document).ready( ...

jquerycss

Title Bar: Excessive gap; inaccurate navigation to nearby link

I've been trying to align a horizontal navigation bar right below a banner and link directly to specific sections on the same page. No matter what I do, I can't seem to remove the white space between the banner image and the navigation bar. It ...

htmlcss

CSS file not found error: ASP.NET core and Angular unable to locate stylesheet

Recently, I encountered a puzzling issue with my ASP.NET Core web application integrated with Angular. Despite having everything set up properly, the CSS failed to load upon launching the project. Upon inspecting the console, I was faced with this error me ...

asp.netangular