Forum Moderators: open
In IE5+ it's fine, but in Gecko-based browsers there's still a 3-4 pixel horizontal gap at the bottom of the image inside the TD element.
This seems so simple I'm sure it's a head-slapper. I'm using the HTML 4.01 strict dtd.
Could you post the relevant piece(s) of code?
I've found that putting all the code <td><img....></td> on one line can remove unwanted space in NS....
The short answer is:
td img {
display: block;
}
(in your CSS) -- The problem stems from the fact that these browsers sit inline elements on the theoretical basline of a td cell. That basline is a little above the actuall bottom of the cell.
For a more detailed description see This Netscape Article [devedge.netscape.com]
Hope that helps!
Nick
hopefully this would help. :)
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">
<head>
<title>Site Navigation</title>
<meta http-equiv="Content-type" content="text/html; charset=ISO-8859-1" />
<style type="text/css" media="all">@import url(styles.css);</style>
</head>
<body>
<div><img src="menuItem1.gif" alt="Home" /></div>
<div><img src="menuItem2.gif" alt="Introduction" /></div>
<div><img src="menuItem3.gif" alt="Contact" /></div>
</body>
</html>
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
text/xmlThis new site I'm working on needs to validate to XHTML 1.0 Strict, so this whitespace problem's got to be sorted out legitimately.
Has anybody else experienced this, and did you manage to solve the problem whilst still keeping to standards?
Andreas
display:block;I've deliberately moved away from tables, because I need to use DIVs for some show/hide effects in the menu. If I moved back to tables, the code could well end up being about 6x the size it needs to be, and that's unacceptable.
For once, I'm actually pleased to be relying on MSIE 6.0 to check my designs...
