Differences in IE7 and FireFox/Opera

[GothyStitch]

Ok, I'm at my wit's end with this, and I'm on a tight deadline here.

I've got a site, that when viewed in FireFox or Opera, that design-wise everything looks good, and all of the javascripts/DHTML that I use all work just fine.

But load the pages in IE 7 and everything starts to fall apart!

Spacing is way off, popups are opened in a new tab instead of a new window, and there's this friggin gap between the top image and the rest of the page that I cannot get rid of! And all of this ONLY happens in IE!

URL to this mess is at: http://www.projectinghope.com/new

Look at it in FireFox or Opera and it all looks just fine. Open it in IE and it all comes apart at the seams!

Does anybody have any suggestions as to how I can resolve a lot of these issues or should I just shave my head so that I can limit the amount of hairloss I will endure from pulling it all out?

[tech_support]

Try using this CSS code: line-height:0; margin:0; padding:0; in the image container.

[GothyStitch]

Try using this CSS code: line-height:0; margin:0; padding:0; in the image container.

I tried that, and that gap still appears! Thank you for the attempt!

[jscheuer1]

pop ups are opened in a new tab instead of a new window

That's configurable by the user in any browser that supports tabs. Nothing you can do about it other than to keep in mind that if you choose to make your site's design dependant upon pop ups, which can also be totally blocked in any modern browser, they may end up appearing in tabs, or not at all.

If two things are not coming together in IE you can try:


Removing all white space including line breaks between them in your source code.

Make sure that the font size is not adding extra height to the element, set it to 1px if applicable.

Make sure there are no intervening elements between the two elements, including, but not limited to div, br (unless required for a presentational line break), or p.

Add a negative margin to the dimension that is giving you trouble. In your case, a negative bottom margin to the top element, or a negative top margin to the bottom element. These negative margins may need to be added as conditional IE only style.

Use other IE specific conditional styles to resolve the situation.