2

I've built a very simple jQuery overlay which works fine in non-Microsoft browsers. I now want to debug the CSS for the overlay so that it works in IE 8 Comptability View and Quirks Mode.

The overlay can be seen at http://pointlessandannoying.com/so/ - click the 'about' link in the bottom right of the page to display the overlay. Could anyone suggest a good place to start with regards to the debugging?

1
  • Are you looking for pointers to code changes, or tools to help you debug the code?
    – JakeParis
    Dec 29, 2010 at 21:26

4 Answers 4

2

If you're looking for code debugging help

You may be able to eliminate the quirks/compatibilityView problems by forcing IE8 Standards view. Put <meta http-equiv="X-UA-Compatible" content="IE=edge" > in the header.

If you're looking for Debugging tools

Firebug Lite bookmarklet works well. IE also makes a debug toolbar, which is not as easy to use (imho).

3
  • The META tag will force the document into the target mode; that has side-effects and impairs reuse. FWIW, IE has included debugging tools (hit F12) since version 8; the v7 Toolbar no longer loads.
    – EricLaw
    Dec 29, 2010 at 22:06
  • @EricLaw What does that mean "impairs reuse"? Perhaps it's beyond the scope of a comment... Can you perhaps point me to some information about the side-effects you're refering to? I would greatly like to know, as I've been using the meta tag for a bit now. Thanks.
    – JakeParis
    Dec 30, 2010 at 2:40
  • He's building a JQuery module that will be used in many different types of sites. If his module were to force the document mode to a mode of his choice, then he could only use his module on pages that work in the mode he chose.
    – EricLaw
    Dec 30, 2010 at 19:44
0

What exactly is the issue that you seem to be running into - I see that the overlay displays in IE8 (and Compatibility Mode etc.) however it seems to be being cut off towards the bottom, and is also un-clickable.

It could be an issue dealing with the z-index of the overlay or possibly how it is positioned (relative or absolutely) as I know the IE Family isn't fond of overlays. I'll dig into in some more to see if I can find anything.

0

One of the issues seems to be the size of the overlay - in style.css the height of #about-wrapper and #about-lightbox-wrapper were each set to 200px. I found that changing that to 400px would allow them to be seen in both IE and other browsers.

The only issue remaining is being unable to access the overlay area (The "About" area). You may want to consider using some jQuery to possibly change the z-index on show / hide so that it will be accessible.

In script.js:

Consider changing:

function about_click() {
   $('#about').click( function() {
      $('#about-overlay').show();
      $('#transparent-overlay').show().fadeTo(200, 0.5);
      $('#about-wrapper').delay(200).show().fadeTo(170, 1.0);

   }); 
}

function about_close() {
   $('#about-overlay').hide();
   $('#about-wrapper').hide().fadeTo(0, 0);
   $('#transparent-overlay').fadeTo(200, 0, function() {
      $(this).hide();
   });

to something like:

function about_click() {
   $('#about').click( function() {
      $('#about-overlay').show();
      $('#about-overlay').css('z-index',250); //Line Changed
      $('#transparent-overlay').show().fadeTo(200, 0.5);
      $('#about-wrapper').delay(200).show().fadeTo(170, 1.0);

   }); 
}

function about_close() {
   $('#about-overlay').hide();
   $('#about-overlay').css('z-index',0); // Line Changed
   $('#about-wrapper').hide().fadeTo(0, 0);
   $('#transparent-overlay').fadeTo(200, 0, function() {
      $(this).hide();
   });

My syntax may be off - but I hope that this can at least maybe point you in the right direction.

0

Thanks everyone for the tips - in the end I outsourced the job, but all of this is good for future reference.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.