The footer on my webpage seems to be completely incorrect, but I'm struggling to identify what is causing the conflict

I'm puzzled by the issue with the footer on my webpage, especially the strange line of black opacity that shouldn't be there. I'm unsure why this is occurring. You can view the problematic page here. I've also created a codepen with the HTML and CSS here. As a newbie, I'm struggling to figure this out, so any assistance would be greatly appreciated.


<footer>

<img id="imgfoot" src="img/aperture_labs_bot.png" alt="aperture laboratories footer line" ><!-- width= "2400" height= "68" -->

<div class="center1"><h3>Aperture science, we do what we must because we can.</h3>
</div>
<br>
<div class="center1"><h4> Questions or Comments? Contact us!</h4>
</div>
<br>

<a href="tel:425-889-9642">
<div id="left">
<div class="overlay1">
<span class="text">Phone: 425-889-9642</span> </div></div></a>

<a href="https://goo.gl/maps/Ln7Pshy1htM2">
<div id="center">
<div class="overlay2">
<span class="text">P.O. Box 1688 Bellevue, WA 98009</span> </div></div></a>

<a href="mailto:Aperture.Science.gmail.com?subject=The-Cake-is-not-a-lie!">
<div id="right">
<div class="overlay1">
<span class="text">Aperture.Science.gmail.com</span> </div></div></a>

<br>
<div class="center1"><h4> Do you want to apply to be a test subject? Do you also like free cake and $60? Apply now! <a div id="redacted" href="WebForm.html"><span style="background-color: #000000">REDACTED.</span></div></h4></div>

</h4>

</footer>
htmlcssfooter

Answer №1

Open up your file named layout.css and remove lines 75 and 76

background: url(../img/aperture_labs_bot.png) no-repeat fixed; background-image: url(../img/aperture_labs_bot.png); 

    footer {
       DELETE:  background: url(../img/aperture_labs_bot.png) no-repeat fixed; 
       DELETE: background-image: url(../img/aperture_labs_bot.png); 
     background-repeat: no-repeat;
     background-size: contain;
     background-position: center;
     overflow: hidden;
     background-size: cover;
     max-width: 100%;
     text-align: center;
     display: inline-block;
 }

Answer №2

Your HTML markup seems to have some errors that need fixing. Be sure to check that all opening and closing tags are correct, and consider using an HTML validator tool or IDE for assistance.

One useful tool for validating markup is W3: https://validator.w3.org/nu/?doc=http%3A%2F%2Fgff.mx%2Fgdes220%2Fstudents%2F07%2FP2finaldraft%2Findex.html. It can provide insights into any validation errors present in your code.

For instance, check that your opening tags match the corresponding closing tags. It's important for maintaining clean and error-free HTML.

Take a closer look at the HTML block below and clean it up accordingly:

<br>
<div class="center1">
  <h4>Do you want to apply to be a test subject? Do you also like free cake and $60? Apply now! <a div id="redacted" href="WebForm.html"><span style="background-color: #000000">REDACTED.</span></div></h4>
</div>

</h4>
<br>

Consider revising it to something similar to the corrected format below:

<div class="center1">
  <h4>Do you want to apply to be a test subject? Do you also like free cake and $60? Apply now! <a div id="redacted" href="WebForm.html"><span style="background-color: #000000">REDACTED.</span></a></h4>
</div>

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

Angular application featuring scrolling buttons

[Apologies for any language errors] I need to create a scrollable view with scroll buttons, similar to the image below: Specifications: If the list overflows, display right/left buttons. Hide the scroll buttons if there is no overflow. Disable the le ...

htmlcssangularscroll

Cross-browser compatibility issues preventing CSS button effects from functioning properly

Experiencing some challenges with CSS Button effects not functioning consistently across different browsers. The display is satisfactory in Chrome, but not in Firefox. Struggling to pinpoint the source of the issue. Here is my current setup: Fiddle a ...

htmlcssbuttoncross-browser

How to Use Attributes as Component Parameters in Vue.js

I am currently developing a test Component using Vue.js. I am trying to pass a parameter to be used in my template like this: Vue.component('test', { props: ['href'], template: '<li><a href="{{href}}"><slot> ...

javascripthtmlbindingvue.js

Having trouble accessing jQuery function within WordPress

Why is there a ReferenceError: Error message that says "manualEntry is not defined," appearing while trying to use the code snippet below in a Wordpress environment? <a href="#" onclick="manualEntry()">hide</a> <script ...

javascriptjquerycsswordpressjquery-events

Modify/Adjust/Move the image uploaded by the user in VueJS before transferring it to an aws s3 bucket

Can you resize images in vuejs using vanilla js? I've managed to upload an image and send it to my s3 bucket using vue, but I'm struggling to figure out how to transform an image within vuejs and display it. Document.querySelector doesn't se ...

javascripthtmlcssvue.js

iOS 11's Mobile Safari presents a challenge for web apps with the nav bar overlapping the top portion of the screen, cutting off content that relies on

When using 100vh on Mobile Safari, it fails to account for the height of the lower navigation bar. For example, look at the screenshot below. To show my app-like footer, I have to manually subtract 74px from the container's height in a somewhat messy ...

cssweb-applicationsresponsive-designmobile-safari

What could be causing the misalignment of a button within a Bootstrap navbar?

I'm struggling with aligning the log out button correctly in the navigation bar with a dropdown. I have tried every structure suggested on the Bootstrap documentation page to no avail. Can anyone provide guidance on how to vertically align it properly ...

htmltwitter-bootstrapbootstrap-5

Set the background of the div element behind the image

I am trying to create a layout where the div color matches the size of an image behind it, with the image moving slightly on hover. Here is my code: <div class="row text-center about__gallery"> <div class="col-xs-12 col-sm-4"> <div cl ...

htmlcsssass

centered logo in a flexbox header

Having trouble with Flex for the first time. Despite reading and experimenting, I still can't figure it out. Any suggestions on how to accomplish this? Check out an example ...

cssflexbox

A step-by-step guide on utilizing img src to navigate and upload images

I would like to hide the input type='file' element with id "imgInp" that accepts image files from users. Instead, I want them to use an img tag to select images when they click on a specific img tag. How can this be achieved using jQuery? Here i ...

javascriptjquerycsshtml

What could be causing the Bootstrap 4.4.1 Media Query to not function properly?

Attempting to incorporate a responsive design into my web application utilizing media queries with Bootstrap 4.4.1. Conducting tests on the media queries using the following Shown below is the styles.css code @media only screen and (max-width: 575.98px) ...

cssbootstrap-4stylesmedia-queries

Trouble with Bootstrap 5 Carousel swipe functionality: Issues arise when inner elements with overflow are involved, causing vertical scrolling to interfere with left to right swipes

I've been scouring the internet for answers to my unique issue with a Bootstrap 5 carousel. My setup is fairly basic, but I've removed the buttons and rely solely on swiping to navigate through the carousel items. When I swipe left to right, eve ...

javascriptcsscarouselbootstrap-5

jquery technique for toggling a single button

My goal is to use jQuery to toggle a button rather than the typical paragraph toggling. I want the button to appear and disappear when clicked, while also increasing the "score" upon each click and decreasing it when the button reappears. Can anyone guide ...

javascriptjqueryhtmlcss

Creating uniform heights for HTML column-based tables using divs in a React environment

I am developing a unique column-oriented and div-based table using React with Typescript. The data outside the table is organized in a column-based structure, rendering column 1 followed by row 1, row 2, row 3, then column 2 with its respective rows. The ...

htmlcssreactjshtml-table

I need help figuring out how to showcase the following object in an Angular 5 HTML file

https://i.sstatic.net/XXm3W.png The console screenshot above shows an object with two values: users and tickers, each being an array of values. How can I display these values in an Angular 5 HTML template similar to the screenshot above? I attempted to ...

javascripthtmlnode.jsangularangular5

Trouble with feedback form not showing up

I've been working on creating an ajax feedback form, but I'm facing difficulties in getting it to show up properly. The feedback image appears, but clicking on it doesn't trigger any action. Here's my Form: <div id="feedback"> ...

javascripthtmlajaxfeedback

Looking for a drum set with clickable buttons? Having trouble changing the background color in CSS/HTML? Wondering how to map keyboard keys to HTML buttons?

Behold my HTML creation: <H1> <center> EPIC GUITAR JAM </center> </H1> <img class="guitar" src="guitar.jpg" /> <button class="strum" onclick="Strum()"> Strum Chord </button> <button class="pluck" o ...

javascripthtmlcsskeyboardbackground-color

Positioning a text directly next to an image that are both hyperlinked to the same webpage located in the center of the image

When viewing my site on a mobile device, I want to have an image with text next to it that both link to the parent menu. However, I'm facing an issue with the text not aligning properly (it should be centered within the picture height but appears at t ...

htmlcss

What is the best way to choose the initial and final <td> that appears within a <tr>?

I am working with an html table that has the following structure: <table> <tbody> <tr> <input type="hidden" name="a" value="x"> <input type="hidden" name="b" value="y"> <td>First Ce ...

javascriptjqueryhtmlcss

Steps to obtain the precise source code of a webpage

Is there a way to download the exact source code of a webpage? I have tried using the URL method and Jsoup method, but I am not getting the precise data as seen in the actual source code. For example: <input type="image" name="ctl00$dtlAlbums$ct ...

javascriptjavahtmlcssjsoup