Home/ Questions/Q 242827
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-11T20:52:13+00:00

There’s some mysterious padding between two images while running in IE8 and Quirks Mode

  • 0

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?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0