CODEWITHSUNDEEP
htmlcssgoogle-chromefirefox
Mike G
Mike G

Reputation: 47

: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/

Upvotes: 1

Views: 1520

Answers (3)

Seika85
Seika85

Reputation: 2021

That those browsers display it different, is because of the different rendering order of inline elements in those browsers. First positioning then render the "€" in one browser, or the other way around in the other browser. Try giving it a width, like .inputlabel-span:after { width: 12px; } or something similar.

Putting input tags inside a span is rather bad practice by the way and another reason for this behaviour. You should at least add display: inline-block to this span, if you want to keep this DOM structure.
Your :after element would then need an additional top: 50%; transform: translateY(-50%) to position it vertically centered.

I also recommend to always define * { box-sizing: border-box }, but this has nothing to do in particular with your question.

Upvotes: 0

Arnaud Gueras
Arnaud Gueras

Reputation: 2062

If you add a border around your span, you will see, in chrome it has only an small height, because the span is in display:inline Force the span to be display:inline-block and change the rest of your code at your convenience, you won't need to make some trick in all browser to fix that, it will be the same in all browser.

Upvotes: 1

TylerH
TylerH

Reputation: 21082

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.

Upvotes: 1

Related Questions