Firefox displaying bullet points incorrectly when list item includes a button

In my testing, I've come across an interesting issue. When a button is a direct descendent of a list item and its inner text wraps to multiple lines, I have noticed that on Firefox the bullet point lines up with the last line of the text instead of the first line, which looks odd. This behavior does not occur on Chrome.

I have tried to address the bullet point alignment issue using some unconventional methods, but I'm still uncertain whether this discrepancy is a result of a Firefox bug, a Chrome bug, a gap in the specifications, or if there is a misunderstanding on my part regarding the styles that are impacting this layout.

Interestingly, this problem seems to be isolated to button elements. When I use spans instead, the display is consistent. Take a look at this example:

<ul style="width: 300px;">
  <li>In Chrome, this list item appears fine, but in Firefox it is misaligned:</li>
  <li><button>This is just dummy text to illustrate the issue, which only occurs when text wraps to a second line.</button></li>
  <li><span>An inline span works properly when text wraps, as demonstrated here. So, theoretically, display:inline should work for the button as well. However, even an inline button is misaligned in Firefox:</span></li>
  <li><button style="display:inline;">This is just dummy text to illustrate the issue, which only occurs when text wraps to a second line.</button></li>
  <li><span style="display:inline-block;">An inline-block span shows misaligned bullet points in all browsers when text wraps to multiple lines.</span></li>
</ul>

Answer №1

If you find yourself in a unique situation, try adding vertical-align: top; to the direct children of li elements to ensure proper alignment of inline elements:

li > * {
  vertical-align: top;
}
<ul style="width: 300px;">
  <li>The following list item looks OK in Chrome, misaligned in FF:</li>
  <li><button>This is just dummy text to demonstrate the issue, which only happens when an element wraps to a second line.</button></li>
  <li><span>An inline span works fine when the text wraps as you can see with this element, so I think display:inline should work on the button. But you can see an inline button is still misaligned in Firefox:</span></li>
  <li><button style="display:inline;">This is just dummy text to demonstrate the issue, which only happens when an element wraps to a second line.</button></li>
  <li><span style="display:inline-block;">An inline-block span has a misaligned bullet in all browsers, when the text wraps to multiple lines.</span></li>
</ul>

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

Switching the visibility of multiple textareas from block to none

I am currently exploring ways to make one text area disappear while another one appears in its place. With limited knowledge of Javascript and just starting my journey into HTML and CSS, I am reaching out to the forum for assistance or guidance on the rig ...

What steps should I follow to track an event using Firebug?

When I examine the element, how can I discover all of the events that are attached to it? ...

Seamless animation with Angular 4

I'm working on creating a dynamic Homepage in Angular 4 with various cards such as stats, charts, etc., all enhanced with animations. One interesting feature I've implemented is the ability to toggle chart cards to expand to full screen by clicki ...

Using an Image Fragment as a Background

I have a collection of images stored on a sprite sheet. My goal is to showcase a specific image from the sprite sheet as the background of my div container. The catch is, I want to ensure there is some blank space surrounding the selected image, requiring ...

Position the div in the center with overflow properties

After returning to web design as a hobby, I've encountered some difficulties. I'm currently trying to center a div that contains other centered divs. However, when resizing the page, I want to ensure that the divs remain centered and their overfl ...

What is the best way to stretch Font Awesome icons horizontally within a message box and incorporate an image into a uniform circle design using Bootstrap?

I have encountered two issues that I need help with. Firstly, following my tutorial did not result in pictures that are as uniform as the design. Here are the comparison pictures: the first one is from the tutorial and the second one is what I coded. htt ...

Aligning forms horizontally using Bootstrap

Has anyone experienced a strange alignment issue with Bootstrap while trying to horizontally align textboxes with a select control? https://i.stack.imgur.com/1tw4P.png <div class="row"> <div class="form-group"> <div cla ...

Ways to incorporate vertical alignment while adjusting the size of a <div> block

Seeking advice on how to vertically align <div> blocks (green blocks in my example) when changing block size. What adjustments are needed in my example for the vertical alignment (middle) of side blocks to be maintained when resizing the browser win ...

Designing an immersive full-screen experience with scrollable columns using Bootstrap

Trying to achieve a full-screen layout that occupies 100% of the viewport with a sticky header and footer, along with columns in the main content area that can be individually scrolled. I've been experimenting with using classes like .h-100 and .flex ...

Why isn't the float left property working as expected?

Why won't my image float to the left? I'm using a class called align-left with float: left but it's not working. You can see the live version at - (check out the review grid halfway down under the heading 'High customer satisfaction r ...

Storing various text inputs in a MySQL database

Could anyone please assist me with fixing an issue I'm having with inserting data into a database from the form provided below? Unfortunately, I am unable to get it to work as expected. Here is the complete form: <html> <head> <m ...

Please only submit the form if the check box has been ticked

<div id="checkbox"> <input type="checkbox" id="1" name="1"/><br/> <input type="checkbox" id="2" name="2"/><br/> <input type="checkbox" id="3" name="3"/><br/> <input type="submit" value="Create"/> </div ...

Jumping Iframe Anchor Link in Src

I'm facing a challenge with an iframe positioned in the center of a webpage. I want to show content from another page within the iframe, but not starting at the very top. To achieve this, I inserted an anchor into the src of my iframe, linked to an a ...

Issue with Flexbox Layout - Flipping Card

As a newcomer to web development, my first project is a fan-page dedicated to Metallica. Here's the link to my project on Github. I'm currently facing an issue with the flex-box layout in the "Discography" section of the page. You can view the ...

Scrolling with jQuery just got a sleek upgrade with our new

Can anyone suggest a jQuery scrollbar that resembles the clean black bar found on the iPhone? I need a simple design without visible up or down buttons. Many scripts I came across offer more features than necessary for my project. My div element has a fi ...

Is it possible to have the navigation bar (bootstrap) appear on top of my slider as the default setting, without taking up additional space?

I'm encountering a rather simple issue that's giving me some trouble. I'm currently working on a website design using Bootstrap, and initially, there were no image sliders included by default. After integrating an image slider, I noticed th ...

Remove all Visual Composer Shortcodes while preserving the content

I'm in the process of transferring 200 posts from a previous WordPress website, which contain numerous visual composer shortcodes within the content. Is there a method to remove all the shortcodes and retain the content? ...

Tips for creating a fixed footer that adjusts with a flexible wrapper

Feeling incredibly stressed, I embarked on a quest to find the perfect sticky footer. After searching Google for what seemed like an eternity, I came across multiple tutorials recommending the use of min-height:100%. However, this approach caused the wrap ...

Issue with fancyBox not functioning properly when integrated with a caption script

Hey there! I've been working with both jQuery's fancyBox for displaying image/video galleries and the Capty script for showing image titles on images. However, I've run into a snag - when the title is displayed on the image, fancyBox st ...

What is the most efficient method for embedding a YouTube video into a <video> tag using React?

I tried embedding a YouTube video using an HTML5 tag, but encountered an error <div className={classes.VideoContainer}> <video className={classes.movieInfo__trailer} src="https://www.youtube.com/watch?v=V3hy2aLQFrI" ...