Footnote fiascos

I am currently in the process of creating a footer for my webpage and have implemented the following CSS styling:

#footer {
    height: 100px;
    background-color: #F3F3F3;
    position: absolute;
    bottom: 0;
}

Although the footer is displaying at the bottom of the page as intended, the background colors are not showing up. Instead, it appears to have the same plain white background as the rest of the page.

Any insights on why this issue is occurring?

EDIT I have double-checked for any conflicting or overriding CSS rules, but haven't found any.

EDIT2 Here is the HTML structure:

<div id="footer">
    <center><p> Hello, I am a footer element </p></center>    
</div>
htmlcss

Answer №1

To change the background color in CSS, you need to use the "background-color" attribute. Update your CSS code like this:

#footer {
    height: 100px;
    background-color: #F3F3F3;
    position: absolute;
    bottom: 0;
}

Here is a live example for reference: http://jsfiddle.net/gfKXU/1/

Answer №2

Perhaps you intended to use background-color: #F3F3F3; instead?

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

Changing the navigation bar's position from fixed to static while scrolling using Bootstrap

I am attempting to keep the navbar at the top by setting a fixed position with 'top: 0' on scroll for navbar-default, and return the navbar to its original position when scrolling up (to top 300). Below is my code: var height = jQuery('.n ...

jquerytwitter-bootstrapcss

Fancybox overlay not adjusting to full height

When working with JavaScript: $(document).ready(function() { $(".fancybox").fancybox({ helpers: { overlay: { opacity: 0.4, css: { 'background-color': '#FFF' ...

jqueryhtmlcssfancyboxfancybox-2

Struggling to find a solution for altering font color with jQuery while creating a straightforward menu

I'm having trouble changing the color of the active button pressed to "color:white;"... Here is the link to the jsfiddle: http://jsfiddle.net/wLXBR/ Apologies for the clutter in the file, my css is located at the bottom of the CSS box (Foundation cod ...

jqueryhtmlcss

What is the method for accessing a selector within a foreach loop?

Whenever a user clicks on a date in the jquery datepicker, two ajax calls are triggered. The goal is for the second ajax call to populate the response/data into a paragraph with the class spots within the first ajax call, displaying available spots for th ...

javascriptjqueryhtmlajax

After deploying DRF, the CSS in Django admin is not displaying

After developing a web application using Django Rest Framework and React, I faced an issue during deployment on IIS. While the deployment is successful, I encountered a problem with the Django Admin where the styles were not displaying properly. This led t ...

cssiisdeploymentdjango-rest-frameworkdjango-admin

Generate individual CSS files using postcss and rollup

When I import each css file in my JavaScript, I want it to generate a new css file for the build. For example: import "./app.css"; import "./admin.css"; This would result in creating dist/app.css and dist/admin.css. My configuration fi ...

cssbuildrollupjspostcss

What is the best way to extract data from two dropdown menus and send it to separate URLs?

I need assistance with extracting the selected year value from the first dropdown. I would like to append this value to the URL of the header page and also to the options in the second dropdown. This way, when I select a PHP page from the second dropdown ...

javascriptphphtmlajax

Embed a javascript tag to print a PDF document

I have been struggling with printing a PDF file using JavaScript. I attempted to use the embed trick suggested in this Silent print a embedded PDF but unfortunately, the print function remained undefined. Then, I tried another approach using an Iframe and ...

javascripthtmlpdf

Challenged with selecting an item within select2 due to the presence of a lower-down multiple select

Why am I unable to select options 2 & 3 when I open #s1? Instead, when I click on them, the cursor goes into #s2. How can I resolve this issue? I initially considered that it might be related to the z-index, but after attempting to adjust it, the prob ...

htmlcsstwitter-bootstrap-3jquery-select2

Drop Down Automation with Selenium IDE

Currently in the process of automating a User Acceptance Testing (UAT) for a software project at my company. I've completed all the typical tasks like recording actions and clicking on buttons, but ran into an issue with a drop-down menu. The problem ...

javascriptjqueryhtmlseleniumselenium-ide

Moving divs to a separate line in mobile display

I currently have a basic image-thumbnails landing page set up like this: <div style="display: inline-block;"><img style="margin: 3px 3px;" src="..." alt="" width="200" height="200" /></div> <div style="display: inline-block;"><i ...

htmlcss

Upon clicking, the input texts revert to their original default values

I have a form below that is working as intended, except for one issue. When I click the 'Add' link, the texts in all the textboxes revert to their default values, as shown in the images. How can I resolve this problem? Thank you. before click: ...

javascripthtml

Tips for centering elements in an image caption

I need some help with separating an image and text within an image caption from each other. Currently, they are overlapping and I want them to be distinct. I attempted using inner div elements for the text and image separately, but it caused issues by brea ...

htmlimagecss

Can anyone recommend any offline editors for HTML, CSS, and JavaScript similar to JSFiddle, jsbin, or codepen?

Is there an alternative to JSFiddle.net that allows users to experiment with Javascript, HTML, and CSS offline in a similar way? ...

javascripthtmlcss

Border utilities in Bootstrap 4 provide easy ways to add borders

I have been searching for a solution, but I can't seem to find it. Bootstrap 4 offers utility classes for adding and removing borders, but is there a way to define the border width or style like solid or dashed? <span class="border"></span&g ...

htmlcsstwitter-bootstrapbootstrap-4

Fading text that gradually vanishes depending on the viewport width... with ellipses!

I currently have a two-item unordered list positioned absolutely to the top right of the viewport. <header id="top-bar"> <ul> <li> <a href="#">David Bowie</a> </li> <li> ...

javascripthtmlcss

The presence of '<!DOCTYPE html>' causes my website's content to compress

After including !DOCTYPE html, I noticed that the first section of my website is shrinking even though its height is set at 120%. I attempted various solutions from stack overflow like setting the height of HTML and body to 100%, but none of them resolved ...

htmlcssdomdoctype

QuickFit, the jQuery plugin, automatically adjusts the size of text that is too large

I have incorporated the QuickFit library into my website to automatically resize text. However, I am running into an issue where the text is exceeding the boundaries of its containing div with a fixed size. This is something I need to rectify. This is ho ...

javascriptjqueryhtmlcsstext

What is the best way to save and retain cache data for an audio file?

I have a website where I am using an audio file in .swf format. This audio file can be turned on and off with the options provided: AUDIO ON and AUDIO OFF. However, I am facing the issue that the audio keeps playing repeatedly even after being turned off. ...

phpjavascripthtml

Injecting a component in Angular 2 using an HTML selector

When I tried to access a component created using a selector within some HTML, I misunderstood the hierarchical provider creation process. I thought providers would look for an existing instance and provide that when injected into another component. In my ...

javascripthtmlangulartypescript