Despite applying a CSS reset in the modal, the margin-bottom property is still being recognized in Chrome but not in Firefox

Here is a snippet of CSS code that I am currently working with:

* {
  margin: 0;
  padding: 0;
}

body {
  overflow-x: hidden;
  margin: 0;
  padding: 0;
}

.modal {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  overflow-y: scroll;
  background-color: rgba(0, 0, 0, 0.8);
}

.modal-content {
  position: relative;
  top: 55px;
  border-radius: 4px;
  padding: 24px;
  margin-left: auto;
  margin-right: auto;
  width: 70%;
  max-width: 1000px;
  border: none;
  background-color: #fff;
  height: max-content;
  margin-bottom: 50px;
}

.my-slides {
  width: 100%;
}

.my-slides img {
  width: 100%;
}

.closed {
  position: fixed;
  top: 30px;
  right: 25px;
  font-size: 48px;
  font-weight: bold;
  transition: 0.3s ease;
}

/* Media queries */

@media (min-width: 576px) and (max-width: 767px) {
  .modal-content {
    margin-left: 10px;
  }
}

@media (min-width: 0px) and (max-width: 575px) {
  .modal-content {
    margin-left: 10px;
  }
}

While experimenting with the margin-bottom property in Chrome and Firefox, I noticed a discrepancy. In Chrome, setting it to 50px works fine, but in Firefox it does not. Increasing it to 100px fixes the issue in both browsers, but the spacing is uneven. Chrome takes up more space compared to Firefox.

If you would like to see the project I am working on, you can visit the following link:

javascripthtmljquerycsstwitter-bootstrap

Answer №1

To improve the positioning of the modal-content box, try using margin-top: 55px instead of top: 55px. This way, you can eliminate the need for position: relative.

Answer №2

Kindly insert the following CSS code snippet without replacing any existing .modal-content styles:

@-moz-document url-prefix() {
    .modal-content {
     position: relative;
     top: 55px;
     border-radius: 4px;
     padding: 24px;
     margin-left: auto;
     margin-right: auto;
     width: 70%;
     max-width: 1000px;
     border: none;
     background-color: #fff;
     height: max-content;
     margin-bottom: 50px;
   }
   }

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

how to quietly change the focus of an element using jquery and css?

Whenever I modify the CSS of a scrolled-past element, the view abruptly jumps to that particular div (by scrolling up) upon applying CSS changes using .css(...). Something as simple as adjusting the background-color can trigger this effect. Is there a wor ...

jquerycss

Ember 2: Display a loading message only if the IDs were part of the initial response

I frequently use the following code snippet in my projects: {{#each model.posts as |post|}} <div>post.title</div> {{else}} <div>Loading the posts...</div> {{/each}} However, I sometimes face uncertainty regarding whether t ...

javascriptperformanceember.jshandlebars.jsember-data

getJSON takes precedence over other tasks

I am having a challenge retrieving data in JSON format from the server and displaying it dynamically in a table. The code runs without errors and successfully fetches the data, but for some reason, nothing appears in the table. I suspect there may be an ...

javascriptjquerygetjson

JavaScript data structure similar to ListOrderedMap/ArrayMap

Does anyone know of a JavaScript data structure that functions similarly to ListOrderedMap? I need it to have the capability to add an object at a specific index, retrieve the index for a given object, and lookup an object by its id. Unfortunately, all t ...

javascriptdata-structuresarray-map

"Create a notification pop-up in CSS that appears when a link is clicked, similar to

I am looking to create a model page that functions similarly to the inbox popup on Stack Overflow. When we click on the inbox icon, a small box appears with a tiny loader indicating messages or comments. The box then expands depending on the content inside ...

jqueryhtmlcssajax

Creating unit tests for linked functions in Node.js using Jest

Hey there! I'm looking to test a function using Jest that involves token verification and requires 3 parameters. Here's the code for the function: const verifyToken = (req, res, next) => { // Checking for token in header or URL parameter ...

javascriptnode.jsunit-testingexpressjestjs

Navigating string primitives when using AngularJS and $http: Tips and Tricks

A function in ASP.NET Web Api is returning a simple string as JSON data. However, when calling this function from AngularJS, the returned value is surrounded by quotes instead of being a plain string: return $http.post('/api/orders', data).then ...

javascriptangularjsasp.net-web-api

Ways to showcase the outcome of a spin after each rotation

I am currently working on a spinning code snippet that allows users to spin and potentially win different amounts. The code includes functionality to prevent more than 3 spins, set random rotation values, and animate the spinning effect. However, I now wa ...

javascripthtmljquerycss

Employing conditional statements to adjust the size of an image or background identifier in JavaScript

As I dive into the world of Javascript, I find myself faced with the challenge of modifying existing code using if / else statements. The original code snippet in question is as follows: document.getElementById("button1").addEventListener("click", functio ...

javascripthtml

difficulty generating a tooltip

Purpose: My main goal is to implement a tooltip feature where hovering over text triggers the display of a tooltip. To achieve this, I am seeking inspiration from an example on w3schools which can be found at this link. Current Implementation: render() { ...

htmlcssreactjs

Activate every switch using only one switch

Below is the table I am working with. I'm trying to toggle all switches with the class name the-checkbox-input when the first switch with the class name checkbox-input-main is toggled. The code snippet I have tried doesn't seem to be working, ev ...

javascriptjquerycheckboxtoggleuiswitch

When working with the <picture> element, only the first <source> is being utilized while the others are being disreg

When it comes to the img tag and the source tags, it simply switches between the first source tag based on the parameters provided. <picture> <source media="(min-width: 800px)" srcset="https://via.placeholder.com/800x700"> ...

htmlcss

Guide on dynamically changing the color of polymer 1.0 paper-button from an array of colors

I have an array called buttonColors that contains a set of colors in hex format. I am looking to create paper-buttons, each with the color from the buttonColors array. How can I achieve this in Polymer 1.0? <template is="dom-repeat" items="{{buttonCo ...

javascriptcsspolymerweb-componentpolymer-1.0

Issue with Click event not functioning properly following an ajax request in a dynamic element within the Backbone framework

I have successfully implemented a dynamic popup in my Backbone.view through the click of a button: var Section = Backbone.View.extend({ className: 'sqs-frontend-overlay-editor-widget-section', events:{ 'click .sqs--section--control__ed ...

javascriptjqueryajaxbackbone.jsbackbone-views

Tips for reorganizing the JSON data created by Artoo.js?

My file aims to scrape data from a single webpage, but I've hit a roadblock. I initially tried using artoo, request, and cheerio based on my research. Here's the code I have so far: request('http://www.ciclopi.eu/frmLeStazioni.aspx?ID=144&a ...

javascriptarraysjsonsortingdata-structures

Strategies for resolving a mix of different data types within a single parameter

Here, I am setting up the options params to accept a value that can either be a single string or another object like options?: string[] | IServiceDetail[] | IServiceAccordion[]; However, when attempting to map these objects, an error is encountered: Prope ...

javascriptreactjstypescriptnext.js

Top replacements for jQuery in AngularJS applications

It would be great to compile a comprehensive list of jQuery alternatives that are compatible with AngularJS, capable of manipulating styles (css), and supporting effects like fadeIn, fadeOut, slideDown, slideUp, etc. Based on feedback from comments, we sh ...

javascriptjqueryangularjsangularjs-scope

Does jQuery UI Layout have compatibility issues with jQuery version 3.3.1?

jQuery UI Layout is compatible with older versions of jQuery, but not with newer versions... Here is a working example: <html> <head> <script src="http://layout.jquery-dev.net/lib/js/jquery-1.4.2.js"></script> <script ...

javascriptjquery

Implementing CSS loading in Vue 3's shadow DOM for nested components

I'm currently working on building an embeddable widget using a custom element with Vue. In order to achieve this, I've created a file called Widget.ce.vue and enabled style loading in the component's shadow root. However, I've run into ...

cssvue.jsvuejs3custom-elementvue3-sfc-loader

Update content without reloading the page

I've implemented a function to delete an image in my action.js file: export const removeImage = (id, image_id) => async () => { try { const response = await axios.delete( `localhost:3000//api/v1/posts/${id}/delete/${image_id}`, ...

javascriptreactjsreduxnext.js