www.webdeveloper.com
Results 1 to 5 of 5

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

  1. #1
    Join Date
    Jan 2008
    Posts
    6

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

    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

  2. #2
    Join Date
    Mar 2006
    Location
    Newcastle NSW Australia
    Posts
    4,033
    This may have something to do with it, but not sure :
    Code:
    <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:
    Code:
    <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:
    Code:
    .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.

  3. #3
    Join Date
    Jan 2008
    Posts
    6
    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?

  4. #4
    Join Date
    Mar 2006
    Location
    Newcastle NSW Australia
    Posts
    4,033
    Quote Originally Posted by miner2049er
    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.

  5. #5
    Join Date
    Jan 2008
    Posts
    6
    That was it! THANKS

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles