1

I have a very similar question to the one asked at CSS width/height of IMG and TD. The main difference being, that the solution proposed was to define the table dimensions in the css. This solution won't work for me because every td is different.

The html for this was generated by Adobe when we made an image using slices. So each table cell is defined to be the exact same size as the image slice it contains. The image is very complex so we cannot possibly do it by hand.

When we load the Adobe-generated html into a browser, it works correctly, however, when we integrate it into our existing project the td elements change dimension. Inspecting them using development tools shows there is both height and width added, but checking all the style elements (including inherited elements), we cannot see any padding, margins or borders. Even if we explicitly define the td to the same width and height as the image it contains, we still get the extra space.

Here are the styles that Firebug tells us are affecting the td. They are:

element.style {
   visibility: visible;
   margin: 0;
   padding: 0;
}

body {
   font-size: 12px;
   color: #3c1a1a;
   font-family: Georgia;
}

.slide {
   list-style: disc outside none;
}

.TL {
   border-collapse: separate;
   background: none repeat scroll 0 0 transparent;
   border: 0 none;
   border-spacing: 0;
}

And here are the styles affecting the img (repeating a lot of the td styles because of inheritance):

element.style {
   visibility: visible;
}

body {
   font-size: 12px;
   font-family: Georgia;
   color: #3c1a1a;
}

.slide {
   list-style: disc outside none;

.TL {
   background: none repeat scroll 0 0 transparent;
   border: 0 none;
   padding: 0;
   border-collapse: separate;
}

Here is a sample of the Adobe-generated html:

<table class="override" id="Table_02" width="470" height="628" border="0" cellpadding="0" cellspacing="0">
   <tr>
     <td colspan="15" style="padding: 0px; margin: 0px;">
        <img class="TL" src="Images/Map1/map/Interactive-Map_01.gif" width="449" height="56" alt="Location of Cairo">
     </td>
     <td>
        <img class="TL" src="Images/Map1/map/spacer.gif" width="1" height="56" alt="just a spacer">
     </td>
   </tr>

I cannot for the life of me see how these rules could be adding the extra dimensions, but they are undeniably there, and our cool interactive map has big gaps in it. Can anyone suggest why this extra space might be adding itself to our td elements?

Thanks so much in advance. Kate

Community
  • 1
  • 1
Kate-at-UofI
  • 11
  • 1
  • Humm, i need a LIVE example to help you more. Try adding .override td {padding:0;margin:0} to your .css file. – Milche Patern Aug 01 '13 at 21:48
  • have you tried adding `border-collapse:collapse;` to your table? And a live example / jsfiddle will indeed be necessary to figure this one out... – Pevara Aug 01 '13 at 21:51
  • Is the extra space vertical, horizontal or both? Isn't it the problem described here: https://developer.mozilla.org/en-US/docs/Images,_Tables,_and_Mysterious_Gaps? – Ilya Streltsyn Aug 02 '13 at 00:47
  • Hi all, thanks for your comments. I will try the override and the border-collapse. The extra space is both vertical and horizontal. Thanks for that link, Ilya. I will try setting the elements to block. After I've tried all these things if I'm still tearing my hair out I will put up a fiddle. Again, thank you all for weighing in and I will let you know. – Kate-at-UofI Aug 02 '13 at 14:54

0 Answers0