Hi there. There's some mysterious padding between two images while running in IE8 and Quirks Mode. These two images act as a logo for my prospective website.
I have isolated the problem into single html file, http://etcbc.org/ie_problem/ie.html.
It's suppose to say "east toronto baptist church". As you can see, there's currently a space between "toro" "nto". What's causing this space in IE8 and running in Quirks Mode?
Non-IE browsers are even worse on that page.
Your images are each in their own <a /> tags, which have a style of "display: block;". Display block typically puts each element on its own line (depending on what other styles are applied to them).
To fix this, remove the "display: block" style from your elements.
<a href="http://www.etcbc.org/">
<img style="border-bottom: 0px; border-left: 0px; padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; border-top: 0px; border-right: 0px; text-decoration: none; padding-top: 0px" src="logo_1.png" />
</a>
<a href="http://www.etcbc.org/">
<img style="border-bottom: 0px; border-left: 0px; padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; border-top: 0px; border-right: 0px; text-decoration: none; padding-top: 0px" src="logo_2.png" />
</a>
If you need your images to be block level elements, use floats to align them with each other, then to fix any (potential) layout issues caused by placing floating elements on your page, use this clever solution.
You should consider using classes for your styles instead of inlining them if possible. The way things stand right now, they're going to become a maintenance nightmare.
Also, if you have control over this, put a doctype (I recommend using XHTML 1.0 Transitional. All the cool kids are doing it!) in the HTML of your pages so you don't turn Quirks Mode on. Leaving Quirks Mode on can cause a lot of headaches, especially if you try to use "new" techniques to make your site better for your users.
Use a valid DOCTYPE and get out of quirksmode:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
Just a quick link with some things that quirksmode does:
http://www.cs.tut.fi/~jkorpela/quirks-mode.html
it says there that the default horizontal margin for an image in quirksmode is 3 pixels. And that padding is ignored in CSS, so, it may be that.