The footer is not displaying at the bottom of the page in Firefox

While the footer design is functioning well in both Chrome and IE, it seems to be encountering issues with Firefox.

div.footer{
    width: 100%;
    padding: 0px;
    margin-top: 200px;
    font-size: 0.6em;
    line-height: 1.2em;
    clear: both;
    position: absolute;
    bottom: 0;
    height: 75px;
    background-color: #fff;
    font-family: Verdana,Arial,sans-serif;
    color: #000;
}

.footer div{
    padding: 5px 0px;
}

.footer a{
    text-decoration: none;
    color: #000;
    font-weight: bold;
}

This code snippet handles formatting for a footer in Ruby that yields to page content. The issue arises with Firefox displaying the footer at the bottom of the content pane instead of the screen's bottom. It could be related to the yield function, which alters the footer's location when certain styles are removed. However, this workaround compromises functionality on other browsers.

An ideal example can be viewed here: https://jsfiddle.net/3dme9em8/

Answer №1

Discovered the issue was with the container holding the ruby elements

max-height: 100vh;

resulted in not utilizing the entire viewport height in Firefox

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

Missing arrow icon in Bootstrap 4 navbar menu and sub menu

I am attempting to use the navbar component from Twitter Bootstrap 4 with a nested sub menu, but the arrow in the menu item that has a sub menu is not appearing at all, and I am unsure why. Here is where the arrow appears: https://i.sstatic.net/J6xI4.jpg ...

The value entered in the HTML input is not being recognized by PHP

I'm facing an issue with my project (index.php), which is a HTML webpage. I am trying to use the 'include' function to bring in the header and footer (header.php, footer.php). Additionally, I want the current date to automatically populate i ...

Generate an image on Canvas using a URL link

I have a unique URL that generates canvas images with specific parameters. It functions properly when loaded in a browser. The final line of code is: window.location = canvas.toDataURL("image/png"); However, when attempting to use this URL from another ...

Utilizing browser's local storage to dynamically update text in buttons and panels

In my file, I have the following code snippet (I've removed other irrelevant code) <div data-role="panel" id="loc_panel"> <h2>Panel Header</h2> <p>info about this stop</p> </div> <!-- /panel --> < ...

Filtering Completed: Table Returned

Recently, I worked on a fun project where I organized JSON wine data into a table and created an object that defines various wines along with their attributes like color, taste, and body. The main objective: When clicking the red button, I want a function ...

How can we apply position: fixed in print media queries using CSS?

In order to display a footer on every printed page, we have implemented the use of position: fixed. However, one issue that has arisen is that content ends up flowing underneath the footer. Is there a solution to prevent this from happening while still k ...

Guide to changing the background colors of multiple elements when hovered over by the mouse?

I want to customize my website's search bar by changing the background color when it is hovered over. Currently, the search bar has two main elements: the text box and the submit button. I have successfully programmed the text box element to change to ...

Which component from the Bootstrap library would be best suited for my needs?

I am looking to create a basic 6-page website. Here is the code for my main page: <html> <style> .ali{ width:170px; text-align:center; } footer{ background:#333; color:#eee; font-size:11px; padding-top: 25px; p ...

A guide on dynamically accessing an image from the src directory using props in a Vite + React application

export default function Card(props) { return ( <card> <img className={cardCss.card__img} src={`../assets/imgs/card/${props.img}`} alt="" /> <div className={cardCss.card__stats}> ...

Autofill Dropdown in AngularJS Using Data from Previous Page

Despite searching extensively on StackOverFlow, I was unable to find the answer I needed. So, I am posting my question below. I have a form that includes a dropdown menu. When a user clicks a button, they are taken to a new HTML page with additional infor ...

The functionality of the onclick button input is not functioning properly in the Google

Here is some JavaScript code: function doClick() { alert("clicked"); } Now, take a look at this HTML code: <div > <table border="2" cellspacing="0" cellpadding="0" class="TextFG" style="font-family:Arial; font-size:10pt;"> <tr> <t ...

I am experiencing an issue where the CSS file is not being loaded in my HTML file while using the Netbeans IDE

I am a beginner in HTML and CSS and I have been trying to link my CSS file to my HTML code after reading various solutions on Stack Overflow. Unfortunately, I am facing difficulty as the CSS file is not loading in my HTML code. If anyone can offer assistan ...

Assembly of Components

As someone new to angular, I am currently in the process of building an angular2 application. My goal is to dynamically create a series of DOM components using the data provided below: // Class construct with properties sorted alphabetically export class ...

Is there a way to position an image to the left of the container in Jinja templating while floating it?

I am currently working on a project using Flask that utilizes Jinja templates. In my layout.html file, there is a grey colored container that extends to all child pages. I have a specific page that extends the layout.html where I want to place an image flo ...

Unable to progress past first image in Bootstrap 5 carousel

I'm having trouble implementing a carousel on my HTML page. It only displays the first image, and the next and previous buttons are not functioning. I copied and pasted the code from Bootstrap directly. <link href="https://cdn.jsdelivr.net ...

One of my AngularJS directives seems to be malfunctioning while the rest are working fine. Can you help me troubleshoot

Recently, I've been immersing myself in the job search process and decided to create a website as a sort of online resume while also learning AngularJS. I enrolled in the Angular course on CodeSchool and am slowly building my website to my liking. (Pl ...

Resize the shape of an image's polygon

Is there a way to independently scale a specific polygon of an image on hover? For example, I have a world map and I would like to enlarge a country when hovering over it, then return it to its original size when no longer hovering. I am familiar with us ...

Aligning characters according to Unicode standards

I'm looking to showcase a Unicode character at the center of a button. Below is the code snippet: <div class="col-xs-1"> <button class="btn btn-tool"> <span></span> </button> </div> span:before { ...

Ensure consistent switching of flexbox directional layout

I'm attempting to create a unique layout using only css3. My challenge is to achieve this without explicitly setting sizes, allowing the layout to flow freely. I am utilizing flexbox in my css for this purpose. After an automatic wrap, I want the layo ...

Error message indicating that the event "OnkeyDown" is not in sync within the React application

Hey everyone! I'm a beginner in web development and I'm struggling to understand why the event "OnKeyDown" is triggered the second time. My task involves changing (increasing, decreasing) parts of a date (day, month, year, hour, minutes, seconds) ...