CODEWITHSUNDEEP
htmlcssinternet-explorerbutton
Eric Roberts
Eric Roberts

Reputation: 285

Fixing IE6/7 problems when using floated elements inside of a button element

I am creating CSS buttons for both links and form submissions. I use almost the same markup for both, with a different wrapper.

HTML Examples:

<button type="submit">
  <em>Submit</em>
  <em class="cap"></em>
</button>

<a class="button">
  <em>Submit</em>
  <em class="cap"></em>
</a>

The CSS:

.button, button {
  display: block;
}
button em,
.button em {
  display: block;
  float: left;
  background: url(button.png) 0 0;
  height: 30px;
  padding: 0 0 0 10px;
}
button em.cap,
.button em.cap {
  padding: 0;
  width: 10px;
  background-position: 100% 0;
}

Now, in IE6/7, the anchor element version of this works. The problem comes in when using the button element, it causes the second em element to wrap.

I've tried some workarounds that I've found for button elements, but nothing I've found had a case quite like this. The reason I've floated the two elements left is because I need the button to be transparent, so other methods don't work here.

Here's an example of what I'm doing: http://keeleux.com/dev/button/

Any help is appreciated!

Thanks, Eric

Upvotes: 1

Views: 603

Answers (2)

thirtydot
thirtydot

Reputation: 228182

There's a big stack of issues to consider here.

I'm going to be very verbose with the changes required to fix this.

To cajole it into working in IE6/7, these were my steps:

There's also some IE6 specific issues of low priority:

  • The button:hover selector will not work in IE6. IE6 only supports :hover on a elements. To work around this, you can use the Whatever:hover fix.
  • Due to your use of a .png image, in IE6 there is a grey background instead of transparency; there are fixes available. Though in this case, it's hard to notice. I'd say leave this one be - the extra effort is not worth the improvement.

More important is the fact that your current implementation is slightly broken in Firefox:

http://keeleux.com/dev/button/

(screenshot from Firefox 4)

Note that a fair few of those issues can be worked around by simply using an a instead of a button.

Upvotes: 1

bpeterson76
bpeterson76

Reputation: 12870

@Eric, save yourself time and go with a solution that's already been fought with and tested and verified in all the major browsers.....jQuery UI buttons does this right out of the box. As an extra bonus, they can be styled with Themeroller for quick changeout on the backend and even user-selectable themes on the front-end.

Check out this tut for more details.

Upvotes: 1

Related Questions