The alignment of list bullets is inconsistent across different web browsers

Check out this code snippet on JSFiddle: http://jsfiddle.net/PZgn8/8/. It's interesting to see how the rendering differs between Chrome 27 and Firefox 21. Despite the difference, I believe Firefox is actually displaying the desired outcome.

<ul style="text-align: center;">
    <li>
        <a href="#">One</a>
    </li>
    <li>
        <a href="#">Two</a>
        <ul>
            <li>
                <a href="#">Two's child</a>
            </li>
        </ul>
    </li>
</ul>

I require the list items within the nested ul to be centered as well, not aligned to the side.

Answer №1

To ensure consistency across browsers, use list-style-position:inside along with the text-align: center; property for the bullet.

li
{
    list-style-position:inside;
}

View Demo

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

Debugging Firefox pre-flight for CORS cross-domain resource sharing

Attempting to configure Firefox to permit an XmlHttpRequest for data from a specific application port. Observing that the initial send triggers an OPTIONS message, which has been captured using NetMon. The HTTP fields are visible... OPTIONS /any.htm HTTP ...

javascript/AngularJS - make elements gradually disappear

I need help implementing a fade effect for an icon in the middle of a picture that indicates scrollability to the user. Currently, when the user scrolls, I can hide the icon but would like to add a nice smooth fade-out effect. Here is the HTML code snippe ...

Why is my CSS media query failing to increase font size?

I can't seem to get the "media query" function to work properly. I've tried multiple times and searched for a solution without any luck. Below is the code snippet where I'm attempting to increase the font size from 44px to 70px on small devi ...

Disabled text selection in Internet Explorer

I am in need of making one HTML element (Label) unselectable for IE. I have tried using the following methods: Unselectable=on onselectreturn=false; Unfortunately, none of these solutions are working for me. For Firefox and Chrome, I've successful ...

Enabling CORS Allow-Access-Control-Origin for Chrome on Mobile Devices

I'm encountering a mobile error while testing my new responsive web app on Chrome. I've tried various methods like adding PHP headers and passing headers in AJAX requests. On the desktop, using CORS toggle extension in Chrome helped resolve the i ...

Expanding Bootstrap 5 navbar-nav to occupy entire screen space in collapsed state

Hello everyone, I hope you are doing well! I am currently working on a website project using Bootstrap 5 and have encountered an issue with the navbar toggler. While the toggler is functioning properly, I am having trouble making it fill the full width o ...

Achieving perfect alignment of an image within a Twitter Bootstrap cell when the height of the cell is uncertain

I have a bootstrap grid and I am attempting to center an image (200x100 as shown in the provided example) within a cell. <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!DOCTYPE html> <html& ...

Tips for aligning the dropdown menu to start from the border of the menu bar instead of displaying directly below the text

I have designed a menu-header section for my website, inspired by this image. I created a fiddle to showcase it. However, I am facing an issue where the dropdown elements for "PROGRAMS" and "WORLD OF NORTHMAN" should start from the border of the header ins ...

Update the CSS property according to the selected list item in the slider using Glider JS

Looking to dynamically change the background image in CSS based on the active slide value in Glider.js Here is the CSS: html { background-image: url("https://images.unsplash.com/photo-1496518908709-02b67989c265?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEy ...

Creating Dynamic Height for Div Based on Another Element's Height Using ReactJS and CSS

I'm attempting to set a fixed height for a div in order to enable overflow scrolling. However, I am encountering issues as I am using JavaScript within a useEffect hook to accomplish this task. The problem is inconsistent as sometimes the height is se ...

The CSS file is not updating

Recently, I updated an HTML file and the global CSS style sheet on my personal website. While the changes appear correctly on my computer, the website still reflects the old settings. I've taken several steps to troubleshoot this issue: Emptied my b ...

Position the caret beneath the anchor text

<a href="#" class="dropdown-toggle" data-toggle="dropdown" style="text-decoration: none"> <span class="criteria">any</span> <span class="caret" style="margin-top:6px;"></span> </a> The code snippet above ...

CSS effect() Practical duration

I have successfully implemented a CSS filter to blur an element, however, I am looking for a way to make the blur ease in smoothly. I'm not sure which css property controls this easing effect? Initially, I tried using transition: 1s; but that ended u ...

Tips on defining the specific CSS and JavaScript code to include in your Flask application

I am currently working on a web application using Flask and I need to specify which CSS and JS files should be included in the rendered HTML page based on a condition. There are times when I want to include mycss1.css and myjs1.js: <link href="/sta ...

Create a design where the logo seems to be suspended from the navigation bar using bootstrap

My goal is to achieve a navigation bar similar to the one shown in this image: Using Bootstrap 3, the code below is what I have implemented for my navigation: <nav class="navbar navbar-default navbar-fixed-top"> <div class="container"> <di ...

"Chrome is throwing an unanticipated error for bigpipe.js with an uncaught syntax error related to

I have integrated the bigpipe.js method into my website to display a newsfeed. It functions properly on all browsers except for Google Chrome, where it shows an 'uncaught syntaxerror unexpected token =' error. I need assistance in resolving this ...

The issue with the functionality of position absolute in CSS when used with JavaScript

<html> <head> <style> #wrapper{ position: absolute; top : 250px; width: 500px; height: 500px; border: 1px solid red; } .tagging{ position: absolute; border: 1px solid black; width : 20px; height: 30px; } & ...

What is the best way to change the size of a background image

I recently discovered a helpful tutorial on resizing background images that I found very insightful. If you're interested, you can check it out here. After attempting to apply this method to a 900px width div in order to resize only vertically, I enc ...

Is it possible to submit a form through a JavaScript hotkey?

Here's the current code that I'm working with: <select tabindex="2" id="resolvedformsel" name="resolved"> <option selected="selected" value="yes">resolved</option> <option value="no">not resolved</option> ...

Can the typical drag and drop cursors be ignored in an HTML drag operation?

I've been working with the HTML drag and drop API to allow users to resize columns in a table. However, I've noticed that when a user starts dragging a column, the cursor changes to one of the default drag and drop effects (such as move or none). ...