This has been driving me a little crazy for the last 3-4 days...
I've determined that it's Mozilla's built in DOCTYPE Sniffing/Quirks Mode [mozilla.org] that's been giving me the grief. I've checked my source code and even though I'm writing well-formed, fully-validated XHTML 1.0 (Strict) code, Moz still insists on rendering my latest efforts using quirks. Here's a code snippet;
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-uk" lang="en-uk">
<meta http-equiv="Content-type" content="text/html; charset=ISO-8859-1" />
<style type="text/css" media="all">@import url(styles.css);</style>
<div><img src="menuItem1.gif" alt="Home" /></div>
<div><img src="menuItem2.gif" alt="Introduction" /></div>
<div><img src="menuItem3.gif" alt="Contact" /></div>
I've built up a series of styles (externally) to remove all borders, margins and padding from DIV and IMG tags, but the above code is still being rendered with about six pixels of whitespace between each image.
I've tried the DOCTYPE html SYSTEM fix (detailed in the link above), but I'm not happy with this solution - it works for both Netscape 6+ and Mozilla, but I'm not convinced that it's good practice. I've also tried the