What could be causing the CSS border to not show up on the webpage?

I am trying to add a border to the footer, but it seems like something is blocking it from showing properly.

Below are the CSS lines I have used:

position: fixed;
bottom: 0;
right: 0;
left: 0;
clear: both; 
line-height: 1.36em;
padding: 08px 0px 0px;
text-align: center;
margin: 0px auto;
background: #fff;
border-top: 5px solid #4cb6cb;

Can you spot what I might be setting wrong that could be causing this issue?

Here is the HTML code snippet as well:

<div id="page_footer">
    <div id="bottom_nav">
        <a href="/about"><?php echo $LANG['footer-about']; ?></a>
        <a href="/terms"><?php echo $LANG['footer-terms']; ?></a>
        <a href="/support"><?php echo $LANG['footer-support']; ?></a>
    </div>

    <div id="footer" class="clear">
        <?php echo APP_TITLE; ?> © <?php echo APP_YEAR; ?>
        <a class="lang_link" href="javascript:void(0)" onclick="App.getLanguageBox('<?php echo $LANG['page-language']; ?>'); return false;"><?php echo $LANG['lang-name']; ?></a>
    </div>
css

Answer №1

It seems like the code is correct, but it may be applied to the wrong class or id. Make sure to check the class name and add a rule for HEIGHT directly to the footer element.

#footer {
position: fixed;
bottom: 0;
right: 0;
left: 0;
clear: both; 
line-height: 1.36em;
padding: 08px 0px 0px;
text-align: center;
margin: 0px auto;
background: #fff;
border-top: 5px solid #4cb6cb;
}
<div id="page_footer">

        <div id="bottom_nav">
            <a href="/about">Link 1</a>
            <a href="/terms">Link 2</a>
            <a href="/support">Link 3</a>
        </div>

        <div id="footer" class="clear">
            <?php echo APP_TITLE; ?> © <?php echo APP_YEAR; ?>
            <a class="lang_link" href="javascript:void(0)" onclick="App.getLanguageBox('<?php echo $LANG['page-language']; ?>'); return false;"><?php echo $LANG['lang-name']; ?></a>
        </div>
</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

The name 'Landbot' cannot be located. Have you meant to type '_landbot' instead?

I'm currently in the process of integrating Landbot into my React.js application with TypeScript. I'm following this [doc] 1. However, I'm facing an issue where the code inside useEffect (new Landbot.Container) is causing an error. 'C ...

htmlcssreactjstypescriptfrontend

Determine whether the Bootstrap data-style attribute is enabled or disabled

I have a bootstrap checkbox that I would like to trigger an alert dialog when it is switched off. <div class="row"> <link href="css/bootstrap-toggle.min.css" rel="stylesheet"> <script src="javascript/bootstrap-toggle.min.js ...

javascriptjqueryhtmlcss

Include a back button during the loading of a URL in an Electron application

Within my Electron application, I have implemented elements that, upon clicking, redirect to a URL. However, navigating back to the previous (local) page is not currently achievable. Is there a feasible method to incorporate a layered back button on top o ...

javascripthtmlcssnode.jselectron

JavaScript - Image style alterations are not operating as expected

Let me break it down for you: onmouseover="imageOn(bg-index);" onmouseout="imageOff(bg-index);" I've got these two attributes set on a table tagged with ID table-title. These functions are included in an external JS file: If the name is 'bg-i ...

javascripthtmlcssimage

Achieving the display of font-weight 100 for Google web fonts successful

I have been experiencing difficulties in achieving the ultra-thin display of the Lato font through Google web fonts. Despite appearing correctly on Google's website, the font weight does not change when implemented on my own page if it is below 400 (I ...

csswebfontsgoogle-webfonts

Monochrome tabletop solid in one hue

I'm trying to eliminate the space between the columns in my table so it looks solid. Here's the CSS style I've been using: <style> tr, th, td {margin:0;padding:0;border:0;outline:0;font-size:90%;background:transparent;} table{ margin: ...

htmlcss

What is the best way to reduce the width of the preformatted tag?

Is there a way to adjust the width of the pre tag in order to avoid affecting the q-card when resizing the browser window? I am trying to create a q-card that can display code similar to what you see in ChatGPT. However, the q-card's size is not respo ...

htmlcssvue.jsquasar-frameworkquasar

Tips for adjusting the position of an icon when encountering a line break using Javascript or CSS

After some trial and error, I managed to get it working, but only when the page is initially loaded and not in a responsive manner. Below is the JavaScript code I used. if ( $(".alert-box").height() >= 90 ) { $('.img').css(&apos ...

javascriptjqueryhtmlcssjquery-plugins

Tips on positioning a button at the bottom of the screen in React Native

I am using the FAB component from the react native paper library. I want to align the button at the bottom, but it is overlapping with a text field. How can I position it below the text field? Please refer to the screenshot below: Here is the code snippet ...

htmlcssreactjsreact-native

Is it possible to activate numerous hover effects on links by hovering over a div?

How can I trigger multiple hover effects simultaneously when hovering over my main div? I'm struggling to figure out how to make the line animate on all three links at the same time. Is it possible to achieve this using only CSS or do I need to use Ja ...

htmlcsshover

Adjusting the size of div content without changing its dimensions

I'm in search of a solution for resizing the contents within a fixed width and height div. Currently, my div looks like this: <div id="editor_preview" style="width:360px !important; color:gray; ...

javascriptjquerycsshtml

Can an image map be utilized within an <a> element?

I am attempting to implement an image map within an <a> tag. It seems to be functioning correctly in Chrome, but I am encountering issues with it not working in Internet Explorer. Is it acceptable to use an image map in an <a> tag? Below is th ...

javascripthtmlcss

"Disabling Click Event on Sidebar Menu in Angular: A Step-by-Step Guide

I am working on an Angular project with a sidebar that I want to modify in order to disable click events on the menu items. My goal is to guide users through a specific flow without allowing them to navigate freely. However, simply disabling the [routerLin ...

javascripthtmlcssangularbootstrap-4

FireFox - Dynamic Blinking Divs on Hover

It seems like in FireFox and IE, my hover effect is blinking for some reason. I can't figure out why this is happening. Should I switch to using JavaScript for my hovers or is there an easier CSS solution? Here's a JSFiddle link to demonstrate th ...

htmlcssinternet-explorerfirefoxhover

Avoid overflow of a flex element within the <body> tag by ensuring its child with overflowing content takes up 100% of its width

I am facing an issue with my dashboard setup that includes a sidebar. I want the content area to have horizontal overflow scroll, but instead of that, it overflows its parent element. I experimented with flex and grid-template-columns values (1fr 5fr) with ...

css

When the button with an image is clicked, it will display a loading element

I have developed an application that heavily utilizes ajax, and I am looking to implement the following functionality: I would like to have a button with both text and an image. When this button is clicked, it should be disabled, and instead of the origina ...

javascriptjqueryasp.net-mvccssajax

Tips for placing a button on top of a Div element with overflow set to hidden?

My goal is to have a button placed over a box, but I am facing difficulty achieving this. I have experimented with z-index, grid-content, and other methods, but the button refuses to show over the box as desired. The placement of the button inside the box ...

htmlcss

What is the best method for resetting the CSS style of a specific DOM subtree?

While working on a Chrome Extension, I encountered a problem where an HTML subtree and CSS style sheet injected into the original page were being affected by the original CSS. Despite my attempts to override the styles, it seemed unfeasible to manually set ...

css

Struggling with Duplicated Images

Currently working on a website using only HTML and CSS. I am still learning the ropes in this area. My goal is to create a layout with a header, body, and footer that repeat to fill up the entire page, similar to envato.com. Here is a snippet of the code I ...

csshtml

Tips for removing the default hover and click effects from a Material-UI CardActionArea

Check out the card sample with a lizard photo on https://material-ui.com/components/cards. When you hover over the cardActionArea, it will get darker or lighter based on the theme. Clicking on the card will make the picture change its brightness relative ...

javascriptcssreactjsmaterial-ui