homepage Welcome to WebmasterWorld Guest from 54.226.21.57
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / HTML
Forum Library, Charter, Moderators: incrediBILL

HTML Forum

    
Gaps around image in table (Gecko browsers)
How can I get seamlessly sliced images?
Quagmire

10+ Year Member



 
Msg#: 3795 posted 1:11 pm on Nov 22, 2002 (gmt 0)

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.

 

BlobFisk

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



 
Msg#: 3795 posted 1:17 pm on Nov 22, 2002 (gmt 0)

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

Nick_W

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



 
Msg#: 3795 posted 1:22 pm on Nov 22, 2002 (gmt 0)

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

Quagmire

10+ Year Member



 
Msg#: 3795 posted 1:32 pm on Nov 22, 2002 (gmt 0)

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!

patrickeriksson

10+ Year Member



 
Msg#: 3795 posted 8:56 pm on Dec 4, 2002 (gmt 0)

The easiest way to solve this problem is to simply remove the Doctype tag....

copongcopong

10+ Year Member



 
Msg#: 3795 posted 1:11 am on Dec 5, 2002 (gmt 0)

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

NetGrease

10+ Year Member



 
Msg#: 3795 posted 4:33 pm on Dec 5, 2002 (gmt 0)

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?

andreasfriedrich

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 3795 posted 8:42 pm on Dec 5, 2002 (gmt 0)

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

NetGrease

10+ Year Member



 
Msg#: 3795 posted 8:03 am on Dec 6, 2002 (gmt 0)

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

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / HTML
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved