Why can I click on a link outside of its text element?-CodePudding

I'm building a forum and I have a link that can be clicked outside of its text, how can I undo it? I also have an image inside a tag that can be clicked outside of its image, I want to undo that too. I have tried - position: relative; but it didn't work.

Here is the HTML code of the image.

<div >
       <a href="Home.php">
          <img  src="photos/icon.png">
       </a>
</div>

CSS of the image

.homeIcon{
    width: 200px;
    display:block;
    margin:auto;
    margin: 0 auto;
}

CSS of the <a> link

.signinForm a{
margin: auto;
display:block;
text-align:center;
margin-top: 7px;
color: #006db6;
font-size: 20px;
}

HTML of the <a> link

<form method="POST" >
<ul>
    <li> <h1 >sign in</h1></li>
    <li> <input type="text" placeholder="User name"name="username_login" value="<?php if(isset($_POST['username_login'])){echo $_POST['username_login'];}?>" required></li>
    <li> <input type="password" placeholder="Password" name="password_login"  value="<?php  if(isset($_POST['password_login'])){echo $_POST['password_login'];}?>" required></li>
    <li> <input type="submit" value="Log in"></li>
    <li><a href="signUp.php">Sign up</a></li>
</ul>

</form>

Thanks all.

CodePudding user response：

It might have to do with your CSS styles for <a> tags and/or <img> tags.

My guess is that something like the following might fix your issue

.homeIcon {
  display: inline-block;
}

CodePudding user response：

Try with something like:

img.homeIcon {
  display: inline-block;
}

div.home_A {
align-content:center;
margin: 0 auto;
text-align: center; // Not mandatory but useful
}

CodePudding user response：

Assign display: inline-block of course, also use object-fit:contain on <img> and set the line-height: of <a> to 1 to 1.25 depending on how your font is setup but there's very little play in the value.

:root {
  font: 1ch/1 'Segoe UI'
}

body {
  font-size: 2ch;
}

a {
  font-size: 2.5rem;
  line-height: 1.15;
}

a,
img {
  display: inline-block;
}

img {
  object-fit: contain;
  width: 3rem;
  height: 3rem;
  margin-bottom: -3px;
}

<div class='frame'>
  <a  href="https://stackoverflow.com/users/2813224/zer00ne">
..::Zer00ne::..
  <img src='https://i.ibb.co/Kx33pSY/01.jpg'></a>
</div>

CodePudding user response：

<!--HTML_CODE-->
<div >
   <a href="Home.php">
      <img  src="photos/icon.png">
   </a>
</div>


<form method="POST" >
<ul>
<li> <h1 >sign in</h1></li>
<li> <input type="text" placeholder="User 
name"name="username_login" value="<?php 
if(isset($_POST['username_login'])){echo $_POST['username_login'];}?>" required> 
</li>
<li> <input type="password" placeholder="Password" name="password_login" 
 value="<?php  if(isset($_POST['password_login'])){echo 
$_POST['password_login'];}?>" required></li>
<li> <input type="submit" value="Log in"></li>
<div >
<li><a href="signUp.php">Sign up</a></li></div>
</ul>

</form>


/*CSS_CODE*/
.homeIcon{
width: 200px;
display:block;
margin:auto;
margin: 0 auto;
}
.signUp-block{
display: flex;
flex-direction: row;
justify-content: center;
}
.signinForm a{

margin: auto;
display:inline-block;

text-align:center;
margin-top: 7px;
color: #006db6;
font-size: 20px;
}
.homeIcon {
display: inline-block;
}

CodePudding user response：

Kindly provide a picture or code snippet, so we can assist with a more direct answer to your question