CSS Problems in IE9 Causing Alignment Issues with Two Items in List Item

Take a look at this: JSFiddle
The code looks fine in firefox, chrome, and opera, but in ie9, the numbers are shifting. Please see the image for reference. Everything is correct on the left, but on the right is ie9.

I'm stuck and need help to solve this issue :(

HTML

<ul id="category">
    <li>
        <p>
            35
        </p>
        Games
    </li>
    <li>
        <p>
            352
        </p>
        Dolls
    </li>
</ul>

CSS

ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
#category {
    float:left;
    background:#e8e8e8;
}
#category li {
    line-height: 20px;
    padding: 10px 30px;
    cursor:pointer;
}
#category p {
    margin:0 0 0 20px;
    padding:0;
    float:right;
    font-size:18px;
}

I've made the code more simple.

Stenzg

htmlcssinternet-explorerlist

Answer №1

Utilizing a <table> in this scenario would be an appropriate solution. It offers a cleaner and more compatible way to address this specific issue without encountering any browser-related complications. Consider implementing the following code:

<table>
  <tr>
    <td>Games</td>
    <td>35</td>
  </tr>

  <tr>
    <td>Dolls</td>
    <td>352</td>
  </tr>
</table>

Additionally, apply some basic CSS styling:

table {
  background-color: #e8e8e8;
}

table td {
  padding: 10px;
}

For a live demo, visit this jsfiddle link.

If you require more guidance on utilizing tables, refer to the MDN table tutorial.

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

Is there a way to customize the color of the like button?

I'm trying to create a Twitter-like button with an icon that changes color. When the button is clicked, it successfully changes from gray to red. But now I'm stuck on how to make it switch back from red to gray. I am currently using javascript ...

javascripthtmlvue.jsbuttoncolors

What is the best way to assign an HTML string to the DOM and connect it with an object?

In my angular HTML component template, I have the following markup: <div *ngIf="htmlTemplate && jsonObj" [innerHTML]="htmlTemplate"></div> The jsonObj variable is retrieved from an endpoint and looks like this: { fi ...

htmlangularbind

Prevent zooming or controlling the lens in UIWebview while still allowing user selection

Is there a way to disable the zoom/lens on uiwebview without affecting user selection? I'm trying to avoid using "-webkit-user-select:none" in my css. -webkit-user-select:none ...

javascriptioscssuiwebview

Navigate to the location using AngularJS elements in the JavaScript iframe1

Dealing with an issue while working on AngularJS. I am facing a frustrating problem where I am attempting to use one link to open links in two separate iframes. All aspects of this function correctly, except for the actual links. The issue arises when usin ...

javascripthtmlangularjs

The functionality of jQuery's toggleClass is not functioning properly when clicking on a different thumbnail

My objective: I want to display a set of thumbnails. When a thumbnail is clicked, I want to toggle the hiddenElement class and show a large image inside a hidden div. If anywhere in the DOM is clicked, it should hide the current image or allow the user t ...

javascriptjqueryhtmlcss

Error occurred while fetching image from Medium story API in Next.js

While working on my Next.js app, I encountered an issue with the Medium story API. Every time I try to fetch and display an image using the API, I receive an error message stating "upstream image response failed." The specific error code is: upstream image ...

javascripthtmlnext.jsjavascript-objects

Overlap caused by padding between two elements

I'm encountering an issue where adding padding to a block element is causing it to overlap with the padding of other elements. Below is the code snippet showcasing this problem. <section class="hero"> <h1>Studying REDEFIN ...

htmlcss

Rearranging Twitter Bootstrap Grid Columns

Is it possible to rearrange columns in Bootstrap without using col-sm-pull-12/col-sm-push-12? I'm struggling to achieve the desired layout. Are there any alternative methods to accomplish this task? Check out this JSFiddle for reference. <div cla ...

htmlcsstwitter-bootstrap

Troubleshooting scope evaluation in AngularJS within style tags on IE9 not functioning

My issue involves a div block with a style attribute that includes left:{{left}}px; and right:{{right}}px. Even though $scope.left and $scope.right are being updated, my item still doesn't move as expected. I have created a fiddle to demonstrate th ...

cssangularjsinternet-explorer-9

Angular's inline style manipulation fails to function in IE browser

I am facing an issue with setting the position of a div based on the return value of a function in an angular controller Although it works fine in FireFox and Chrome, Internet Explorer is interpreting {{position($index)}}% as a literal string value, resul ...

htmlangularjsinternet-explorerangularjs-ng-repeatinline-styles

What is the best way to position the header at the top and the footer at the bottom of the page, with the main content in between using

Recently, I started using Bootstrap and incorporated Bootstrap 5.3 into this HTML page. My goal is to align the header at the top, footer at the bottom, and adjust the size of the main content in between. Here's the code I attempted: <!DOCTYPE html ...

htmlbootstrap-5

Three-dimensional.js and components of the design

Looking for advice on how to manipulate individual parts of a 3D model in Three.js. My model is made up of various components that I need to control separately. Any tips or suggestions would be greatly appreciated. Thank you! ...

jsonhtmlthree.jswebgl

How to troubleshoot the error I am encountering in Vue while using custom HTML tags?

While I'm still a Vue newbie, I find it quite enjoyable. I've been experimenting with using just a custom tag like this: <ui-button>Learn more</ui-button> Unfortunately, I encountered an error asking me to register the component. To ...

javascripthtmlreactjsvue.jstags

Guide for positioning all navbar items except one to the left, beginning at the left edge, utilizing a set minimum and maximum width, while moving the final item to the right edge

Is there a way to align all items in a navbar except for one to the left, with a fixed combined minimum and maximum width of 300px-400px, while sending the last item to the right margin? I want the final result to resemble this: https://i.stack.imgur.com ...

htmlcss

Create a dynamic list selector for WebOS using AJAX to populate options from a JSON response

Having trouble developing an application that retrieves MySQL database responses using Ajax post and updates a list selector with the data. The list is currently displaying empty results, can anyone provide some assistance please... JavaScript code: Seco ...

phpmysqlajaxlistwebos

Swap a jQuery class with another if the class for ul li is currently active

I am currently developing a form builder and I would like to customize the appearance, specifically changing the color of the text. I want the text to be white when the class is set to active, and black when the class is not active. Is there a way to achi ...

javascriptjquerycss

Emphasize sections of text within a chart

Looking for a Specific Solution: I've encountered similar problems before, but this one has a unique twist. What I'm trying to achieve is to search for a substring within a table, highlight that substring, and hide all other rows (tr's) th ...

javascriptjqueryhtml

Activate the jQuery click event by specifying the URL

On my webpage, I have a jQuery click function that loads multiple HTML pages into a specified div. I am looking to set specific URLs that will trigger this event, like test.com#about <script type="text/javascript"> $(document). ...

javascriptjqueryhtml

"Implementing a Python code to increase each element in sublists by a constant value in a list

Here is a list I have: list1=[[2,3],[4,5],[6,7]] I am trying to add the value "one" to all sublists in the list at index 2 The desired final output should look like this: list2=[[2,3,"one"],[4,5,"one"],[6,7,"one"]] This is what I attempted: for subli ...

pythonlist

Incorporating a complex React (Typescript) component into an HTML page: A Step-by

I used to have an old website that was originally built with Vanilia Javascript. Now, I am in the process of converting it to React and encountering some issues. I am trying to render a compound React(Typescript) component on an HTML page, but unfortunatel ...

javascripthtmlreactjstypescript