CODEWITHSUNDEEP
htmlcss
Name
Name

Reputation: 529

Text input field appears higher then span next to it

I have a <input type="text"> with padding:0 and border:0, same as the <span> element next to it. But why does the text field appear higher than the span element?

Here is the code:

*{
	margin: 0px;
	padding: 0px;
}

body{
	background-color: rgb(226, 220, 220);
}

nav{
	width: 100%;
	background-color: #12161C;
}

nav > .nav_ul{
	width: 1000px;
	margin: 0px auto;
	font-size: 0px;
}

nav > .nav_ul > .nav_li{
	display: inline-block;
	margin: 20px 0px;
	font-size: 16px;
	margin-right: 20px;
}

nav > .nav_ul > .nav_li_last_child{
	margin-right: 0px;
}

nav > .nav_ul > .nav_li > .nav_a{
	text-decoration: none;
	background-color: #E56E04;
	display: block;
	color: white;

	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}

nav > .nav_ul > .nav_li > .nav_a:hover{
	background-color: #F19645;
	border-color: #F19645;
}

nav > .nav_ul > .nav_search{
	position: relative;
	display: inline-block;
}

nav > .nav_ul > .nav_search > .nav_searchfield{
	margin: 20px 0px;
    width: 300px;
    font-size: 16px;
    display: inline-block;
    background-color: #545455;
    color: white;

    border: none;

    -webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;

	border-bottom-right-radius: 0px;
	border-top-right-radius: 0px;
}

nav > .nav_ul > .nav_search > .fa-search{
	font-size: 16px;
	display: inline-block;
	background-color: #545455;
	color: black;

	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	
	border-bottom-left-radius: 0px;
	border-top-left-radius: 0px;
}

.fa-user, .fa-user-plus{
	margin-right: 10px;
}

/* ------------------ */

.float_right{
	float: right;
}

.float_left{
	float: left;
}

.clear_both{
	clear: both;
}
<!DOCTYPE>
<html>
	<head>
		<link href="backbone/general.css" rel="stylesheet" type="text/css"/>
		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.css">
	</head>

	<body>
		<nav>
			<ul class="nav_ul">
				<div class="nav_search">
					<input class="nav_searchfield" type="text" placeholder="Search ..." />
					<span class="fa fa-search"></span>
				</div>
				<li class="nav_li float_right nav_li_last_child"><a href="#" class="nav_a"><i class="fa fa-user"></i>Login</a></li>
				<li class="nav_li float_right"><a href="#" class="nav_a"><i class="fa fa-user-plus"></i>Register</a></li>

				<div class="clear_both"></div>
			</ul>
		</nav>
	</body>
</html>

Why is the span field smaller than the inputfield? How can I solve this problem?

Upvotes: 1

Views: 560

Answers (2)

Yandy_Viera
Yandy_Viera

Reputation: 4380

Yes @Jackson is right about of the input field can vary from browser to browser, but if you don't want to worry about the height of both element you can try this trick:

the thing is set the icon inside the input for that you have to do this:

nav > .nav_ul > .nav_search > .fa-search{
    position: absolute;
    right:5px;
    top: 50%;

    /* if you know the height of the icon set margin-top: -(height/2) */
    margin-top: -8px; 

    /*else set transform: translateY(-50%)
}

At this point you have the icon inside the input, vertically center and on the right side.

In you case you'll have to remove some extra styles to make it look good because you put the border-radius to icon so just comment:

nav > .nav_ul > .nav_search > .nav_searchfield{

    //setting border-radius to the whole input
    /*border-bottom-right-radius: 0px;
    border-top-right-radius: 0px;*/
}

nav > .nav_ul > .nav_search > .fa-search{

    //removing the border-radius for the icon
    /*border-radius: 5px;
    border-bottom-left-radius: 0px;
    border-top-left-radius: 0px;*/
}

and to give the final touch, set padding-right to the input for the text does not overlap with the icon

nav > .nav_ul > .nav_search > .nav_searchfield{
    padding-right: 25px;
}

In this FIDDLE example you can see how the height of the input change and the icon remains well positioned.

I hope this helps

Upvotes: 2

Jackson
Jackson

Reputation: 3518

The height of the input field can vary from browser to browser. In my opinion the best way to ensure they are the same height is to specify the height directly.

Give the input and the span a height of 18px;

* {
  margin: 0px;
  padding: 0px;
}
body {
  background-color: rgb(226, 220, 220);
}
nav {
  width: 100%;
  background-color: #12161C;
}
nav > .nav_ul {
  width: 1000px;
  margin: 0px auto;
  font-size: 0px;
}
nav > .nav_ul > .nav_li {
  display: inline-block;
  margin: 20px 0px;
  font-size: 16px;
  margin-right: 20px;
}
nav > .nav_ul > .nav_li_last_child {
  margin-right: 0px;
}
nav > .nav_ul > .nav_li > .nav_a {
  text-decoration: none;
  background-color: #E56E04;
  display: block;
  color: white;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}
nav > .nav_ul > .nav_li > .nav_a:hover {
  background-color: #F19645;
  border-color: #F19645;
}
nav > .nav_ul > .nav_search {
  position: relative;
  display: inline-block;
}
nav > .nav_ul > .nav_search > .nav_searchfield {
  margin: 20px 0px;
  width: 300px;
  font-size: 16px;
  display: inline-block;
  background-color: #545455;
  color: white;
  height: 18px;
  border: none;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  border-bottom-right-radius: 0px;
  border-top-right-radius: 0px;
}
nav > .nav_ul > .nav_search > .fa-search {
  font-size: 16px;
  display: inline-block;
  background-color: #545455;
  color: black;
  height: 18px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  border-bottom-left-radius: 0px;
  border-top-left-radius: 0px;
}
.fa-user,
.fa-user-plus {
  margin-right: 10px;
}
/* ------------------ */

.float_right {
  float: right;
}
.float_left {
  float: left;
}
.clear_both {
  clear: both;
}
<!DOCTYPE>
<html>

<head>
  <link href="backbone/general.css" rel="stylesheet" type="text/css" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.css">
</head>

<body>
  <nav>
    <ul class="nav_ul">
      <div class="nav_search">
        <input class="nav_searchfield" type="text" placeholder="Search ..." />
        <span class="fa fa-search"></span>
      </div>
      <li class="nav_li float_right nav_li_last_child"><a href="#" class="nav_a"><i class="fa fa-user"></i>Login</a>
      </li>
      <li class="nav_li float_right"><a href="#" class="nav_a"><i class="fa fa-user-plus"></i>Register</a>
      </li>

      <div class="clear_both"></div>
    </ul>
  </nav>
</body>

</html>

Upvotes: 0

Related Questions