zurb/foundation — Issue #321: A strange problem with IE7, buttons and sizes
Author: beermad
Created: 2012-02-15 00:40:46+00:00
State: open

I'll start with a caveat. This is the first time I've used Foundation and what I've put together so far is a mock-up to prove that it's what I'm looking for. Which I think its is. However, there seems to be a strange (and nasty) issue with IE7 (which I'd love to drop but it's not yet a small enough proportion of my traffic) and sized buttons.

As I'm new to Foundation it COULD be a problem with my HTML or CSS, but having dug into things I'm fairly sure it isn't.

The problem is that when a size is applied to buttons, they're jumping out of position - but only on IE7. To illustrate here's what the mock-up so far should look like
But in IE7, it looks like this

Now, the buttons are defined like this: class="nice small radius white button"

If I replace small with "medium" or "large", the same effect occurs. But if I remove the size definition, the buttons go back where they should be.

By changing "small" to "little" and altering the CSS from
.small.button { font-size: 11px; padding: 8px 20px 10px; width: auto; }
.nice.small.button { background-position: 0 -36px; }

to
.little.button { font-size: 11px; padding: 8px 20px 10px; width: auto; }
.nice.little.button { background-position: 0 -36px; }
the buttons sit nicely where they should be.

I can see from looking at the Foundation CSS that the classes small, medium and large are also used for other elements. My suspicion is that somehow another use of those classes is interfering with the buttons - in an IE7-specific way (there are no classes with those names in my own CSS).

For reference, full HTML with the working and broken styles can be found at http://camranew.web-brewer.co.uk/pubs/ok.html (working OK in IE7) and http://camranew.web-brewer.co.uk/pubs/broken.html (not working in IE7).

As I have a workaround, it's not an urgent problem, but I thought it worth drawing to your attention in case any other users hit the same issue. Apart from this I'm finding your framework looking very nice - thanks for your work.