0

I'm trying to display some images in a div table, but I keep getting the border on the bottom of each image. It's about 2-5 pixels.

I'd send an image, but I'm a new user.

I want to remove this border.

The image is 52 x 10 exactly.

I'm only in IE8 for this app.

edit: I'm doing a larger layout- I just boiled the code down to the single problem I'm having, which is the border at the bottom of the table. 

/*tables*/
.WorkFlowTableStyleA
{
    display: table;
    width: 10px; 
    border-collapse:collapse;
    border-style: none;  
}


/*rows*/
.WorkflowRowStyleA
{
    display: table-row;
    height: 52px;

}

/*arrow containers*/
.WorkflowCellArrowHolderA
{
    display: table-cell;
    width: 10px ;
}


<div class="WorkFlowTableStyleA">   
<div class="WorkflowRowStyleA">
<div class="WorkflowCellArrowHolderA" style="background-color: Black;">
<img src="../../Images/Flowchart/spacerTestTenByFiftyTwo.png" />

</div>
</div>
</div>

<div class="WorkFlowTableStyleA">   
<div class="WorkflowRowStyleA">
<div class="WorkflowCellArrowHolderA" style="background-color: Black;">
<img src="../../Images/Flowchart/spacerTestTenByFiftyTwo.png" />

</div>
</div>
</div>
Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
Vern Halen
  • 53
  • 1
  • 8
  • I can't say this with certainty, but it might just be the black background color in the
    around your image. Have you tried it without the line: style="background-color: Black;" ?
     – MadHenchbot Jan 09 '13 at 21:34
  • Oh yeah, I've definitely tried it without the 'background-color', still get the space between the tables. – Vern Halen Jan 10 '13 at 15:41
  • This: http://stackoverflow.com/questions/816343/why-will-this-div-img-not-center-in-ie8 I'm the junior dev here, the other dev had commented standards mode out for reasons she couldn't quite articulate. Everything works now. Thanks for the help, gentlemen. – Vern Halen Jan 11 '13 at 16:21

1 Answers1

1

MadHenchbot is on the money with where the "border" is coming from. It's not a border it's unfilled space in your div. (Change to style="background-color: Red") to verify that.

Good news is, since it sounds like the images are the size you want them already I think there's a quick fix:

/*tables*/
.WorkFlowTableStyleA
{
    display: table;
    /* get rid of width: 10px; */
    border-collapse:collapse;
    border-style: none;   
}


/*rows*/
.WorkflowRowStyleA
{
    /* get rid of display: table-row; */
    height: 52px;
}

/*arrow containers*/
.WorkflowCellArrowHolderA
{
    /* get rid of display: table-cell; */
    /* get rid of width: 10px; */
    height: 52px;                             <--- Add this to set the div height.
}

That did the trick for me. You may have to put width back in, but I'm guessing it's unnecessary. Also, unless you're building a layout I'm not sure why you need all the table/div stuff... It looks like it's just complicating things?

lostphilosopher
  • 4,361
  • 4
  • 28
  • 39
  • Thanks for the stab. It *is* a layout, but I did not post the whole table. Instead of having my first post on stackoverflow be a huge mountain of code- I figured I'd boil it down to the fundamental. And the fundamental problem is that when I do this table, I get a border at the bottom. – Vern Halen Jan 10 '13 at 15:43
  • Fair enough! Just checking. :-) But I take it ^ didn't work for you? Same problem or a variation? If it's still an issue - do you have the image online anywhere so we can work with the real thing? (NBD if no.) – lostphilosopher Jan 10 '13 at 15:52