Last week while I was over a friend’s house, I wanted to show him my local Syracuse blog. He uses Internet Explorer (seems there’s still a lot of those out here lol) so I pulled up the main page and all looked fine. Then I pulled up an individual post and… ugliness!
 |
I forgot about it until I was reading a post on a blog called IBlog4Dollars titled 35 Serious Blog Design Mistakes That You Should Avoid At All Costs written by Dennis Marshall. I got to #10, where it talked about making sure your website is cross-browser compatible, and then I remembered the problem I was having with IE.
I pulled it up on my IE and I had the issue like my friend did. I then went to work, and for the next 4+ hours I went through all the CSS code and checked all the PHP files, looking for something. I ran it through the W3C CSS Validator, which found some errors but nothing causing the issue. Man, was I frustrated.
Luckily, I play chess with Mitch Allen, so I threw the question out to him via one of my chess moves. He came back with a diagnosis that it was some javascript in the code, probably the Google Analytics script.
As I’d been researching the issue, I had come across something where it had been predicted that javascript could cause issues, but it never occurred to me it could be that one.
I went to the theme and then had to search for where I’d put it. Most of the time Google Analytics script works best in either the header or footer, but I realized I’d put it somewhere else, and then I remembered why. For some reason I can’t save many of the files on this particular theme. I get sent to a 404 page after attempting to do so, which was irksome. I found the script in a PHP I’d never put it on anywhere else because it turned out to be one of only 2 files I could actually save.
Once I removed it the site came back to life for IE8, which was great, but I still had a problem; how to get that Google Analytics code in. After all, if I couldn’t track my traffic, I wouldn’t know how I was progressing or digressing right?
 |
Then I remembered that sometimes you can fix things through your FTP program. I use something called WS_FTP for that purpose, so I opened that up, went to the plugin file and clicked once on Header.PHP. Then I right-clicked and went to Edit, and I popped the code in and saved it.
Came back to both my Firefox browser and IE, ran my tests, and all is working perfectly still. Just to make sure I also tested it in Chrome and Opera; looks good so far. Whew!
You can pick up things from other blogs, that’s for sure; heck, even this one I suppose. I had obviously taken time to see what that blog looked like before, but only the main page; that was a mistake, one I need to remember not to do again. One little code; with IE, sometimes that’s all it takes to mess stuff up.
You mentioned 4 browsers; are there others we should consider?
Happy New Year!
Mimi, there are lots of different browsers out there, but I’m not the guy to be downloading them all for testing. So I stick with the top 4, although folks on Mac’s also have their own browser to test on.
ps I used that W3C CSS Validator on my own website, and OH MY GOODNESS, what a mess!!
You can also use an online tool to check how your site looks in different browsers. There are a few options available for that, and while they may only give a screen shot, that’s often enough to figure out if there’s a problem. Do a search for cross browser testing, and you can find some great tools.
Actually Stephanie, you reminded me that I wrote about that very thing back in 2008, called Browser Shots. That’s what happens when you have lots of content sometimes. lol
It’s funny. I knew this information and use to verify all the time but got sloppy and stopped checking with new sites. I best check them now. 😉
Glad I did. I found the new site I’m working on using wordpress has major problems in IE. The post go to 404s. YIPES.
Glad to help you decide to check your site out Southpaw; bet you feel better now that you can address those issues.
A good practice is to use seveal CSS files which are separately develop for different platforms. IE is problematic, especially older version. For this a tool called “CCS3 Pie” can help. Without need to open different browser there are few web tools, but unfortunately due to request from Microsoft IE was excluded, so the best one is Adobe Browser Lab, you will be able to see how website looks in different browser and on different screen size.
On the other hand putting JavaScript on the top is consider as bad practice as JavaScript is heavy or in the case with GA makes extra HTTP requests, so the best is to appear in the footer or end of body document.
Honestly, I get a bit confused with all that tools and therefore I stopped using them. However, I know they are very useful and you persuaded me to give them a second chance:)
This is always a concern I wish these browsers would accept the standards and stop bickering by displaying the content stupidly.
You don’t see different network equipment affecting the network differently no, they stay with the standard.
Its just childish and makes people like me work 10x’s harder.
Jacko, in many realms you wonder why people don’t standardize things. Heck, the same thing applies with this WordPress software. It says I can pull up a video from my computer and that it will play, but I tried that and unless I actually upload the video to YouTube and then embed it nothing’s going to work properly.
I second the suggestion to use BrowserShots to check your site on different browsers. I do a lot of my own customizations and always check Firefox and IE as I go along.
I have to tell you Howie, though I’d totally forgotten about it, I ran a test last night and it seems like it’s slowed down a bunch from what I remember.
Mitch
The best thing is to do away with G Analytics. It can do all sorts of weird things to your pages as you state.
Plus it gives G a reason to look at your sites and what you are doing, expecially those that have tied in Analytics and Adsense plus anything else – your putting your property into one organisations domain in a sense which I don’t like.
There’s a good free tracking tool which gives you much more detailed information and almost at real time. Its called stat counter and its free unless you want historical reports or something.
If you use wordpress its a plugin and if I remember rightly its got a few config options – much less hassle!
Happy New Year BTW
Peter
Thanks for the recommend Peter, but at this point I’m really integrated with Google Analytics, and it’s amazing the information you can get from them. I have something that’s like Stat Counter for my main website, which I had many years before Analytics came along, but it’s fairly basis and doesn’t quite get the job done. But I do share your feelings about being tracked overall, though I figure they pretty much do it if you have Adsense anyway.
Happy New Year to you as well; let’s kill it this year!
It is so important to look at the website from different browsers. Once I was working on a joomla site with a fancy new premium template. The template looked absolutely gorgeous in chrome as well as firefox. Just out of curiosity, I looked it up in IE. It caused me to have almost have a fit. The site that was looking so gorgeous in the other two browsers, looked downright ugly in IE. The columns got totally messed up. It was then that I came to know that the template was not supported on IE. The template even had a nifty message – ask your viewers to upgrade to the latest browser!
Never heard about browser shots. Will check it up.
It’s definitely an important lesson, Amanda. I’ve always done it whenever I create a new website, but it just never occurred to me to check a blog theme to see how it looked. I’ll make sure to do that from now on, you best believe. 🙂
I was caught on that last week. I have integrated my site with FB comments and the thing would not work with IE.
Funny that its always IE causes issues when integrating something into wordpress
You’re right Peter, it is always IE and that’s problematic since they’re still at the top of the browser lists. That’s the only reason I found out about it, since my friend is one of those people that’s not overly computer savvy, thus it’s what he uses.
Multiple browsers is precisely the reason why I want to learn more about coding and how to fix things so that my pages render properly on as many browsers as possible, if not all.
I hear you, Jack. It was amazing how, in the end, my issue was something simple, though I’m not sure I’d have figured it out without some help. And that’s the best thing about social media; it’s like Hogwarts, help will always come to those who ask. 🙂
Yes this is one of important aspects for any website. Site should be checked on popular browsers before it goes alive. And I do take care of that personally for my any websites. Coz website is not for personal use, it will be live for whole world.
Thanks for sharing your experience.
Good luck
Thanks Jackie. Yeah, most should be checked before they go live, which I probably did, since I added Analytics after the fact.