0
текстовых
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>В Chrome и IE 11, он показывает правильно, но в Firefox, кнопка опускается ниже.
:) – JohnDevelops
Ваш JS скрипку до сих пор не работает в Firefox –
В Firefox все тот же вопрос. – SearchForKnowledge