Register  |  Login

Question Details    

   Question

Time: 16:35 - Dec 27, 2007     Asked by: mozillaman      Status: Answered      Points: 75   

How do I remove the extra pixels underneath tables?

How is it possible to remove the approximately four pixels from underneath a table? I have found no way to avoid this problem.

What I want to do is have two tables, one above and the other directly under and flush with the above table. I don't have problems with this in quirks mode, and with the xhtml-strict doctype I get messy results.

Ask a New Question

Become a Quomon Expert

Current Categories

 

Other Questions Needing Answers


   

Answer Discussion
Answer Discussion
Answer Summaries
Answer Summary
 
mozillaman,

I'd try adding a CSS class to the "bottom" table that would give it a negative top margin. That way you'd be "pulling" that table up to flush with the table above it. As you've seen, though, you're going to be fighting browser capabilities, so you may end up using a variety of "hacks" to make it behave properly.

Perhaps enclosing each table in a separate div and then applying the style parameters to the divs would be more reliable. Also, if you can get away with absolute positioning, you can effectively force the divs (or the tables) to be exactly where you want them to be.

I hope this helps,
ric

Expert:

rcastagna

Date:

Dec 28, 2007

Time:

14:53

 

Votes: Good (0) | Bad (0)
Login to rate this answer

Thanks rcastagna.

I'll try wrapping each table 'round a div and see what happens, before I conclude this and "distribute points".

Expert:

mozillaman

Date:

Dec 28, 2007

Time:

15:39

 

Votes: Good (0) | Bad (0)
Login to rate this answer

I did more studying on this question...and found out more about it. In XHTML strict mode, this problem happens when a picture inside a table is set at the exact same as the table. There is this little bit of "padding" beneath the image that I don't know how to remove.

I would like to know how to fix this without weird hacks such as setting negative margins/padding.

Thanks,

mm

Expert:

mozillaman

Date:

Dec 30, 2007

Time:

18:21

 

Votes: Good (0) | Bad (0)
Login to rate this answer

bump. I found out what the real problem was! In XHTML strict mode, if an image's style is not set to display: block than 3-4 extra pixels show underneath. rcastagna you did not help me in the way I wanted, but to show appreciation I'll award you the points. :)

Expert:

mozillaman

Date:

Dec 31, 2007

Time:

16:20

 

Votes: Good (0) | Bad (0)
Login to rate this answer

Question Answered

This question has been answered, and points have been rewarded to the following experts:

rcastagna: 50
mozillaman: 25

You're welcome however to comment or give additional information or if you wish, you have the ability to write an Answer Summary for this question by clicking on the "Answer Summaries" Tab.


The headline of this question should have been:

"How do I remove the extra 3 pixels underneath an image inside a table cell?"

The simple solution is to give the image the style "display: block", because an image that is not part of a text line should be styled as a block level element.

Another solution is to remove all whitespace between the cell element and the image element, but I would consider this bad practise.

This problem mostly appears on Internet Explorer (in standards-compliant mode) which - correctly - aligns the image (which is an inline element per default) with the baseline of the text line it appears on, even though the rest of the line only consist of whitespace. To reserve space for letters that go beyond the baseline (like j, g and y) 3 pixels (depending on font size) is left underneath the image, and appears as forced padding.

Firefox for instance doesn't display this problem because it - arguable incorrectly - automatically displays a lone image as a block level element.

Click here to see the Answer Discussion that preceded this summary.

Expert:

jgivoni

Date:

Jan 02, 2008

Time:

10:44

 
 

Login to rate this summary: Good  |  Bad


Problem: Image in XHTML Strict mode has 3 pixels underneath it, impossible to remove.

Solution: Not impossible. Set the image's style to display: block and it will work fine.

Click here to see the Answer Discussion that preceded this summary.

Expert:

mozillaman

Date:

Dec 31, 2007

Time:

16:22

 
 

Login to rate this summary: Good  |  Bad

Respond to this question:

New User

  Email:

Upon submission of this form, you will automatically be registered as a Quomon user and we will send your login information to this address

Registered User

Username:

Password:


Forgotten Password

 

New User

  Email:

Upon submission of this form, you will automatically be registered as a Quomon user and we will send your login information to this address

Registered User

Username:

Password:


Forgotten Password

   

"Psst, Quomon is a great site. Pass it on."     Tell a Friend  |   Link To Us  |   Save to Delicious  |   Digg! Digg it


All Questions


Language Options

English:

www.quomon.com

Español:

www.quomon.es

Quomon Blog

blog.quomon.com

Sponsors

Questions and Answers Software
Real Estate Postcards
Marketing Fulfillment