CODEWITHSUNDEEP
htmlcss
SearchForKnowledge
SearchForKnowledge

Reputation: 3751

Why does the button not match the position with the textboxes vertically

JsFiddle: http://jsfiddle.net/7yfLLkds/

/*  SECTIONS  */

.section {
  clear: both;
  padding: 0px;
  margin: 0px;
  height: auto;
  overflow: hidden;
  width: 100%;
}
/*  COLUMN SETUP  */

.col {
  /*display: block;*/
  /*float:left;*/
  display: inline-block;
  margin: 1% 0 1% 0;
}
.col:first-child {
  margin-left: 0;
}
/*  GROUPING  */

.group:before,
.group:after {
  content: "";
  display: table;
}
.group:after {
  clear: both;
}
.group {
  zoom: 1;
  /* For IE 6/7 */
}
.span_smaller {
  width: 39%;
  word-wrap: break-word;
}
.onlySmallPadTop {
  padding: 5% 0 0 0;
}
.styledFromDirHolder {
  height: 30px;
  width: calc(90% + 5px);
  position: relative;
  display: inline-block;
  padding-left: 2%;
}
.styledTBFromDir {
  width: 100%;
  height: 100%;
  padding-right: 12%;
  padding-left: 5px;
  background: #E8E8E8;
  opacity: 1;
  box-shadow: 0px 5px #BBB, 0px 8px 10px rgba(148, 148, 148, 0.5);
  box-sizing: border-box;
}
.styledFromDirGeoLoc {
  height: 100%;
  width: 10%;
  background: url('../theImages/geoLoc.png') no-repeat 50% 50%;
  position: absolute;
  top: 0;
  right: 0;
  cursor: pointer;
  background-size: auto;
}
.styledFromDirGeoLoc:hover {
  background: url('../theImages/geoLoc2.png') no-repeat 50% 50%;
}
.percPadLeft {
  padding: 0 0 0 2%;
}
.styledTB {
  padding-left: 5px;
  background: #E8E8E8;
  opacity: 1;
  border: none;
  outline: none;
  right: 35px;
  box-shadow: 0px 5px #BBB, 0px 8px 10px rgba(148, 148, 148, 0.5);
}
.searchBDir {
  height: 30px;
  width: 90%;
}
.styledBtn {
  border: 0;
  background: #EA772B;
  display: block;
  box-shadow: 0px 5px #BC490A, 0px 8px 10px rgba(148, 148, 148, 0.5);
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
}
.styledBtn:hover {
  background: #00599B;
  box-shadow: 0px 5px #01355D, 0px 8px 10px rgba(148, 148, 148, 0.5);
}
.styleDirection {
  font-size: 12px;
  padding: 0 8px 0 8px;
  height: 30px;
  line-height: 30px;
  color: #FFF;
}
<div class="section group">
  <div class="col span_smaller onlySmallPadTop">
    <span>From:</span>
    <br />
    <div class="styledFromDirHolder">
      <input type="text" id="fromAdd" class="styledTBFromDir" />
      <span id="btnGeo" title="Get My Location" class="styledFromDirGeoLoc"></span>
    </div>
  </div>
  <div class="col span_smaller onlySmallPadTop">
    <span>To:</span>
    <br />
    <span class="percPadLeft"></span>
    <input type="text" id="toAdd" class="styledTB searchBDir" />
  </div>
  <div class="col onlySmallPadTop">
    <span></span>
    <br />
    <input type="button" id="dirBtn" class="styledBtn styleDirection lightLinks" value="Get Directions" />
  </div>
</div>

In Chrome and IE 11, it shows correctly but in Firefox, the button goes below.

Upvotes: 0

Views: 52

Answers (4)

Pete
Pete

Reputation: 58432

Add vertical-align: middle; to .col and it should sort out your problem

Updated fiddle

Because you don't have any text in your span above your button, the calculated height of the button div seems to be smaller than the other divs (put some text in and it will also fix the problem) and by default inline-block elements are vertical aligned to the baseline (which is why your button div is lower).

Upvotes: 2

Tom Marulak
Tom Marulak

Reputation: 673

Remove the display:block from the .styleBtn

http://jsfiddle.net/7yfLLkds/3/

Upvotes: 2

Danijel
Danijel

Reputation: 12689

Remove the display: block; property on input#dirBtn.

Upvotes: 2

JohnDevelops
JohnDevelops

Reputation: 567

The line break above the button (<br />) is causing an issue. You shouldn't need it, remove it and apply a margin or possibly position:relative;top:10px; or similar to the button in order to achieve a consistant experience across browsers.

Try not to use line breaks for spacing elements other than text/paragraphs etc, they are too inconsistent and it is not the correct or best use of them :)

Upvotes: 2

Related Questions