Header displaying issue on Firefox

Seeking help with my previous post on: Animation stop with css3

The slider functions flawlessly in Chrome, but encounters issues in Firefox. Any suggestions or insights are welcomed.

You can access the slider here

It appears that there is a compatibility problem in Firefox related to absolute positioning and display as table-cell.

Snippet of my code:

 <header>
    <div>
        <img src="./images/ironman.png"> 
        <span>Ironman</span>
    </div>
    
    <!-- Repeat div structure for remaining content -->

</header>

Here is the corresponding CSS:

 header {
margin-top: 10px;
width: 1185px;
display: table;
overflow: hidden;
background-color: #000;
height: 500px;
 } 

<!-- Additional CSS styling rules provided -->
htmlcssfirefoxanimationtransition

Answer №1

Below is a solution that has proven effective:

http://codepen.io/jeremyzahner/full/cAEbv

In essence, I inserted a new container within the existing "div" with the class .inside. In this new container, I applied 

width:100%; height:100; position:relative; overflow:hidden;
. Additionally, I removed the fixed height from the outer divs since the header already establishes that fixed height; setting it again is redundant.

Firefox has a known issue where it handles display:table-cell; divs in this manner. It is unlikely to be resolved soon. Therefore, the most effective workaround (according to my experience) is to introduce another inner wrapper like demonstrated here.

CSS Adjustments:

header > div .inside {

    position:relative;
    width:100%;
    height:100%;
    overflow:hidden;

}
header > div {
    background: url('./images/iron_man_bg.jpg');
    width: 123.8px;
    position: relative;
    -webkit-transition: width .3s;
    transition: width .3s;
    display: table-cell;
    border: 2px solid #fff;
    overflow: hidden;
}

HTML Modifications:

<div>
  <div class="inside">
    <img src="./images/ironman.png"> 
    <span>Ironman</span>
  </div>
</div>

This approach was tested using the latest versions of Chrome and Firefox (on Ubuntu).

I trust this information proves beneficial

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

The block tag on line 117 is incorrect: 'endblock' was found instead of 'empty' or 'endfor'. Perhaps the tag was not registered or loaded properly?

{% extends 'shop/basic.html' %} {% block css %} .col-md-3 { display: inline-block; margin-left: -4px; } .col-md-3 { width: 100%; height: auto; } body .no-padding { padding-left: 0; padding-right: 0; } .car ...

htmldjango

Menu Tabs with Rounded Edges

Seeking help to round the corners of a tabbed dynamic menu using Drupal and the dynamic-persistent-menu module. The code provided below is almost perfect, with 99% accuracy. View the current state of the menu here: . Can anyone assist in achieving the rema ...

cssimagebackground

Unable to modify SVG color to a white hue

I am currently working on an Angular project where I am utilizing SVG to display some icons. These icons originally have a default grey color, but I want them to change to white when hovered over. Interestingly, while changing the color to red, green, or y ...

htmlcsssvgsass

When a UIAlertView is opened, the animated UIButtons automatically return to their initial positions

I'm in the process of designing a Welcome screen that includes two UITextFields, a Forgot Password button, and two more buttons (signInButton and createAccountButton) within an UIView called inputsView, where the text fields are also located. Wheneve ...

iosobjective-canimationuiviewuialertview

Experience the smooth glide on a CSS image

I am looking to add a unique animation to my menu, specifically a slide-down color effect instead of the typical fade transition on the first two divs. I envision it as a curtain-like animation. When hovering over an image, I want a colored panel to smoot ...

htmlcssanimationyui-pure-css

Tips on modifying the background color of a read-only field in an edit form

Changing the background color of a readonly field in the edit form of Free jqgrid can be a challenge. One potential solution involves specifying a style: .jqgrid-readonlycolumn { background-color: #FFFFDD; } This style is then used in the colmodel e ...

jqueryhtmlcssjqgridfree-jqgrid

Authentication using a singular input

Struggling to design an input for a verification code with just one input instead of four. However, I am facing some challenges: The input is not responding correctly when clicked, it's a bit buggy and requires clicking at the end of the input to typ ...

htmlcss

Tips for binding JavaScript to dynamically generated elements?

I have a dynamic JavaScript rotation function set up with a div element that is generated dynamically by a button. The challenge I am facing is figuring out how to correctly append this rotation slider for each dynamically created element so it can operate ...

javascriptjqueryhtmlcssdynamic

What is the best way to achieve vertical text box scrolling in CSS and HTML overflow?

I'm having an issue with a text box I created and I couldn't find a solution elsewhere. Here is the CSS script for the text box: css: .cln{ top:220px; width:680px; height:350px; text-align:left; overflow:scroll; white-space: nowrap; overflow: ...

htmlcss

Transform HTML table data into XML format

My challenge is to transform an HTML table into XML format using pure JavaScript without the use of jQuery or any other libraries. I have found plenty of tutorials on converting XML to HTML, but none on how to go in the opposite direction without resorting ...

javascripthtmlxml

In order to format my text, I must locate a specific character and encompass the text following it with HTML tags

When working with a list generated in Jekyll, I came across the need to emphasize certain words using strong tags. My solution was to incorporate a delimiter into the process. <li>100g of |sugar</li> This would transform into: <li>100g ...

jqueryhtmljekyll

Is there a way to confine a jquery script within the dimensions of the container div?

I have recently created a gallery with navigation buttons in jQuery. As a newcomer to jQuery, I wrote a small script that adjusts the margin of a div container by a fixed amount. The script is functioning properly, but it extends beyond the top and bottom ...

javascriptjqueryhtmlcss

What is the best way to adjust the height of the border on the left

Is it possible to add a border-left with height to only one attribute, such as h4? I want to add a border on the left side with a specific height, but the title prohibits adding the height property directly. Can anyone offer guidance on how to achieve th ...

htmlcss

Guide on clearing the value of the first textarea and transferring it to the second textarea using JavaScript

I have encountered an issue where the first textarea value is being copied into the second textarea because I am using the same id for the 'add more' functionality. Below is the code snippet: <div id="divShortAnswerOption_Templated"> & ...

javascriptjqueryhtml

The select options appear above the overlay modal

In my HTML application on Apex 5, I have implemented a drop-down list that is not meant to be directly selected by the user. Instead, when the user clicks on it (or when the item receives focus), a modal page opens displaying the list of items for selectio ...

javascripthtmloracle-apex-5.1

Accessing an object from a webpage using Selenium: A step-by-step guide

Today marks my debut using Selenium IDE, and I must admit that my knowledge of web development is limited. My team is currently working on a website, and as part of my task, I need to write tests for it. The website features several charts showcasing data ...

htmlcssseleniumselenium-ide

The backdrop moving in a reverse direction

I recently made a tweak to this code that successfully moves the background in the opposite direction of the scroll. However, there is now an issue where it leaves a blank space at the top, even when the background is set to repeat. The change I made was s ...

javascriptcss

IE displays div height differently compared to Firefox and Chrome

Having trouble adjusting the height of a div tag in different browsers? Need help fixing this issue? Check out the CSS code snippet below and visit the site here for more information. #payment{ width: 265px; border: 1px solid #cecece; border ...

csshtmlxhtml

What sets apart adding a row from adding a col-12 in Bootstrap 4?

I have a doubt that I'm trying to clarify, but unfortunately it's not mentioned in the Bootstrap 4 documentation. Can someone explain the difference between these two code snippets? <div class="container"> <div class="row"> < ...

htmlresponsive-designbootstrap-4

` How can you output data values using form data? `

I need help with printing form data values using the formData.entries function because I am dealing with multiple ng-repeats. <table class="table table-bordered table-hover"> <thead> <tr> <th>Product Name< ...

javascriptjqueryhtmlangularjs