Welcome to WebmasterWorld Guest from 54.167.213.22

Forum Moderators: incrediBILL

Message Too Old, No Replies

Gaps around image in table (Gecko browsers)

How can I get seamlessly sliced images?

     
1:11 pm on Nov 22, 2002 (gmt 0)

10+ Year Member



I'm working on a tables-based layout (I know about CSS but need to do this for NN4 compatiblity) and I have an image in a table cell with no cellpadding, cellspacing or border. I tried specifying the height in both CSS and HTML to be the same as the image. No other CSS is affecting this cell.

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.

1:17 pm on Nov 22, 2002 (gmt 0)

WebmasterWorld Senior Member blobfisk is a WebmasterWorld Top Contributor of All Time 10+ Year Member



Hi Quagmire,

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....

1:22 pm on Nov 22, 2002 (gmt 0)

WebmasterWorld Senior Member nick_w is a WebmasterWorld Top Contributor of All Time 10+ Year Member



Hi

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

1:32 pm on Nov 22, 2002 (gmt 0)

10+ Year Member



Thanks for the fix, it worked! I did switch to 4.01 transitional and it made it look right, but that still didn't really solve the problem. Thanks again!
8:56 pm on Dec 4, 2002 (gmt 0)

10+ Year Member



The easiest way to solve this problem is to simply remove the Doctype tag....
1:11 am on Dec 5, 2002 (gmt 0)

10+ Year Member



have you tried to check the settings for the gecko browser and see if it has set to put a 3px border for table? I just play with phoenix (gecko based) and find out that it has a file that sets 3px border for tables.

hopefully this would help. :)

4:33 pm on Dec 5, 2002 (gmt 0)

10+ Year Member



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">

<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/xml
MIME type fix, but this didn't have any effect on my server.

This 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?

8:42 pm on Dec 5, 2002 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Whitespace because of the base line behaviour is only shown when Moz uses the standard compliant mode. To make it disappear declare the images to be block level elements. See Nick´s post and the link he gave.

Andreas

8:03 am on Dec 6, 2002 (gmt 0)

10+ Year Member



...and that's where my problem lies. All IMG tags inside my snippet above have been given
display:block;
status, yet Moz is still rendering them with gaps.

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...

 

Featured Threads

Hot Threads This Week

Hot Threads This Month