Omega and different browsers [#1213914]

I’ve been doing some experimenting while trying to understand all the intricacies of how Omega works. As a test I set up my subtheme css files to include the following entries:

global.css
Body{background-color: pink;}
.navigation{font-size: 1em;}

mytheme-alpha-default.css
Body{background-color: #000;}
.navigation{font-size: 1.5em;}

mytheme-alpha-default-narrow.css
Body{background-color: blue;}

mytheme-alpha-default-normal.css
Body{background-color: green;}

mytheme-alpha-default-wide.css
Body{background-color: red;}

Interestingly, I get completely different results depending on which browser I use. I am running Windows 7 so all my browsers are Windows versions. Perhaps the Mac displays differently.

After setting up the css files as above I opened the page in each browser. I adjusted the width of the browser and observed the changes, if any.

Below is what I found. It appears that Safari is the only browser that works as expected. All others work to varying degrees.

IE9	mobile	narrow	normal	wide
Width change	No	No	No	No
Background	Black	Black	Black	Black
Font	large	large	large	large

Firefox 5.0	mobile	narrow	normal	wide
Width change	No	No	Yes	Yes
Background	Green	Green	Green	Red
Font	large	large	large	large

Chrome 12	mobile	narrow	normal	wide
Width change	Yes	Yes	Yes	Yes
Background	Pink	Black	Black	Black
Font	small	large	large	large

Safari 5	mobile	narrow	normal	wide
Width change	Yes	Yes	Yes	Yes
Background	Pink	Blue	Green	Red
Font	small	large	large	large

Comments

Comment #1

wimberb commented 9 July 2011 at 18:52

Update:

There may have been some browser cache issues affecting my previous test. After clearing caches Chrome now works correctly, giving the same results as Safari. The only change in IE is that now the background is Green instead of Black. No change to Firefox or Safari.

Just trying to get a handle on exactly how all the different css files are used and how different browsers will display my site.

Comment #2

JSCSJSCS commented 11 July 2011 at 15:51

Take a look at this article. It may help a bit:

Omega StarterKit CSS Files
http://mydrupaljourney.com/articles/2011/06/30/omega-starterkit-css-files

You can't count on IE to work, even IE9 is still a mess when it comes to standards compliance.

Comment #3

wimberb commented 9 July 2011 at 20:59

Thanks for the link JSCSJSCS! Actually I had already seen that article and found it to be very informative.

Right now I'm just trying to figure out why the Omega theme does not fully work in Firefox and why it hardly works at all in IE. It seems to work perfectly in Chrome and Safari but does not scale down to the narrow and mobile versions when using Firefox.

IE is probably a lost cause, which is why I never use it for anything except testing or on the occasional site that requires it. Omega won't scale at all in IE.

I'm just trying to get my site to work and look the same no matter what browser is used. I'm fairly new to all this. I installed Drupal about a month ago and have since been learning Drupal, HTML5, CSS, and PHP. I have come a long way but I still don't have enough experience to understand all the cross browser compatibility issues, but I'm working on it.

Comment #4

fubhy commented 9 July 2011 at 21:18

I can't reproduce the behavior that you are describing here at all. For me it works in ALL browsers without any problems (IE8 + 7 show the default grid only of course). But there is NO problem with Firefox or IE9 at all as far as I can tell. Join me on IRC (#drupal-omega) to investigate this further, please.