Tips for modifying link height using CSS

I'm currently facing an issue with adjusting the height of "footer a" links that are using Fontface vector icons in the footer. I have added a red border around them to visually identify the problem. Ideally, when navigating through the links, the border should strictly wrap around the icons only.

Although I enclosed "footer a" within its own div ("#footer-links"), it seems that "footer a" is ignoring this container, causing the height to extend beyond both #footer-links and the footer itself.

I've attempted to modify various attributes of "footer a" without success. Any recommendations on how to resolve this?

Below you can find the HTML and CSS code snippets:

/* Custom CSS for all pages */

html {
  font-size: 16px;
  margin-left: 1rem;
  margin-right: 1rem;
  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}

html,
body {
  height: 100%;
}

h2 {
  font-size: 34px;
}

h3 {
  font-size: 26px;
}


/*HEADER/NAVBAR*/

img {
  height: 45px;
  width: 300px;
}

header {
  padding-top: 0.5rem;
  display: inline-flexbox;
  border-bottom: black solid 2px;
}

h1 {
  margin: 0;
  display: inline;
  float: left;
}

nav ul {
  list-style: none;
...
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.3/css/all.css" integrity="sha384-SZXxX4whJ79/gErwcOYf+zWLeJdY/qpuqC4cAa9rOGUstPomtqpuNWT9wdPEn2fk" crossorigin="anonymous">

<header>
  <h1><img src="logo.png" alt="logo"></h1>
  <nav>
    <ul>
      <li><a class="border" href="index.html">Home</a></li>
      <li id="games-li"><a class="border" href="#">Games</a>
        <ul id="games-ul">
          <li><a href="games/anagram-hunt.html">Anagram Hunt </a></li>
          <li><a href="games/math-facts.html">Math Facts Practice</a></li>
        </ul>
      </li>
      <li><a class="border" href="about.html">About</a></li...

...;

Answer №1

observe the modifications in CSS for the following elements:

footer

#footer-wrap

#footer-links

footer a

.fab, .fas

/* CSS for all pages */

html {
  font-size: 16px;
  margin-left: 1rem;
  margin-right: 1rem;
  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}

html,
body {
  height: 100%;
}

h2 {
  font-size: 34px;
}

h3 {
  font-size: 26px;
}


/*HEADER/NAVBAR*/

img {
  height: 45px;
  width: 300px;
}

header {
  padding-top: 0.5rem;
  display: inline-flexbox;
  border-bottom: black solid 2px;
}

h1 {
  margin: 0;
  display: inline;
  float: left;
}

nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  float: right;
  display: inline;
  margin-top: 0.3rem;
}

nav li {
  font-size: 16px;
  float: left;
}

nav li:hover {
  font-weight: bold;
}

nav::after {
  content: "";
  display: block;
  clear: both;
}

nav a {
  display: block;
  padding: 0.7rem;
  text-decoration: none;
  color: black;
  margin-bottom: 0.5rem;
  margin-top: 0.5rem;
  padding-top: 0.1rem;
  height: 10px;
}

.border {
  border-right: 1px solid black;
}

#games-ul {
  background: white;
  font-weight: lighter;
  display: none;
  position: absolute;
  top: 47px;
}

#games-li li {
  float: none;
  font-size: 0.9rem;
  height: 30px;
}

#games-li:hover>ul {
  display: block;
}


/*FOOTER*/

footer {
  width: 100%;
  position: fixed;
}

#footer-wrap {
  
  width: 65%;
  margin-left: auto;
  margin-right: auto;
  display: flex;
}

#footer-copy {
  border-top: 2px solid black;
  width: 65%;
  font-size: 12px;
  padding-top: 0.5rem;
  margin-left: auto;
  margin-right: auto;
  display: inline;
  position: absolute;
}

#footer-links {
  display: flex;
  flex-flow: row;
  float: right;
  margin-top: 5px;
  margin-bottom: 5px;
}

footer a {
  display: flex;
  flex-flow: row;
  color: inherit;
  font-size: 36px;
  border: 1px solid red;
  margin-left: 3px;
  margin-right: 3px;
  padding: 0;
  text-decoration: none;
}

.fas, .fab{
padding: 0px !important;
margin: 0px;
height: auto;
}

...
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.3/css/all.css" integrity="sha384-SZXxX4whJ79/gErwcOYf+zWLeJdY/qpuqC4cAa9rOGUstPomtqpuNWT9wdPEn2fk" crossorigin="anonymous">

<header>
  <h1><img src="logo.png" alt="logo"></h1>
  <nav>
    <ul>
      <li><a class="border" href="index.html">Home</a></li>
      <li id="games-li"><a class="border" href="#">Games</a>
        <ul id="games-ul">
          <li><a href="games/anagram-hunt.html">Anagram Hunt </a></li>
          <li><a href="games/math-facts.html">Math Facts Practice</a></li>
        </ul>
      </li>
      <li><a class="border" href="about.html">About</a></li>
      <li><a href="login.html">Login </a></li>
    </ul>
  </nav>
</header>
...

<footer>
  <div id="footer-wrap">
    <div id="footer-copy">

      &#169 2021 Play2Learn
    </div>
    <div id="footer-links">


      <a href="contact-us.html" title="Contact Us"><i class="fas fa-envelope-square"></i></a>
      <a href="https://instagram.com" title="Instagram"><i class="fab fa-instagram-square"></i></a>
      <a href="https://twitter.com" title="Twitter"><i class="fab fa-twitter-square"></i></a>
      <a href="https://facebook.com" title="Facebook"><i class="fab fa-facebook-square"></i></a>

    </div>
  </div>
</footer>

EXP: Footer: removed fixed height. so that the footer wrap area get the height of its contents.

#footer-wrap: display changed to flex from inline. so that the child elements height can be manipulated.

footer a display changed to inline-block to flex and flex-flow : row makes the contents to align to its parent (which is also a flex),

text-decoration: none ==>> font awesome is a font and a by default has underline, so made it none.

.fab .fas ==>> removed padding/margin if font awesome has default padding.

further reference: here

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

What could be causing the lack of population in ngRepeat?

In my angular application, I encountered an issue with ngRepeat not populating, even though the connected collection contains the correct data. The process involves sending an http get request to a node server to retrieve data, iterating over the server&a ...

Unforeseen outcomes discovered by stacking one div over another, all without relying on z-index

My current project involves two stacked divs, each measuring 100px by 100px. The bottom div includes a black border on top, as shown in this example. <div id="top"></div> <div id="bottom"></div>​ div { width: 100px; height ...

Notifications for AngularJS tabs

I need help finding a method to incorporate "tab notification" using AngularJS, in order to show that there are important alerts that require attention. For example: (1) (3) TAB_ONE TAB_TWO TAB_THREE Could you provide any recom ...

JavaScript multiplying an array in HTML

Snippet of HTML code <input name="productCode[]" value="" class="tInput" id="productCode" tabindex="1"/> </td> <input name="productDesc[]" value="" class="tInput" id="productDesc" readonly="readonly" /></td> <input name="pr ...

Mapping the preselected values of multiple input fields into an array in Angular 6: A step-by-step guide

When submitting a form with input fields, I need to capture the selected values into an array format like {"userid":1,"newstatus":[1],"mygroup":[1,2,3]}. I attempted using ngmodel but encountered issues. Below is the code snippet: home.component.html & ...

Centering text within a dynamic div can help create a visually appealing design

While browsing through various forums, I noticed several questions on stackoverflow that touch upon a similar issue to mine. However, my particular problem is a bit unique, and despite my best efforts, I have not been able to find a solution yet. It's ...

Videos embedded using the React HTML video tag are not automatically playing on mobile devices

I have implemented a jsx variable to insert a video into my html. Despite following the advice to include muted defaultMuted, and playsinline (which I have already done), the videos autoplay on safari, chrome, and firefox on my computer but not on mobile ...

Guide to redirecting on click when utilizing an iframe

I needed to prevent the page from reloading before the action was complete by using an iframe. However, I encountered an issue where I needed the page to refresh after the action took place. I attempted two methods to achieve this - refreshing the page and ...

What is the best approach to transfer information from the client side to a node

I have an ejs page that looks like this: <%- include('../blocks/header', {bot, user, path}) %> <div class="row" style="min-width: 400px;"> <div class="col" style="min-width: 400px;"> <div class="card text-white mb-3" & ...

Guide to displaying the output of a JS calculation in a Bootstrap modal dialog box

I have a HTML and JavaScript code that determines the ideal surfboard for the user based on their input data (style, experience, height, weight) and displays the recommended surfboard type. Here is the initial code snippet I attempted to use: function c ...

Issue with flash installation

I'm currently working on a WordPress website at www.studium.cl. However, I've encountered an issue when trying to open it in Internet Explorer. Each time I try to access the site, a window pops up prompting me to install Adobe Flash Player. Even ...

both modules loading at the same time in AngularJS

var moduleA=angular.module("MyModuleX",[]); moduleA.controller("MyControllerX",function($scope){ $scope.name = "John X"; }); var moduleB=angular.module("MyModuleY",[]); moduleB.controller("MyControllerY", function($scope) { $scope.name = "Sarah Y" ...

Changing the class of an element using CSS when hovering over another

Is it possible to dynamically change the style of another element when hovering over a specific element? For example, I want a menu item to change its appearance when hovering over a submenu item. Here is the CSS code I have: ul.menu .menulink { padding ...

Dynamically updating the scroll area in Ionic using real-time data

Hello, I am currently working on an Ionic project and have created a code pen for it. At the moment, the code pen just displays an image with two buttons for zooming in and out. However, I have encountered an issue. When I click on zoom in and scroll to ...

Show angular variable data in a table based on their index

I have an array of angular variables with values like [ 170, 1, 130, 3, 134, 4.... and so on]. I would like to present these values in a table format where the even positioned values are shown in one column and the odd positioned values in another column. ...

Customize Angular Material styles uniquely across various components

Within my application, I am utilizing two components that contain tab groups. The first component serves as the main page, where I have adjusted the CSS to enlarge the labels by using ViewEncapsulation.None. The second component is a dialog, and I aim to m ...

Troubleshooting problems with opening and closing windows in JavaScript

I'm currently facing an issue with managing browser windows using JavaScript. In my proof of concept application, I have two pages - one for login information (username, password, login button, etc.) and the second page is a management screen. What I ...

Restricting a checkbox to a maximum of 5 checkmarks

In a multi-column table, each column is represented by a checkmark. I want to limit the ability to tick a checkmark to only 5 checkmarks. Here is the code that has been implemented: <tbody> <ng-container *ngFor="let col of testData" ...

Retrieve information following an Ajax call inside a pre-designed template

Upon rendering a page with data put together by EJS, the goal is to refresh a section (thirdRow) of the page whenever the user submits new data. The refreshed section should display both the newly submitted data and the existing data. Although I have obtai ...

Updating information in mysql from html/php can sometimes be a complex process

The issue I am facing involves a "contact" form that is supposed to send data to my database. Everything seems to be working fine with no errors when I access the page from localhost, and it displays the desired result. However, the database (localhost/php ...