Mysterious Gap in Internet Explorer

Have you ever code some HTML and it doesn't display correctly?

Why is there a mysterious gap there? How can I make it display properly without the gap?

This tutorial will explain why and how to fix it. To follow along, download the code by right-clicking code5.zip and select Save File As. This is the code that we were building in the Intro HTML/Dreamweaver course.

Open up index.html in Dreamweaver and look for line 13 that looks like this.

Reformat it slightly to put the <td>, <img>, and </td> tags into separate lines as shown below.

View in your browser and things should like fine like the below...

The problem comes when we now want to add a navigation bar right below the Creative Works title image. Add a div element that is to be our nav bar with a background color of #D6D6D6 and border color of #8A8A8A as shown below.

Now when you view the page in Internet Explorer (IE), you get the mysterious gap...

If you look at the same page in Firefox, it looks fine...

Now you know that different browsers can sometimes render the same code in different ways. This cross-browser compatibilities issue becomes even greater with CSS layout and code. In the Intermediate CSS course, we look at some of these issues and their workarounds.

The gap in Internet Explorer was caused by the line break between the <img> tag and the <div> tag.

If instead, we break up our lines in between attributes as shown such that there is no space between the ending angle bracket of <img> and the beginning angle bracket of <div>

Then it looks fine in both Internet Explorer and Firefox.

However, I don't like the way my code looks now. I don't like to have part of the <img> code on the same line as part of the <div> code. And I don't like breaking up my tags in between attributes. It makes the code looks messy and hard to maintain.

So instead, I wrapped the <img> tag in its own div and even added HTML comments ...

If you now preview this in your browser, it looks just fine in Internet Explorer and Firefox without any gaps.

If you want to finish building this website or start from the beginning with a design comp, consider the Intro Design Series courses at https://learnWebDesignOnline.com