[patch] IE 7 renders sign up button incorrectly [Has patch]

[enailor]

Using BP1.1 Default theme and viewing using IE 7, the sign up button renders incorrectly. I have attached a screenshot for those not using IE. Not sure if this is an issue in all IE browsers.

[enailor]

Screenshot of IE 7 Button issue

[Jason_JM]

Hot Dang thats a big button!

[apeatling]

No CSS support for display: inline-block in IE7, upgrade to IE8, or if someone wants to write a patch, by all means please do.

[r-a-y]

Tentative patch for IE7/6

[r-a-y]

I encountered this issue awhile back, but remedied it with a CSS override targeting IE7 (and IE6).

I have a body CSS class which detected what browser is running and then overrided the .generic-button class.

eg.

.ie7 .generic-button {display:inline;}

But since the default BP theme doesn't come equipped with a browser detection class, you could use a CSS hack:

*:first-child+html .generic-button {display:inline;}

This only targets IE7 and is valid CSS.

IE6 will also need the width to be defined.

You can do so with the star hack:

* html .generic-button {width:150px;}

Even when you have the width defined, the generic button still won't look right, but it will look better than before.

---

I've attached a patch for trunk BP 1.1.1. It's untested since I don't have BP 1.1.1 installed on my testbox yet ;)

Please test!

[Jason_JM]

I'll try to test this tonight.

[Takeo]

To clarify, IE7 does supports inline-block... sort of. It only supports it on elements which are inline by default (i.e. span, em, b). So applying it to a div element will have no effect.

The hack above in the comments should work but not without setting hasLayout using something like zoom:1; So:

'*:first-child+html .generic-button {zoom:1; display:inline;}'

or simply

generic-button {zoom:1; *display:inline;}

[r-a-y]

Takeo,

zoom isn't a valid CSS attribute, and while *display does work, it's also invalid.

You're right about the hasLayout/inline thing for IE7 though. I'm not using the default BP theme, so I can't tell if hasLayout is already applied or not.

Feel free to submit a patch though!

[apeatling]

Use IE8, and this is the classic theme so I'm bumping this unless someone gets a good patch in.

[hnla]

Using IE8 is a nice suggestion and we wish everyone would but the reality is that not everyone can upgrade, remember BP suggests corporate use, intranets? for many large orgs upgrading browsers on a network is not a trivial matter as they have apps written for older browsers, some orgs have stated that upgrading will NOT happen - Orange & MOD procurement in the UK.

The approach that has been deemed 'Best Practice' for a while now and acknowledged by MS is to use MS Conditional Comments to filter a IE-fixes.css sheet to IE only, this way you do not need any other browser detection methods.

In that sheet one places override rules and the use of zoom:1; is a standard practice to set hasLayout - validation of this sheet is a non issue and irrelevant.

BP could do with adding a CC stylesheet to header.php or users could add through a add action wp_head in functions.php and corrections added to that rather than adding 'hacks' to the proper styles, 'hacks' are pretty much redundant and many have consequences; relying on a bug to correct an issue is dangerous as the bug could be corrected at a later revision.

[DJPaul]

Does this still apply to BP 1.2.6? I note this ticket was referring to the classic theme. I'm tempted to close this as wontfix unless 1.2.6's BP-Default has a similar problem.

[r-a-y]

I would say this doesn't apply anymore.

[DJPaul]

Closing as the Classic theme won't be supported in BP 1.3.