CODEWITHSUNDEEP
cssdebugginginternet-explorer
Jim
Jim

Reputation: 851

Debugging CSS in Internet Explorer 8 Compatability View and Quirks Mode

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?

Upvotes: 2

Views: 1119

Answers (4)

Jim
Jim

Reputation: 851

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

Upvotes: 0

Rion Williams
Rion Williams

Reputation: 76597

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.

Upvotes: 0

JakeParis
JakeParis

Reputation: 11210

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).

Upvotes: 2

Rion Williams
Rion Williams

Reputation: 76597

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.

Upvotes: 0

Related Questions