1
Vote

Table Layout causing spacing problems

description

Firstly thanks for putting this up as it's just what I need.
 
I have a small problem though. I am using this to display small flash parts and images (via CEWP) in the same web part zone.
 
The Flash videos don't line up with the images due to the Flash object being inside a table and getting padded by 2 pixels. It may not sound like much but it is visible as they are quite close together. I've tried to use CSS to get around this but have now given up as it does not seem possible.
 
Would it be possible to remove the table layout and just output the OBJECT tag? Alternatively adding 'border="0" cellpadding="0" cellspacing="0"' seems to help.
 
I've attached an HTML mockup showing what I mean. I've no idea why I'm getting the red showing through on the images at the bottom but you can see the red on the right in the top one.
Many THanks
Hugh

file attachments

comments

hugh_forsyth wrote Aug 31, 2009 at 10:45 AM

This is not relevant to your web part but for anybody who's interested....

To remove the unwanted spacing from the bottom of images in table cells (shown in read in the sample HTML file):
Add this to your style sheet:
img {display:block;}

or

td img {vertical-align: bottom;}

Both seem to work and I'm not sure of the pros and cons of each. This is explained in great detail here: https://developer.mozilla.org/en/Images,_Tables,_and_Mysterious_Gaps

You'll almost certianly need to a bit more specific with your CSS targetting as that will affect most images on the site but that's the principal. I haven't tried this in Sharepoint yet and envisage much wailing and nashing of teeth trying to restrict it to just the images I want.

For the record I tried using the Sharepoint cont editor web part Rich Text Editor to set the alignment to "Bottom". This sets the image tag properties to "align=bottom" which does nothing as it's the TD from the web part we need to style

hugh_forsyth wrote Aug 31, 2009 at 10:48 AM

Cellspacing/cellpadding issues:

table{border-collapse:collapse; }

Also helps with this issue but does not seem to eliminate it.

wrote Feb 12, 2013 at 10:50 PM