By prosite on

Hi,

I inherited a Drupal website (www.keyworks.eu) and everything is looking fine but in IE8 several blocks on the front page seem to overlap. I tried changing some things in the ie8.css file I found, but nothing is changing.

For completeness sake: I don't have an IE8 browser, but I test with IE9 in compatibility mode.

Looking forward to your input.

I'm fairly new with Drupal, until now I only followed an essentials course and this is the first Drupal site I am working on so please be kind. :-)

Bart.

⋅ Categories: Drupal 7.x

Comments

danny englander’s picture

danny englander
(he/him)
commented

The first thing I noticed in IE (any version) is that you've got some pretty nasty javascript errors going on. It looks like the error is from the heights.js file, it's not really following any drupal standard for Javascript. You might want to have a look at Managing JavaScript in Drupal 7. In addition, it also looks like that code is being duplicated right in page.tpl.php so the script duplication could be causing errors as well.

The essence is that you want to call custom scripts with:

(function ($) {
  Drupal.behaviors.MyTheme = {
    attach: function(context, settings) {

etc...

The other possible suspect here is that it looks like you've got two versions of JQuery running at once, 1.4 and 1.8, the latter of which is being called from the theme. I see this happen a lot and it can be the cause of a lot of errors. You'd probably be better off using the JQuery update module.

You might also check out IE Tester, a free piece of software that runs multiple versions of IE in tabs and tends to be more accurate the IE 9 emulation modes via the F12 developer tools.

Beyond that it's tricky to tell what's really going on without digging deep into the theme and code to see how badly it's been hacked by the previous developer. All in all, I suspect addressing some of these issues could help int he long run.

Danny Englander | Twitter | Instagram

prosite’s picture

prosite commented

This gives me a place to start from. I'll post my progress here.
Thank you for your effort!

prosite’s picture

prosite commented

I'm experimenting with the site on my local host and I'm getting nowhere.
The IE tester is valuable tool that I didn't know and now use for testing all my websites.

I don't have any documentation about how the theme used on the website is set up.

The two versions of jQuery is solved. Thanks for the JQuery update module tip.

prosite’s picture

prosite commented

I didn't have the time to look into the JS errors yet. The most important thing for the client is the look of the site.
I solved the issues with an extra stylesheet, but now I need to add it to the project on a conditionally.
Is there a way to get this code to appear at the end of the header of the generated html page? 

<!--[if lte IE 9]>
<link href="http://hq.prosite.be:85/bnkeyworksbe/sites/all/themes/keyworks/css/bn-iefix.css" media="all" rel="stylesheet" type="text/css">
<![endif]-->

I tried adding this line in page.tpl.php but that doesn't do the job. I also tried using the conditional styles module -> no success.

This probably is basic Drupal stuff for most of you here, but remeber I'm completely new to Drupal.

prosite’s picture

prosite commented

I placed the code in the templates html.tpl.php file right above the closing head tag. This probably isn't the right way to go, but for now it solves the problem. The website now loads the iefix stylesheet I wrote in IE8 and in IE7. (of course I changed [if lte IE 9] to [if lte IE 8])