Adding DOCTYPE not working - need some help

classic Classic list List threaded Threaded
2 messages Options
Reply | Threaded
Open this post in threaded view
|

Adding DOCTYPE not working - need some help

peterjay
Hello everyone,

I have been implementing a version of the shadowbox on my site and I have ran into a problem.  When I add in the DOCTYPE:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

In IE the images that are supposed to appear in the shadowbox actually just work as though they are directly linked, they just open up in the same window.  In Firefox I do not see this functionality and everything works like a charm.

I have pasted my source code into the W3C validator and it passes with no errors.

Reading through the documentation and resources on this support forum it seems as though I have done everything I need to - yet it does not work for me.  I have even gone so far as to implement the quirks mode fix that was in one of the solutions and that worked for me until I noticed that not having a DOCTYPE on the page broke the rest of the site.

If you have experienced this issue before where the images are acting as though they are directly linked in IE and not appearing in the shadowbox your help would be greatly appreciated.

Thank you,

Peter
Reply | Threaded
Open this post in threaded view
|

Re: Adding DOCTYPE not working - need some help

peterjay
Just as an update for anyone with a similar problem I did find the issue.  It all traces back to a single line of CSS.  For my project I needed to hide the bottom part of the shadowbox where the image count and next, previous, and close links are.  To do this I added a display: none; to the toolbar CSS - however I added it at the top level and it should have been at the lower level.  For some reason, by having it at the top level and having the DOCTYPE as strict the images were being linked directly.  See the code below:

CSS CAUSING THE PROBLEM:
#shadowbox_toolbar {
  margin: 0;
  padding: 0;
  height: 20px;
  overflow: hidden;  
  display: none;
}
#shadowbox_toolbar_inner {
  height: 20px;
  color: #000;
  background-color: #FFF;
}
 
WORKING CSS
#shadowbox_toolbar {
  margin: 0;
  padding: 0;
  height: 20px;
  overflow: hidden;  
}
#shadowbox_toolbar_inner {
  height: 20px;
  color: #000;
  background-color: #FFF;
  display: none;
}

Lesson learned:  be very careful when modifying the included CSS.