Despite my efforts to adjust line-height, browser compatibility, padding, and vertical-align, the placeholder text remains stuck in the center of the input box. Any recommendations for fixing this issue?
I ran some tests on jsfiddle to rule out any issues with my CSS file, but unfortunately, the problem persists.
#postdoc {
background-color: gray;
width: 780px;
height: 500px;
margin-right: auto;
margin-left: auto;
border: 1px solid black;
margin-top: 30px;
margin-left: 30px;
padding-top: 30px;
float: right;
}
#postdoc label {
float: left;
width: 200px;
text-align: right;
margin-right: 10px;
padding-left: 10px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
font-size: 25px;
margin-bottom: 30px;
margin-left: 20px;
}
#postdoc input[type="text"] {
margin-bottom: 30px;
height: 300px;
width: 500px;
font-size: 20px;
margin-left: 10px;
box-shadow: 0 0 5px black;
vertical-align: top;
}
#postdoc input[type="file"] {
margin-bottom: 30px;
height: 50px;
width: 500px;
font-size: 20px;
margin-left: 10px;
box-shadow: 0 0 5px black
}
#postdoc input[type="submit"] {
margin-bottom: 30px;
height: 45px;
width: 250px;
font-size: 30px;
margin-right: 100px;
float: right;
background-color: #4EA24E;
color: blue;
border-radius: 5px;
text-shadow: 0 0 10px yellow;
box-shadow: 0 0 10px black;
font-family: Rockwell, 'Courier Bold', serif;
}
#postdoc input[type="submit"]:hover {
color: gold;
}<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="prostylesheet.css" type="text/css">
<meta http-equiv="X-UA-Compatible" content="IE=80" />
</head>
<body>
<h1 class="name"><font color = "#3399FF"> Prog-Assist | </font><font size = "12" font color = "#4EA24E"> Programs Deployed</font></h1>
<div id="header">
<div id="gradient">
<div class="nav">
<!-- container-fluid gives full width container of whole viewport -->
<div class="container-fluid">
<ul id="nav1" class="text-left">
<li><a href="main.html"><strong>Home</a>
</li>
<li><a href="tech.html">Technologies</a>
</li>
<li><a href="programsPage.html">Programs</a>
</li>
<li><a href="#">Blog</strong></a>
</li>
</ul>
<ul id="nav2" class="text-right">
<li><a href="#"><strong>Sign In</a>
</li>
<li><a href="#">Contact</strong></a>
</li>
</ul>
</div>
<!-- end container-fluid-->
</div>
<!--end nav-->
</div>
</div>
<!-- end header -->
<form id="postdoc" action="upload.php" method="POST" enctype="multipart/form-data">
<label>Comment:</label>
<input type="text" name="comment" placeholder="Comments">
<br>
<label>Text Document:</label>
<input type="file" name="documentfile" />
<br>
<input type="submit" name="submit" value="Post comment" class="button">
</form>
</body>
</html>