I love button walls but now and then, when saving a site’s button, I find it’s 88x33 instead of 88x31 and using only the width and height attributes ends up breaking my layout. It seems that browsers follow the height attribute and reduce the width accordingly. I came up with a solution that worked for me (adding a little style) - it may not be the ’best practice’ but I decided to share just in case others find it useful:
<img src="/images/IMAGENAME.EXTENSION" alt="ALT TEXT" width="88" height="31" style="min-width:88px;max-height:31px;">
Update 02/13/25: Thanks to Matthew for reminding that using a class name instead of inline styles is probably a better way. In fact, I did that today thanks to his feedback.
I added class="button-fix" to each of the img tags in question and the following to my stylesheet:
.button-fix {
min-width:88px;
max-height:31px;
}
It is a better way!