2

I am experiencing a very weird bug (I think), something is making the button about 2px lower that the search box. Can anyone tell me how I could fix this issue please?

#form {
  text-align: center;
}
#Bar {
  height: 35px;
  width: 400px;
  font-size: 20px;
}
#sea {
  background-color: #ffffff;
  -moz-border-radius: 0px;
  -webkit-border-radius: 0px;
  border-radius: 0px;
  height: 35px;
  color: #000000;
  font-family: Arial;
  border-style: solid;
  border-width: 1px;
  font-size: 15px;
  text-decoration: none;
  border-color: #B9B9B9;
}
body {
  margin: 0 auto;
  font-family: Arial;
}
<html>

<head>
  <link rel="stylesheet" href="test.css" />
</head>
  
<hr>

<form id="form">
  <input id="Bar" name="Input" type="text" placeholder="Search for word or phrase"></input>
  <button id="sea">Search</button>
  <br>
  <input type="radio" name="textOp" checked="checked">Highlight</input>
  <input type="radio" name="textOp">Filter</input>
</form>

</script>

</html>
Stickers
  • 75,527
  • 23
  • 147
  • 186
Hawkeye
  • 377
  • 1
  • 3
  • 14

2 Answers2

2

You could use box-sizing: border-box; to get the real height that you set.

Set vertical-align: top; to make them to align to the top.

Decrease text input font-size, it seems 20px is too large and make the box to grow taller.

#form {
  text-align: center;
}
#Bar {
  height: 35px;
  width: 400px;
  font-size: 15px;
  box-sizing: border-box;
  vertical-align: top;
}
#sea {
  background-color: #ffffff;
  -moz-border-radius: 0px;
  -webkit-border-radius: 0px;
  border-radius: 0px;
  height: 35px;
  color: #000000;
  font-family: Arial;
  border-style: solid;
  border-width: 1px;
  font-size: 15px;
  text-decoration: none;
  border-color: #B9B9B9;
  box-sizing: border-box;
  vertical-align: top;
}
body {
  margin: 0 auto;
  font-family: Arial;
}
<!DOCTYPE html>
<html>

<head>
  <title>Untitled</title>
  <link rel="stylesheet" href="test.css" />
</head>

<body>
  
  <hr>

  <form id="form">
    <input id="Bar" name="Input" type="text" placeholder="Search for word or phrase">
    <button id="sea">Search</button>
    <br>
    <input type="radio" name="textOp" checked="checked">Highlight
    <input type="radio" name="textOp">Filter
  </form>

</body>

</html>

Errors need to fix:

  • Don't forget to add a doctype <!DOCTYPE html>.
  • It's missing <title> tag.
  • Also missing <body> tag.
  • The unopened </script>.
  • <input> is self-closing tag, do not use </input>.

I have fixed them all above. Valid your markup by using - https://validator.w3.org/

Stickers
  • 75,527
  • 23
  • 147
  • 186
  • Thank you for fixing my errors. I did not know was self-closing. I have no idea why I didn't add a tag. Also, why is needed? Shouldn't a browser know that it is an HTML document from the .html tag on the file? – Hawkeye Jan 12 '16 at 01:59
  • You're welcome, read this refers to doctype http://stackoverflow.com/questions/6076432/why-do-i-need-a-doctype-what-does-it-do – Stickers Jan 12 '16 at 02:03
0

Simple Remove the height and add the Padding to the button.

#sea {
 padding: 9px 5px 7px;
}
Venkat.R
  • 7,420
  • 5
  • 42
  • 63