How do I stop my links from being clicked beneath it?

pointer-events click only
when i click on a link it opens a different website
wrong page opens when i click a link
pointer-events: none
prevent click through div
css disable click
sendgrid turn off click tracking
how do i stop google chrome from opening new tabs for every link i click on

For some reason instead of only being able to click the links by clicking on the text, you can also click below it on empty space.

My friend said I had to reduce div size but I'm not quite sure on what he meant.

#video {
  position: fixed;
  right: 0;
  bottom: 0;
  min-height: 100%;
  min-width: 100%;
}

#devil,
#steam,
#youtube {
  display: block;
  margin-left: auto;
  margin-right: auto;
  height: 230px;
  width: 230px;
  position: relative;
}

#steam,
#youtube {
  text-decoration: none;
  font-family: cursive;
  font-style: oblique;
}

#devil {
  border-radius: 120px;
  top: 250px;
  right: 20px;
}

#steam {
  top: 280px;
  left: 10px;
}

#youtube {
  top: 50px;
  left: 115px;
}

a:link,
a:visited {
  color: forestgreen;
}
<div>
  <img id="devil" src="img/frizzy.jpg">
</div>

<div>
  <a id="steam" href="https://steamcommunity.com/id/impenetrable" target="_blank">steam</a>
  <a id="youtube" href="https://www.youtube.com/c/ItsFrizzy" target="_blank">youtube</a>
</div>

Your problem is probably in here:

#devil,
#steam,
#youtube {
  display: block;
  margin-left: auto;
  margin-right: auto;
  height: 230px;
  width: 230px;
  position: relative;
}

You shouldn't need to set the height or width for your links, since they will be automatically set based on the text. You can use something like firefox tools to look at the bounding block of your links and see what's giving them the big space to click. You can even mess with the parameters here to suit your liking.

How to enable or disable an anchor tag with JavaScript/jQuery , How do you prevent a click on a # link from jumping to the top of the page? Hey guys I am trying to disable a link from being clicked. I tried using a CSS solution: .link-disabled { pointer-events: none; cursor: default; } It doesn't work in IE10 and below. Is th

In your css, you specify height: 230px; for your element that holds the link. Decrease this size to remove the blank space that also responds to your mouse.

As suggested, use a border or background color to help indicate where your elements are, or use the development console (F12 in Chrome) to find your element sizes.

How to prevent a click on a '#' link from jumping to top of page , to the element with that ID. Simplest solution is to use #/ even if you are using jQuery. My system at home used to be like that until I had some FF corruption and had to blow it out and reinstall it. Now, regardless of which browser I set as default, the instant I click a link in an email Windows brings that browser to the front displaying the web page I clicked the link for. Google-fu has failed me horribly.

Instead of setting height to links you should set font-size for them and if this didn’t help set line-height same as font-size value.

Frequently asked questions about hyperlinks in Word, in a document, press CTRL+A to select the entire document and then press CTRL+SHIFT+F9. You need to do more than just make a link look disabled if you really want to disable it. Surefire way: remove the href. If you have decided that you are going to ignore my warning and proceed with disabling a link, then removing the href attribute is the best way I know how. Straight from the official Hyperlink spec:

You are getting a height on your anchors because you are applying a height to them (you should remove this). Also, I wouldn't use absolute or relative positioning for this as you do not need it. I would envelope your image and your social links in their own containers and position them. Here is an example of what I am talking about.

.container {
	margin-top: 20px;
}

#video {
  position: fixed;
  right: 0;
  bottom: 0;
  min-height: 100%;
  min-width: 100%;
}

.social_container {
	margin: 0px auto;
	padding: 10px;
	width: 200px;
}

#steam,
#youtube {
	margin: 0px auto;
	width: 80px;
	display: inline-block;
  text-decoration: none;
  font-family: cursive;
  font-style: oblique;
	text-align: center;
}

#devil {
  border-radius: 120px;
	display: block;
  margin-left: auto;
  margin-right: auto;
  height: 230px;
  width: 230px;
  position: relative;
}

a:link,
a:visited {
  color: forestgreen;
}
<div class="container">
  <img id="devil" src="img/frizzy.jpg">
</div>

<div class="social_container">
  <a id="steam" href="https://steamcommunity.com/id/impenetrable" target="_blank">steam</a>
  <a id="youtube" href="https://www.youtube.com/c/ItsFrizzy" target="_blank">youtube</a>
</div>

Whenever I click on any link or sometimes just a random click opens , When I click on a link it opens a different website? Question: Q: If I accidentally click on a bad link on the Safari app on iPhone, what information can they get from my phone? Hi everyone, okay, I know everyone says that iPhones can't get viruses, but I did click on bad links in the Safari app, and I was wondering what information could they get?

Wrong page opens when I click a link.., tabs or windows with ads in them. Another possibility is that you might have malware - Check your task manager and programs list for any unwanted programs. Run a virus scan and reset your browser settings. How do I prevent links from opening in Edge in windows 10 Despite my default browser being other than Edge, all links open in this terrible bit of software. This means that instead of having a friendly browser that knows my passwords and usernames to all sites, I have to remember them and type them in every time.

MySpace For Dummies, At the moment I am at a loss as to what is causing this, but I will stop using Chrome if I can't solve it. You can also attach a click event handler to your links which tell them to stop event bubbling after their own handler executes: $("#clickable a").click(function(e) { // Do something e.stopPropagation(); });

pointer-events, If you want to keep your birthday a secret, be sure to uncheck that box. • Preferred Site You can click the links below the box to read either. If you're like us,  Another thing that comes to mind is whether you’re single-clicking or double-clicking the link. When you see a link on a web page, you click it once to go to that page. If you mistakenly double-click the link, it’s possible that the first click opens a browser window and then the second click causes your current window to come to the

Comments
  • It's clickable that far below because you have the height set to 230px...
  • Put a border on your link and you'll see how big it is.
  • to add to @HunterTurner's comment also you set display: block to the anchor tag