[RESOLVED] Why single pixel gap in this rounded border?

[miner2049er]

I wonder if anyone can assist with the following...

Adapting the tutorial (link at foot of this message) my HTML table rounded border with 10 x 10 GIFs is showing a single pixel gap in one of the sides.

I've racked my brains to think what it could be but can't come up with anything.

All the code for the table cells are tight up together, and the GIFs are all the correct sizes.

If anyone can assist, that would be most appreciated.

Here's the link to the problematic HTML:

http://www.simobile.com/why/why.html

Thanks in advance!


http://www.webdevelopersnotes.com/ti...ml_tables.php3

[Centauri]

This may have something to do with it, but not sure :

<td background="left.gif"><img src="blank.gif" width="1" height="1" border="0" alt="..."></td>

Wht are you using tables and images in the html for this ? How about html:

<div class="box">
  <b class="tl"></b><b class="tr"></b><b class="bl"></b><b class="br"></b>
  <p>Why is there not a single pixel gap in the left border? Why is there not a single pixel gap in the left border? Why is there not a single pixel gap in the left border? Why is there not a single pixel gap in the left border?</p>
</div>

and css:

.box {
  width: 230px;
  padding: 10px;
  border: 1px solid #3E2318;
  position: relative;
}
.box b {
  position: absolute;
  width: 10px;
  height: 10px;
  font-size: 1px;
}
.box .tl {
  background: url(topleft.gif);
  top: -1px;
  left: -1px;
}
.box .tr {
  background: url(topright.gif);
  top: -1px;
  right: -1px;
}
.box .bl {
  background: url(bottomleft.gif);
  bottom: -1px;
  left: -1px;
}
.box .br {
  background: url(bottomright.gif);
  bottom: -1px;
  right: -1px;
}

Also has the advantage of only corner images needed.

[miner2049er]

Thanks for the quick reply.

It's in all HTML, as it is going out in an HTML email newsletter.

I'm not sure where the problem might be in your suggested area of:

<td background="left.gif"><img src="blank.gif" width="1" height="1" border="0" alt="..."></td>

That same code works at the tutorial I had mentioned, with the only change being the GIFs dropping from 16 to 10 pixels.

Does anybody else have any possible insights?

[Centauri]

I'm not sure where the problem might be in your suggested area of:

<td background="left.gif"><img src="blank.gif" width="1" height="1" border="0" alt="..."></td>

The blank.gif image is not transparent.

[miner2049er]

That was it! THANKS