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

Ways to create a scrollable div with the help of Javascript

I am currently developing a web app on the Tizen platform. Within my HTML5 code, I have a div element with an image set as its background. In certain scenarios, I need to display random text within this div multiple times. The text can vary in size and ma ...

javascripthtmltizentizen-web-app

encountered net::ERR_EMPTY_RESPONSE while attempting to locate a CSS file within an AngularJS directive

Every time my webpage attempts to access the css file from a directive, I encounter a net::ERR_EMPTY_RESPONSE. I have implemented door3's on-demand css feature, which allows for lazy loading of css files only when necessary. This feature works flawle ...

javascriptjqueryhtmlcssangularjs

Remove any errors as soon as the input field becomes valid

My current setup involves AngularJS with node.js. To handle errors, I have devised the following strategy: node router effect.js: router.post('/', function(req, res, next){ req.checkBody('name', 'Eff ...

javascripthtmlangularjsnode.js

Using Angular/Typescript to interact with HTML5 Input type Date on Firefox (FF)

Are there any Angular/Typescript projects that are completely built without relying on third-party libraries? I am encountering problems with Firefox and IE11. It works fine on Chrome where the value can be read, but the calendar does not display when us ...

htmlangulartypescript

Having trouble aligning the form in the center?

Despite #container being centered, I am struggling to center the <form>. It is important for me to have all elements inside the form aligned horizontally and despite trying various techniques, it is not working as expected. <!-- Container Start - ...

htmlcss

Show the text area content in an alert when using Code Mirror

When I try to alert the content of a textarea that is being used as a Code Mirror on a button click, it appears blank. However, when I remove the script for Code Mirror, the content displays properly. I am puzzled about what could be causing this issue wi ...

javascriptjqueryhtmlcodemirror

Having trouble getting Ajax post to function properly when using Contenteditable

After successfully implementing a <textarea> that can post content to the database without needing a button or page refresh, I decided to switch to an editable <div> for design reasons. I added the attribute contenteditable="true", but encounte ...

javascriptphphtmlajax

Ways to conceal components upon clicking a different element

Struggling to make this jQuery function properly. I have a form with all fields contained in a div.form-group. The subscribe button is identified by the id subscribe. I'm aiming to hide the form fields when clicked, but my JavaScript doesn't see ...

javascriptjquerycss

Displaying URLs stylishly with Pills Bootstrap

When a pill is selected from the list, I need to display a specific URL that can be used elsewhere. However, there is an href="#pills-something" attribute that directs to an ID below. I am looking for something like: mysite.com/myspecificpill or ...

javascripthtmljquerycssbootstrap-4

I cannot seem to alter the background color of my image through the use of external CSS

body { background-color: #f6f7d4; } h1, h3, hr { color: #68b8ab; } hr { width: 100px; border-style: dotted none none; border-color: gray; border-width: 5px; } img { background-color: black; } Although the external CSS code a ...

htmlcss

How can I remove the arrow from a CSS selector?

I'm looking to enhance the appearance of a select element on my webpage, so I've crafted some custom CSS: .selectWebDropDown { background-color:Transparent; background: url(../Images/ddl_Normal.png) no-repeat right #FFFFFF !important; ...

htmlcss

Running CesiumJS is a straightforward process that can be done by

After diligently following the provided instructions, I managed to get cesium running locally. I then attempted the hello world example as shown: However, despite clicking on "open in browser," I couldn't see anything. It has been a constant struggl ...

javascripthtmlcssconfigurationcesiumjs

The footer at the bottom of the page is currently malfunctioning

I was able to create an always on the bottom footer using code from Codepen. Here is the HTML: <div class="content"> <header> <p>blabla</p> </header> <main> <p>blaBlabla blub</p ...

htmlcssapachexampp

Unable to place an absolutely positioned Div within relative parent containers

After applying the id "enterGame" with position: absolute, I noticed that the div disappears. Even when I tried adding position: relative to the body or html tag, the div remained invisible. The relevant code snippet is as follows: html { height: 10 ...

htmlcss

How to Delete an Accordion Panel with Jquery

My main focus has been on adding a panel using JQuery Accordion, which I successfully implemented. However, I am now facing the challenge of removing the same panel that I added. I have managed to create a fiddle at http://jsfiddle.net/cof7ojky/12/ where ...

jqueryhtmlaccordionjquery-ui-accordionremoveclass

The image slide change feature ceases to function properly when incorporating two separate functions

I have a function that successfully changes the image of a container every 5 seconds. However, I am facing an issue when trying to add 2 containers side by side and change their images simultaneously. When I run the functions for both containers, only one ...

javascripthtmlcss

Adding a code for divs into CSS caused the navigation bar to be completely obliterated

Initially, my menu was perfectly styled with the following CSS code in my css file: ul.Menu { list-style-type: none; margin: 10px; overflow: hidden; background-color: #ffffff; border-style: solid; border-color: #e9055c; border-width: 2px; font-weight: bol ...

htmlcss

The variable in the HTML input value is not fully visible when filling out the HTML form

I am working with a Python Flask code where I have passed a dictionary to an HTML form. The table in the form correctly displays both keys and values, but when trying to populate a form field with the value from the dictionary, only the first word is displ ...

pythonhtmlinputflask

A step-by-step guide to displaying a label component upon clicking an AjaxLink

How can I display data from a JSON file when an AjaxLink is clicked? The code I have implemented is not working, so I would appreciate any corrections or suggestions. Additionally, I am wondering if it's possible to add a label inside AjaxLink. Thank ...

javahtmlwicketwicket-6

Issue with Bootstrap 4 toggle button functionality - looking for a fix

I'm encountering an issue with my website where the toggle button for the navbar is not functioning properly after I added it. Below is the code snippet for my navbar: <nav class="navbar navbar-expand-lg navbar-light bg-light"> <a class=" ...

htmltwitter-bootstrapbootstrap-4