#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2004
    Location
    Alexandria, VA
    Posts
    187
    Rep Power
    19

    Hiding table cell border while using image overlay


    I have a web page shell that loads various content into different cells. The entire page is essentially a table. I have 4 graphic overlays that I want to impose on each cell to round the corners. I've tried doing it this way:

    CSS:
    Code:
    .LeftPanelTable {
        WIDTH: 182px;
        border-style: none }
    
    .LeftPanelCell {
        WIDTH: 160px;
        vertical-align: Top;
        border-style: none }
    
    .ActionOptionsPanel {
        background-color: #DDDDDD;
        color: #000000;
        font-family: verdana;
        font-size:  12px;
        border-style: none}
    
    #soft_corner_ul {
    background:url("http://www.fourfreedomsblog.com/images/corner_ul.gif") no-repeat top left}
    
    #soft_corner_ur {
    background:url("http://www.fourfreedomsblog.com/images/corner_ur.gif") no-repeat top right}
    
    #soft_corner_ll {
    background:url("http://www.fourfreedomsblog.com/images/corner_ll.gif") no-repeat bottom left}
    
    #soft_corner_lr {
    background:url("http://www.fourfreedomsblog.com/images/corner_lr.gif") no-repeat bottom right}
    HTML:
    Code:
    <table class="LeftPanelTable">
        <tr>
            <td class="ActionOptionsPanel">
    	    <div id="soft_corner_ul"><div id="soft_corner_ur"><div id="soft_corner_ll"><div id="soft_corner_lr">
    	        This is the table cell content
                </div></div></div></div>
            </td>
        </tr>
    </table>
    However, I still see a faint border around the cell, which spoils the effect of the rounded corners.

    If I change it like this:

    Code:
    .ActionOptionsPanel {
        background-color: #DDDDDD;
        background-image:url("http://www.fourfreedomsblog.com/images/corner_ul.gif");
        background-repeat: no-repeat;
        background-position: bottom right;
        color: #000000;
        font-family: verdana;
        font-size:  12px;
        border-style: none}
    Code:
    <table class="LeftPanelTable">
        <tr>
            <td class="ActionOptionsPanel">
    	    This is the table cell content
            </td>
        </tr>
    </table>
    then the border doesn't appear, but I don't know any way to do this with more than one image.

    Suggestions?

    Thanks...
  2. #2
  3. No Profile Picture
    Permanently Banned
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2008
    Posts
    31
    Rep Power
    0
    Just set border:0; on everything, not border-style.
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2004
    Location
    Alexandria, VA
    Posts
    187
    Rep Power
    19
    Thanks for the response, but that doesn't seem to make any difference.
  6. #4
  7. Classical Computing
    Devshed Novice (500 - 999 posts)

    Join Date
    May 2008
    Location
    Melbourne, Australia
    Posts
    891
    Rep Power
    106
    This will do it:

    Code:
    .ActionOptionsPanel {
        background-color: #DDDDDD;
        color: #000000;
        font-family: verdana;
        font-size:  12px;
        border-style: 0;
        padding: 0;}
    Simple is beautiful.
  8. #5
  9. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2004
    Location
    Alexandria, VA
    Posts
    187
    Rep Power
    19
    Originally Posted by Arem
    This will do it:

    Code:
    .ActionOptionsPanel {
        background-color: #DDDDDD;
        color: #000000;
        font-family: verdana;
        font-size:  12px;
        border-style: 0;
        padding: 0;}
    That did it.

    Thanks!

IMN logo majestic logo threadwatch logo seochat tools logo