We help IT Professionals succeed at work.

need to remove space in a table

d2fox
d2fox asked
on

Here is a simpler page, still with a spacing issue around the images.  I want them all to be displayed with no space in between.  I have managed to remove the space left to right, but not up and down.  How can I do that?

http://www.nethealthinteractive.com/copd/default9.asp
Comment
Watch Question

Commented:
You can always remove the table and use CSS or have the 4 images in just 1 cell.
RartemassLife Coach
CERTIFIED EXPERT

Commented:
I agree with jgsemo. Tables should only be used to display tabular data, not for layout. This avoids issues such as what you are experiencing.
Let us know if you require assistance in changing to a single cell of the table, for to use CSS for the layout.

Commented:
in the a tags add display: table-cell; to the style

why don't you use classes and write all the styling inside the tags?
The images width and height are not equal. Please slice it with the current dimension and check it.

test.html

Author

Commented:
so is there a good tutorial about how to just display without tables?  I need to put in rollover logic so certain arrows highlight at appropriate times.
Life Coach
CERTIFIED EXPERT
Commented:
You can markup using divs instead of a table, then layout via CSS.
Example HTML:
<div id="grid"><img id="topleft" src="blah1" /><img id="topright" src="blah2" /><img id="bottomleft" src="blah3" /><img id="bottomright" src="blah4" /></div>

Example CSS:
#topleft {
position:fixed;
/*size stuff, alignment settings etc go here to align to correct position*/
}
#topright {
float: right;
/*other size, and styling things*/
}
...

This way you specify the style of each image to align based on the one before it.
Ensure you set border, margin, and padding to 0 on all sides to get them to brush up against each other. You may also need to display:block; to align things correctly. This link will help with how to code positioning with CSS.
http://www.w3schools.com/css/css_positioning.asp

You already appear to have the mouse over stuff coded with javascript.

Explore More ContentExplore courses, solutions, and other research materials related to this topic.