Float left broken in IE [#1547836]

Float left in IE8 does not work
The demo http://themes.arborwebdevelopment.com/fluid-baseline-grid-theme-demo also does not work in IE8 and 7

I have tried adding doctype to the theme and that hasn't worked, I see that this is a problem that has been posted on github by respond.js having quirks but is there a work around to get this fixed.

Please fix as I like this theme and want to be using on all my future jobs

Thankls

Comments

Comment #1

ScottSimpson CreditAttribution: ScottSimpson commented 9 May 2012 at 12:19

Still no luck in getting this theme to work in IE 6-8

Do I need to add html5 shiv? and if so where do I put it?
Also do all the files need to be encoded with uft-8 without the bom?

I've been using ZEN html5 and that uses repond.js and html5 shiv and works in IE but this theme has a more clean mark up for modifying.

What am I missing it starting to send me insane that I can't figure this out please please help.

Comment #2

ressa CreditAttribution: ressa commented 29 June 2012 at 13:58

This is still an issue in IE, I am testing version 6.x-1.0.

Comment #3

sk33lz CreditAttribution: sk33lz commented 2 August 2012 at 21:20

Assigned:

ScottSimpson

» sk33lz

Hey folks,

I have made a fairly large update to the theme for the 7.x branch, and released a 7.x-2.0, which has the latest version of respond.js. I will be backporting it to 6.x branch soon. Stay tuned.

Scott, I have tested the theme using IE9 in IE7 Standards mode and IE8 standards mode, but can't seem to replicate the issue you are having. Can you please try the new version, 2.1, and see if you still have the issue.

Thanks,

Jason

Comment #4

sk33lz CreditAttribution: sk33lz commented 3 August 2012 at 00:03

Status:

Active

» Fixed

It turns out I was able with some more effort to reproduce these issues. After a long battle of wondering what the cause was, I realized the only difference between my theme, and the original FBG framework was the way the stylesheet was being called by Drupal. I did some research and it seems that the problem seems to lie in the way that IE 8 and lower render @Media queries and how Drupal does an @import for the stylesheet. The CSS for the .g1, .g2, and .g3 classes, which perform the left floats, were not being rendered by IE 6, 7, or 8 at all by using the @import method that Drupal uses by default when calling styles through the .info file. Quite odd, but after some Googling I found that it is definitely the problem.

I have removed the style.css from the .info file, and added an additional line to the html.tpl.php file to call the style.css file as a link instead of an @import and it fixes the issues with IE.

Please update to FBG 7.x-2.2 for this fix. It should fix the floats in IE6, IE7, and IE8.

Scott, thank you for taking the time to report this issue, as the framework is supposed to be compatible with all browsers including IE6. This is a big fix for FBG to run in Drupal properly.