Intercepts clicks outside of element borders when heading has a line-height lower than 1

Right after an anchor tag, I have an H1 element. The line-height of the H1 element is set to '0.9' for design purposes.

As a result, the computed height of the H1 becomes shorter, but the actual Text element inside overflows and covers part of the anchor tag. This makes it difficult to click on the link. (Tested in Chrome and Safari, where the bottom two thirds of the link are un-clickable)

To demonstrate the boundaries, I added borders to both elements and selected part of the title in my browser to show how the overflowing text hides the link:

https://i.sstatic.net/7nbeZ.png

The issue can be resolved by applying overflow: hidden to the H1, but I am curious if there are cleaner solutions available.

a {
  border: 1px solid blue;
}

h1 {
  color: magenta;
  font-size: 120px;
  margin-top: 0px;
  line-height: 0.9;
  border: 1px solid magenta;
}
<a href="www.google.com">Link Covered By </a>
<h1>Title</h1>

You can observe the problem here: CodePen

htmlcss

Answer №1

I'm not too sure what you mean by "neater", but an alternative method rather than hiding the overflow (which can lead to cutting off diacritics) is adjusting the z-index of the h1. This will cause it to be positioned behind the a element rather than in front of it.

a {
  border: 1px solid blue;
}

h1 {
  color: magenta;
  font-size: 120px;
  margin-top: 0px;
  line-height: 0.9;
  border: 1px solid magenta;
  position:relative; z-index:-1; /* adjustment made here */
}
<a href="www.google.com">Link Covered By </a>
<h1>Title</h1>

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

HTML forms default values preset

I need help with pre-setting the values of a dropdown menu and text box in an HTML form for my iPhone app. When the user taps a button, it opens a webview and I want to preset the dropdown menu and text field. Can someone guide me on how to achieve this? ...

javascripthtmliphone

Passing the final element of a POST array to a different page

I am having trouble retrieving the correct array values from the form. In my code, I am invoking the form option value 3 times, which is defined in the database. Here is an example of what is currently in the database: https://i.sstatic.net/G4JQx.png Wh ...

phphtmlformsselect

Creating a nested structure using JQuery with dynamically generated divs and select tags

My current task involves creating forms and generating corresponding div elements, but my main concern lies elsewhere. What I am seeking guidance on is how to establish a hierarchy among these dynamically generated div elements using the <select> ta ...

jqueryhtml

What is the easiest way to locate the ID of an iframe embedded within a webpage?

Currently, I am focused on developing small JavaScript/HTML5 ads for a webpage. Each advertisement comes with its own iframe that occupies a specific size and space on the page. In order to accommodate an expandable ad that needs to surpass the predetermin ...

javascriptjqueryhtmliframe

Using jQuery and regular expressions to properly escape HTML characters and reverse the process

I've encountered an issue with my HTML code that requires escaping and then converting back. Here's the code I have so far: var entityMap = { "&": "&amp;", "<": "&lt;", ...

jqueryhtmlregex

The anchor tag causes the tooltip to display outside of the td element

One of my requirements is to display the click percentage for each link in an HTML template that is dynamically fetched from a database. I attempted to show the click percentage for each anchor link by adding them to the `data-title` attribute using jQuery ...

javascriptjqueryhtmlcss

Tips for converting inline CSS to stand-alone attributes without any cost

I am attempting to modify an au generated HTML code, for example: <div class="intro editable" id="field_text">text <strong>text</strong> text <span style="text-decoration: underline;">text</span> <span style="color: #ff00 ...

phphtmlcssregex

A bar graph fails to display on d3 visualization

I am struggling with rendering my bar graph using activity tracking data. Even though I believe my data structure is correct, the rects are not being displayed on the graph. Unfortunately, I cannot identify the mistake I might have made. The dataset is ava ...

htmljsond3.jsgraph

What is the best way to include a text input as the last option in a Select input form field?

I would like to implement a select input feature where users can choose from predefined options, with the added functionality of including a text input field as the last option for users who prefer to enter their own category. How can I achieve this? Curr ...

javascripthtmlcssnode.jsexpress

Using a PHP for loop to manage a div control

Query: I am seeking a way to exert influence over the positioning of my dynamic divs. I want each div to be relative to the parent div. Challenge: The current code does not provide the flexibility to adjust the div positions based on the parent div. For i ...

phphtmlcss

Change the position of a Div by clicking on a different Div using JQuery for custom movements

I have successfully managed to slide the div left/right based on the answers below, but I am encountering some issues with the top div. Here are the specific changes I am looking to make: 1. Make both brown lines thinner without affecting the animations. ...

javascriptjqueryhtmlcss

Solving the mystery of background color in CSS for heading/title div

I am facing an issue with the title div setup where the red background is not applied when only the leftmost div has content. Despite the 'title' div having content, the background remains white. Can anyone suggest why this might be happening? H ...

css

Trigger sound when it is fully loaded using HTML5 and JavaScript

Looking for a way to make your HTML5 audio file automatically play as soon as it loads on the page? I've got you covered. Thanks in advance! ...

javascripthtmlaudio

Is the navigation bar offset causing an issue?

After struggling with my navigation menu in Google Chrome, I finally found a solution. However, the nav bar is now offset on one page but not on another. For the aligned main site view, visit , and for the left-offset forum view, visit . This is the HTML ...

htmlcss

Changing HTML elements dynamically within an ng-repeat using AngularJS directives

I have devised an angular directive where I execute an ng-repeat. The fundamental purpose of this directive is to interchange itself with a distinct directive that depends on a value forwarded into the original directive: <content-type-directive type=" ...

javascripthtmlangularjsangularjs-directive

Navigate to a specific hidden div that is initially invisible

Currently, I am working on a web chat application using next.js. The app includes an emoji picker button, which, when clicked, displays a menu of emojis. However, the issue I am facing is that the user has to scroll down in order to see the emoji menu. I a ...

javascriptcssreactjsscrollnext.js

How to Maintain Spacing Between Two Elements While Ensuring the Right Element Stays to the Right Even if the First One is Hidden in CSS

Presently, I have two icons being displayed with a space between them using the flex-box property justify-content and value space-between. The issue arises when only one icon is displayed, as I need the V-icon to always remain on the left and the urgent-ic ...

htmlcssangularflexbox

Ways to activate a button action with jQuery even when it is disabled and clicked

Thank you for the responses. To clarify my goal, I want the form button to submit all select field responses for processing through php on the next page. If a user clicks the submit button before selecting an option in each field, it should display "whoa d ...

javascriptjqueryhtmlajaxvalidation

Utilizing CSS Masks in Bootstrap 4

Is it possible to create a "Mask" effect in CSS without using Bootstrap 4 or 5? Adding a background color and z-index to an image doesn't seem to achieve the desired effect. Learn more about creating masks in CSS here. ...

htmlcssbootstrap-4

Choose the element that is trapped within the div

I've hit a roadblock with this issue that I just can't seem to figure out. I was working on a practice project creating a Netflix-like webpage, and the select element in the footer containing languages is stuck and won't budge. Here's m ...

htmlcss