When did Firefox become such a steaming pile?
OK, that’s not how I intended to start this. Just kinda had to get it out there. Anyway, a client brought an unusual bug with their website to my attention today.
Since embracing responsive web design last year, I’ve become quite fond of using this little bit of code to make images resize dynamically to fit their containers:
img {
height: auto;
max-width: 100%;
width: auto;
}
Most of the time this little bit of CSS works magic. But in this particular case, it did not. The client has put together a table on a page to present a set of photos of board members. In most browsers, the table looks great and is fluidly scaling down the images. But in Firefox, we found it was clumsily overflowing its borders, rendering the images at their full sizes.
After working my way through a few surprisingly unhelpful posts on Stack Overflow, I found my way to this, which seemed to hold an only-too-simple answer:
table {
table-layout: fixed;
}
I don’t know about you, but I never use table-layout. I’ve come to realize there’s a whole realm of CSS that I just basically never touch, because it’s (usually) completely unnecessary to the way I build pages. But every once in a while, these things come in handy. Turns out, table-layout: fixed was exactly what I needed to — BOOM! — fix the problem with the too-large table images in Firefox.
And, suddenly, CSS was magic again.