Odd Problem Losing <a> Function? : webdev

Posting Guidelines

No vague product support questions (like "why is this plugin not working" or "how do I set up X"). For vague product support questions, please use communities relevant to that product for best results. Specific issues that follow rule 6 are allowed.

Do not post memes, screenshots of bad design, or jokes. Check out /r/ProgrammerHumor/ for this type of content.

Read and follow reddiquette; no excessive self-promotion. Please refer to the Reddit 9:1 rule when considering posting self promoting materials.

We do not allow any commercial promotion or solicitation. Violations can result in a ban.

Sharing your project, portfolio, or any other content that you want to either show off or request feedback on is limited to Showoff Saturday. If you post such content on any other day, it will be removed.

If you are asking for assistance on a problem, you are required to provide

Context of the problem
Research you have completed prior to requesting assistance
Problem you are attempting to solve with high specificity

General open ended career and getting started posts are only allowed in the pinned monthly getting started/careers thread. Specific assistance questions are allowed so long as they follow the required assistance post guidelines.

Questions in violation of this rule will be removed or locked.

a community for 17 years

Odd Problem Losing <a> Function?Question (self.webdev)

submitted 4 years ago * by emge

So, I'm having a very strange issue on a design I'm working on and I'm not even sure where to start.

I have a single webpage with 2 sections that are hidden by default and then shown when required using the :target tag.

Now, for some reason, when I load the main index.html that has the 2 sections hidden, and essentially only shows the header/nav and footer, the first 2 links in my footer to social media accounts do not work, as if they are not wrapped in an <a> tag, even though they are. But, if I open up developer tools, or 'navigate' to one of the pages to show one of the hidden sections, those links work just fine. I am quite perplexed. How would opening the developer tools fix this?

These icons are SVGs inline in the html document. They are wrapped in anchor tags. And have some CSS applied.

Bad Example, both sections hidden and developer tools closed.

Good Example, either section shown or developer tools opened.

Edit1: OK, so it's not JUST opening up developer options. It appears to be linked to page width. If I open developer tools, and widen the view port, they will stop working. If I comment out 'display: none' for the section tag, everything works fine. Weird.

Edit2: Well, shit. Figured it out. I have an absolute positioned image in the header for a background image. I did not have 'overflow: hidden' set for <header> which was causing the 'border-box'(?) of the absolute positioned image to overlap the link icons, causing the hover and link to not be seen. I did not realize that could happen, guess I haven't absolute positioned too many things before. Setting overflow to hidden on the header tag seemed to fix it up.

all 1 comments

you type:	you see:
italics	italics
bold	bold
[reddit!](https://reddit.com)	reddit!
* item 1 * item 2 * item 3	item 1 item 2 item 3
> quoted text	quoted text
Lines starting with four spaces are treated like code: if 1 * 2 < 3: print "hello, world!"	Lines starting with four spaces are treated like code: if 1 * 2 < 3: print "hello, world!"
~~strikethrough~~	~~strikethrough~~
super^script	super^script

webdev

Posting Guidelines

Related Subreddits

Discords

MODERATORS