Nick Solonko Nick Solonko - 4 months ago 10
HTML Question

Why am I able to click a link far away from it?

On a page I have been working on, a back button can be clicked when the mouse isn't in it. I am aware that it's something with positioning or margin, but I cannot find the source of the issue. I made a JSbin with the issue. Put your cursor to the right of the back button and you will see the cursor change. What I posted on JSbin is not my actual code because I am using PHP. I will post the actual code here:

<?php
/*session_start();
if(!isset($_SESSION["joke"])){
header("Location: insidejoke.php");
}*/
?>

<!Doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" integrity="sha384-y3tfxAZXuh4HwSYylfB+J125MxIs6mR5FOHamPBG064zB+AFeWH94NdvaCBm8qnd" crossorigin="anonymous">
<title>Lorem Ipsum Translator</title>
</head>
<body>
<style>
body{
background-color: #FBF6D9;
margin:0;
padding: 0;
}
#inputField{
margin-top: 150px;
padding: 5px;
box-sizing: border-box;
width: 90%;
height: 300px;
border: red 1px solid;
resize: none;
font-size: 20px;
color: #33cc33;
text-shadow: 1px 1px gray;
}

#inputField:focus{
border:0;
outline-color: red;
background-color: #F0FFFF;
box-shadow: 0 0 20px gray;
}.but{
background-color: #ccccff;
border-radius: 10px;
box-shadow: 5px 5px 5px gray;
font-size: 20px;
color: #4d4d4d;
width: 100px;
height: 50px;
cursor: pointer;
margin: 10px;
margin-left: 0px;
position: relative;
}
::-webkit-input-placeholder {
font-weight: bold;
color: #33cc33;
font-size: 15px;
text-shadow: none;
}
::-moz-placeholder {
font-weight: bold;
color: #33cc33;
font-size: 15px;
text-shadow: none;
}
#containertranslation{
margin-top: 150px;
width: 90%;
height: 300px;
background-color:white;
border: 1px red solid;
}
#translation{
color: #33cc33;
font-size: 30px;
padding: 5px;
}
#back:hover{
color: black;
}
#goback{
position: absolute;
left: 25px;
top: 10px;
}
#submit:hover{
color: black;
}
a{
text-decoration: none!important;
}
#back{
margin-top: 15px;
}
.container{
width: 95%!important;
}
@media (max-width: 576px){
#inputField, #containertranslation{
margin-top: 10px;
height: 250px;
}
}
</style>
<?php
if(isset($_SESSION["fromsite"])){
echo "<a href='projects.html'><div id='back'><p id='goback'>Back!</p></div></a>";
}
?>
<div class="container">
<div class="row">
<div class="col-sm-6">
<form id="translateform" action="process.php" method="post"><?php
echo "<textarea maxlength='3000' id='inputField' placeholder='Enter your Lorem Ipsum text here:' name='translate'>";
if(isset($_SESSION['text'])){
echo $_SESSION['text'];
}
echo "</textarea>";
echo '<input type="submit" name="submit" class="but"id="submit" value="Submit!">'

?>
</form>
</div>
<div class="col-sm-6">
<?php
echo "<div id='containertranslation'><p id='translation'>";
if(isset($_SESSION['translation'])){echo $_SESSION['translation'];}//if translated
else{echo "Translation: ";}//if not, empty field
echo "</p></div>";//adds div with translation
echo "<a href='projects.html'><div id='back'class='but'><p id='goback'>Back!</p></div></a>";


?>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js" integrity="sha384-vZ2WRJMwsjRMW/8U7i6PWi6AlO1L79snBrmgiDpgIWJ82z8eA5lenwvxbMV1PAh7" crossorigin="anonymous"></script>
</body>
</html>


How can I fix this?

Answer

Try this css rule:

.but { display:inline-block }