I built a web site in DW CS3. It displays fine in every browser except IE. Most of the pages look okay, but some pages have unexplained white gaps. The nav bar right below the header image should not have any white space between the image and the nav bar. You can click thru the site to see the problem.

This page looks okay:

This one has the problem:

All of these pages were built from the same template. That's the weird thing.

Any ideas?

Dani AI

Generated

— since and report no problem, this is most likely a small, IE-specific layout/markup difference between the pages rather than a browser-wide bug. Common causes for an unexplained vertical gap under a header image in IE are: a different document mode (missing/altered DOCTYPE or stray chars before it), margin-collapse on the first child (UL/OL default top margin), the image behaving as an inline element (baseline gap), or a tiny markup difference (an unclosed tag, an extra <p> or comment) introduced by the template editor.

A short, practical checklist that usually finds the issue:

  • Compare the generated HTML for the working and broken pages (look for differences before the DOCTYPE and in the header area).
  • Use IE’s developer tools (F12) to check Document Mode/Compatibility View and inspect the computed box model for the header image and the nav (look at margin-top on the nav and the image’s display/vertical-align).
  • Validate the page markup to catch unclosed tags or stray elements that can change layout.

Quick CSS fixes to try (safe and reversible):

/* remove image baseline gap */
#header img { display: block; }

/* prevent nav default top margin and force containing layout in old IE */
#nav, #nav ul { margin-top: 0; padding-top: 0; }
#header { line-height: 0; overflow: hidden; zoom: 1; }

Notes: line-height:0 only affects inline text inside the header wrapper; zoom:1 is a harmless IE hasLayout trigger used in IE6/7. For background reading on the image baseline gap and margin collapsing, see the MDN docs on vertical-align and collapsing margins, and use the W3C validator to check markup:

vertical-align (MDN)

W3C Validator

Recommended Answers

All 2 Replies

I don't see any problems....

I tried firefox (version 3.0) & Internet Explorer (Version 7) and i see no difference...

Everything looks good to me in IE.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.