MikeS MikeS - 7 months ago 21
HTML Question

:after span positioning differs between Chrome and Firefox

I have a problem when creating an HTML-input with a symbol (e.g. money) attached to it. Chrome and Firefox seem to render the alignment of the "money-symbol" differently.

The HTML

<div class="inputlabel">
<label>
Some Label
</label>
<span class="inputlabel-span input-symbol-euro">
<input type="text"/>
</span>
</div>


The CSS

.inputlabel label{ display: block}
.inputlabel input{ line-height:50px;}

.inputlabel-span {
position: relative;
}
.inputlabel-span input {
padding:0;
width:200px;
border:none;
}
.inputlabel-span:after {
position: absolute;
top:0;
content: "€";
right: 0px;
}


Link to the fiddle: https://jsfiddle.net/g0ztgcw8/9/

Answer

That's because of the element spacing of putting an input inside a span. You can fix this by commenting out the white space between the end of the input element and the closing span tag:

.inputlabel label{ display: block}
.inputlabel input{ line-height:50px;}

.inputlabel-span {
  position: relative;
}
.inputlabel-span input {
  padding:0;
  width:200px; 
  border: none;
}
.inputlabel-span::after {
  position: absolute;
  top:0;
  content: "€";
  right: 0px;
}
<div class="inputlabel">
  <label>
    Some Label
  </label>
  <span class="inputlabel-span input-symbol-euro">
    <input type="text"/><!--
--></span>
</div>

<p></p>
<div style="width:200px;background-color:red;">
This div has 200px
</div>

You'll see no change in Chrome and the code will display the Euro symbol inside the input element on Firefox correctly now.

Comments