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 CreditAttribution: wimberb commentedUpdate:
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 CreditAttribution: JSCSJSCS commentedTake 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 CreditAttribution: wimberb commentedThanks 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 CreditAttribution: fubhy commentedI 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.
Comment #5
wimberb CreditAttribution: wimberb commentedThanks for the reply, fubhy. I'll be happy to join you on IRC...as soon as I can figure out how to do that ;)
Comment #6
JSCSJSCS CreditAttribution: JSCSJSCS commentedLOL, You are so ME two months ago!
I'll save you some trouble.
Go to http://webchat.freenode.net/
Pick a nickname and put in the CAPTCHA
Once logged in, at the text entry at the bottom type /join #drupal-omega
Then you will see all the participants on the right and all the text in the main area. Type away.
I think if you actually type in someone's name in the text box (you can also add your text), their browser alerts them.
Comment #7
VM CreditAttribution: VM commentedfor IRC the chatzilla addon for firefox is also worth a look, until you find IRSSI ;)
Comment #8
bocaj CreditAttribution: bocaj commentedI cannot reproduce the issue either. The background colors change as expected on all browsers for me.
Comment #9
Cellar Door CreditAttribution: Cellar Door commented