What causes a span with absolute positioning to not be correctly positioned within a span with relative positioning in Firefox, unless it is displayed as inline-block or similar?

Can you explain why the code below doesn't display correctly in Firefox unless the parent span is set to display as inline-block? When inspecting the layout of the absolutely positioned span, it shows the number 184 instead of 197 on the right side. Adding display:inline-block to the parent span resolves the issue.

<span style="position:relative; font-size:52px;">FOO BAR
  <span style="position:absolute; top:-17px; right:197px; height:22px; width:22px; background-color:black"></span>
</span>

<span style="position:relative; font-size:52px; display:inline-block">FOO BAR
  <span style="position:absolute; top:-17px; right:197px; height:22px; width:22px; background-color:black"></span>
</span>

Other browsers have no problem with this rendering.

You can find the fiddle here

htmlcssfirefoxabsolute

Answer №1

It appears to be a bug in the code. The width of the relative box is being calculated with the space at the end included, even though CSS whitespace rules dictate that such spaces should be ignored.

<span style="position:relative; font-size:52px;">FOO BAR<span 
  style="position:absolute; top:-17px; right:197px; height:22px; 
  width:22px; background-color:black"></span></span>

If you manually remove the spaces as shown above, the box will align properly on Firefox and other browsers.

Check out http://jsfiddle.net/fg9enk2t/1/ for a demonstration.

Interestingly, this issue with disregarding end spaces can lead to various problems. I've encountered bugs in Chrome and IE related to handling spaces at the end of lines.

Answer №2

The issue lies within the spacing in the HTML code.

An inline-block element eliminates spaces (controlled by the white-space property) at its start and end, whereas an inline element does not.

Given this CSS:

.outer {
    position:relative;
    font-size:52px;
    outline: 1px solid;
}
.inner {
    position:absolute;
    top:-17px;
    right:0px;
    height:22px;
    width:22px;
    background-color:black;
}
.ib {
    display: inline-block;
}

In the following scenarios, they will appear identical (Demo):

<span class="outer ib">FOO BAR<span class="inner"></span></span>

<span class="outer">FOO BAR<span class="inner"></span></span>

However, there will be a noticeable difference in the following cases (Demo):

<span class="outer ib">FOO BAR
    <span class="inner"></span>
</span>

<span class="outer">FOO BAR
    <span class="inner"></span>
</span>

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 your Ajax post failing to submit the email address?

UPDATE: Unfortunately, this code is not compatible with Firefox, but works perfectly on any other browser. I've tried running Firefox in safe mode (disabling all plugins, etc.) and still encountered issues. :( I'm attempting to make an AJAX post ...

phpajaxfirefoxpost

Convert JSON data into a nested unordered list

I need help converting a JSON object into an unordered list using jQuery. Here's the JSON data I have: var myJSON = "{name:\"Director\",children:[name:\"Exe Director1\",name:\"Exe Director2\",name:\"Exe Director3&bs ...

jqueryhtmljsonhtml-lists

Isolating the controls bar from the video content area within JWPlayer

Currently, I am utilizing JWPlayer for my video playback needs. I am curious if there is a method to separate the controls bar from the video content, similar to the design showcased in this link: https://i.sstatic.net/bZUA9.png Alternatively, are there a ...

htmlcssjwplayer

The integration of CSS into Laravel was unsuccessful

Below is the content of my index file located in views.admin: <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet&qu ...

csslaravel

Perform mathematical operations on numbers using jQuery based on their index

Trying to manipulate numbers in the HTML with this less-than-ideal code. The display starts like this at the beginning: 1/ 6 And ends up like this at the final index: 6/ 6 Utilizing this in conjunction with pageslide.js as a workaround for the default ...

jqueryhtml

How to remove an event listener when e.target points to a hyperlink

element, I encountered an issue using a slideshow component sourced from our components library. This component receives swipe events from a utility function that is initialized upon mounting. The problem arose while testing on a mobile phone - tapping a ...

javascriptcssvue.jsdom-eventstouch-event

What is the best method for inserting dynamic HTML content (DIV) with JavaScript?

Can someone assist me in dynamically adding HTML content when data is returned from the server-side? I am currently using ajax/jQuery to handle server-side processing requirements. The success code section of my ajax function allows me to write HTML elemen ...

javascriptjqueryhtmlajax

Tips for adjusting the font size within the MUI TextField Label

I'm looking to adjust the label fontSize in the material ui TextField component. I've discovered the InputLabelProps property which has been helpful, but as shown in the image below, the label appears too cramped when focused. https://i.sstatic. ...

cssreactjsmaterial-uilabel

Applying media queries to incorrect screen sizes

My media query seems to be behaving oddly. @media only screen and (max-width: 1200px) { .tool-panel { margin: 0px 24px 0px 0px; } } It is getting applied at 1183.20px instead of 1200px. This discrepancy is consistent across all browsers ev ...

css

Using JavaScript to dynamically insert HTML content and create a toggle effect

Within a div, I have a collection of large images that I am attempting to insert into another div using JavaScript toggle functionality. Please test the code snippet provided below. $(".toggleimages").on("click", function(e) { e.preventDefault(); ...

javascriptjqueryhtml

Transform one column into several columns

I am working with a function that populates a table row by row. Here is the code: function renderListSelecoes(data) { // JAX-RS serializes an empty list as null, and a 'collection of one' as an object (not an 'array of one') va ...

javascriptjqueryhtmlajax

When you hover over HTML tables, they dynamically rearrange or shift positions

Issue: I am encountering a problem with multiple tables where, upon hovering over a row, the tables are floating rather than remaining fixed in place. Additionally, when hovering over rows in the first or second table, the other tables start rendering unex ...

javascriptjqueryhtmlcss

Struggling with combining CSS stylesheets?

I am looking to incorporate the vertical timeline feature from CodyHouse into a project utilizing a Bootstrap template hosted on Github. I have successfully transferred the HTML content, however, there are some complications with the CSS files. The issues ...

csstwitter-bootstrapbootstrap-4

Change the text in a CSS checkbox label when it is selected

There is an innovative Pure-CSS accordion that caught my eye, but I have a unique feature in mind that I would like to incorporate. What I am looking for is the ability for the labels to dynamically change based on the state of the checkboxes without relyi ...

csscheckboxaccordiondisplay

How to ensure that a div element occupies the entire height of the webpage

After developing a small app in Angular, I'm looking to make the container element expand to the full height of the page, even when the content doesn't fill the entire space. On larger screens, the page doesn't stretch as desired. Here' ...

cssangularjs

Unable to display HTML content on a page using the foreach callback in JavaScript

I have a function that iterates through each element of an array and generates HTML content on the page while updating some properties using elements from the array. I am utilizing forEach to iterate over the elements of the array and innerHTML to display ...

javascripthtmlarraysforeach

Using HTML and JavaScript to verify email addresses

I have been working on an "Email Validation" code, but it seems to be malfunctioning. I can't figure out why. Would you mind taking a look at it? Thank you. I suspect that the issue lies with this line document.getElementById("custEmail").onchange = ...

javascripthtmlxhtmlemail-validation

Saving game data from local storage to populate the player leaderboard

I have successfully developed a game in which users can play and their scores are stored locally. However, I am facing a challenge in figuring out how to showcase the scores of all users in a table on the Rankings page. Player Ranking Page <?php inclu ...

javascripthtmllocal-storage

Overflowing Collection of Hidden CSS Assets

Here is a unique question. I'm currently implementing some CSS lasers for a futuristic website design: https://codepen.io/jefferymills/pen/xpmDK The code below showcases how to incorporate the lasers using HTML: <div class="laser-beam"></di ...

htmlcssoverflow

The project is experiencing difficulties in loading the Module CSS

Currently, I am working on a React module and have set up a React project to demonstrate the functionality of this module. Initially, everything was working smoothly until I encountered an issue with the webpack configuration related to the CSS loader. { ...

cssreactjsnpm