search

debois / elm-mdl

Elm-port of the Material Design Lite CSS/JS library
Apache License 2.0
965 stars 133 forks source link

Icons are not positioned correctly inside button-links #331

Closed SidneyNemzer closed 7 years ago

SidneyNemzer commented 7 years ago

By "button-link", I mean a Button with a Button.link attribute. This is rendered as an <a> instead of a <button>.

Text is fine inside the button-link, but Icons are slightly too high.

Observe: image

EDIT: The buttons are different sizes in the picture because of the box-sizing property; they are now the same size in the demo, but the icon alignment is still an issue

Live demo: https://ellie-app.com/3BNTD3BkNRWa1/0

I have this issue in the latest version of Chrome and Firefox.

SidneyNemzer commented 7 years ago

I finally figured it out!

You just need to add a doctype to the top of the HTML page (eg <!doctype html>)

aforemny commented 7 years ago

Thank you for figuring this out. I scratched my head on it for a while already, not liking the solutions I came up with... so. Great!