Disappearing text with HTML Bookmark and CSS Overflow:Hidden - What's happening?

Within the header of my webpage, there is an image div that has been styled with overflow:hidden.

Inside the content section, I have a bookmark anchor tag:

<a name="arghargh"></a>

Located at the top of the content area, there is a link that directs to the bookmark:

<a href="#arghargh">go to the bookmark</a>

Upon clicking the link, the content vanishes, leaving only the elements outside of the content division.

After coming across this article which details the same issue, I decided to remove the overflow:hidden style. This solved the problem, but unfortunately, I actually need the overflow:hidden for proper page layout.

Please help!

Update

It seems that with overflow:hidden enabled, the bookmark is causing the div to scroll internally, shifting all content up until the point where the bookmark sits at the top of the visible screen. This is not ideal.

htmlcssbookmarks

Answer №1

To maintain proper page formatting, it is advised to eliminate the use of overflow:hidden and insert 

<div style="clear:both"></div>
as the final inner element.

Answer №2

Instead of using an anchor tag, have you tried utilizing the id="arghargh" attribute directly on the div element?

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

Centered image

I am working on a website and struggling to center the image on all screen sizes. I attempted the following code:- <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script type="text/javascript" lang ...

htmlcss

Having trouble locating the existing placeholder in my WordPress theme that I'm trying to change

I am currently using the KuteShop WordPress Woo-commerce template and I want to customize the Placeholder Text "I'm searching for..." and "All Cate." shown in the image below: Despite my efforts, I have been unable to locate where I can make these ch ...

phphtmlwordpress

Constructing an HTML table with PHP echoes

I am currently developing a PHP script for tracking user attendance. The structure I am aiming for is as follows: Alternatively, you can view my jsFiddle <form action='this_page.php' method='post'> <table> <th>Me ...

phphtml

Retrieving the size of every image with ajax while also storing extra image information

In my current project, the objective is to iterate through all images on a webpage and collect various details such as image name, original dimensions, actual size, ratio, display property, and FILESIZE. However, I have encountered a hurdle in my progress ...

javascriptjqueryhtmlajax

What are the steps to installing and utilizing the Chart.js package on your local machine?

I thought installing chart.js on my Raspberry Pi would be a simple task, but I seem to be struggling with it. Due to the nature of my project, I need to have it installed locally rather than relying on an online version. Following the usual steps, I navig ...

javascripthtmlbashnpmchart.js

Python form submission error code 405 encountered

I recently developed a simple WSGI Server using Google app engine. Here's an example of the code: import webapp2 class MainHandler(webapp2.RequestHandler): def get(self): self.response.write(''' ...

pythonhtmlgoogle-app-engine

Refreshing the Canvas post-submission

I have created a form that allows users to add notes and sign on a Canvas. However, I am facing an issue with clearing the canvas after submission, as it does not seem to work properly. The rest of the form functions correctly. The goal is to clear both t ...

javascripthtml

Verifying the current password and updating the hashed password

I have been struggling with creating a PHP script for updating user hashed passwords. Unfortunately, the script is not functioning as expected and no error messages are being displayed. Every time, it only shows "Your old password is incorrect" message. I ...

phphtmlmysqli

Generating a multiplication grid using PHP

I'm currently facing a challenge regarding the presence of an additional "0" box on my multiplication table. Below is the code that I have been working with: $cols = 10; $rows = 10; $number = 0; $number2 = 0; echo "<table border=\"1\"> ...

phphtml

While browsing in Firefox and moving the cursor over a sub element

While hovering over a child element in Firefox using the rule .parent:hover > .child { /*style*/ }, the child element is considered separate from the parent element and does not receive styling. For example, in Firefox when you hover over the button, on ...

htmlcssgoogle-chromefirefox

Step-by-step guide on redirecting a page from a Django form

I'm in the process of developing a dictionary application that allows users to input a word through a form. The issue I'm facing is that when a user enters a word and hits submit, the form disappears leaving only the submit button and the search ...

pythonhtmldjangoformsview

Here are the steps to effectively incorporate CSS classes in a form using Laravel Collective 5.2 framework

Hi there, I am currently working on developing an application and find myself in need of implementing CSS classes to a form using Collective Laravel "5.2.*". The snippet of code that I have at the moment is as follows: {!! Form::model($user, array(&apos ...

htmlcsslaravel

Is it possible to target the last child element in CSS without relying on nesting

Is there a way to select the very last child of an element and apply a specific class without using nesting? For instance, how can I target only the final div in the structure below, nothing more and nothing less. <body> <div class="very-last- ...

csssass

IE10 has a problem with the height being set to 100%, but it seems to work fine in Quirks mode in IE and all

Check out this page for reference: I've noticed an issue with scrolling in Internet Explorer, while other browsers seem to be fine. Can you help me understand why IE is causing the scroll and how I can fix it? Thank you, Judson Here's the cod ...

javascripthtmlcss

"Want to know the best way to retrieve the most recent form input value using jQuery or Javascript

I've been reading a lot about using jQuery to set and get field values, but I'm encountering an issue where I can't retrieve the value after submitting, editing it in an input field, and then submitting again. It works the first time, but no ...

javascriptjqueryhtmlformsmeteor

Prevent the page from scrolling while the lightbox is open

I am struggling with a lightbox that contains a form. Everything is functioning properly, but I need to find a way to prevent the HTML page from scrolling when the lightbox is active. <a href = "javascript:void(0)" onclick=" document.getElementById(& ...

javascripthtmlcss

Alignment issues in buttons within Bootstrap

I'm facing an issue with the code snippet below <div className="row"> <div className="col-md-3"> <DateTimePickerComponent id="dateFrom" ...

csstwitter-bootstrapbootstrap-5

Enable AJAX to dynamically load pages without caching

I am currently using an ajax function to refresh a specific division on a webpage with HTML content. <script> $('#scene_container').load('scene.html', function () { cache: false }); </script> ...

javascriptjqueryhtmlajax

Display text on the screen with a customized design using JavaScript's CSS styles

I need help with printing a specific page that contains some information designed in print.css. I want to print this page, including an image, with the same style. function printContent() { var divContents = document.getElementById("terms").innerH ...

javascripthtmlcss

What is the best way to remove headers and footers programmatically in print pages on Safari using JavaScript?

Struggling with eliminating the header and footer on print pages in Safari using JavaScript? While disabling the header and footer manually can be done through print settings in most browsers, my aim is to automate this process with code to ensure that use ...

javascriptcsssafari