1

I've found out that the kellum method doesn't really work with html button elements. More precisely, it works but need more text indent. To recap, this is the techniqhe:

text-indent: 100%;
white-space: nowrap;
overflow: hidden;

With button elems, I've got to text-indent more, say 200%, it depends, it seems not to have a specific rule, but surely more than 100%. Why?

Luca Reghellin
  • 7,426
  • 12
  • 73
  • 118

1 Answers1

2

Some elements like button have an intrinsic padding.

Remove that, and you will get consistent results. Also, use a reset css whenever possible to provide you with a clean slate to start your styling with. Proper box-sizing is also important.

This is the reason, people generally play safe and use an indent of far more than 100%.

Check this snippet: (Try removing padding from *)

* {
    box-sizing: border-box;
    margin: 0; padding: 0;
}
button, span {
    width: 120px;
    height: 32px;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
    display: inline-block;
    border: 1px solid gray;
    vertical-align: middle;
}
<button>Button</button>
<span>Span</span>
Abhitalks
  • 27,721
  • 5
  • 58
  • 81
  • Hi, thank you, I can see a piece of B running the snippet :) – Luca Reghellin Nov 18 '14 at 11:16
  • P.s. I'm on latest firefox. I see that in chrome it works properly. – Luca Reghellin Nov 18 '14 at 11:17
  • 1
    @Stratboy: Yes. That's why a proper css reset is so important these days. It helps mitigate browser inconsistencies to a large extent. However, on elements like button, you have to take the padding in account and increase the indent by that proportion. – Abhitalks Nov 18 '14 at 11:18