CSS Style Sheet Question

  • I've not fiddled with CSS is a while, and I know someone out there knows this off of the top of their head.

    Putting together a very basic template to be used for an email campaign, so i need the html to look pretty before i fill it with content.

    using CSS, I'm doing the classic rounded corner border kind of thing using an html table.

    right now, it looks like this:

    somehow, I'm getting gaps/ border around my table cells that i don't want.

    what is the property I'm missing to remove thoes gaps? i thought it was margin, but I'm doing it wrong.

    for reference, my sample html is below:

    <html>

    <head>

    <title> New Document </title>

    <style TYPE="text/css">

    td{background-color: White;padding: 0; margin:0; margin:0 auto;}

    .template_style{display:table-cell;padding: 0; margin:0; margin:0 auto;}

    .logo_top_left{padding:0; margin:0; background:url(images/logo_top_left.png) no-repeat top left; height:23px;}

    .logo_top_right{padding:0; margin:0; background:url(images/logo_top_right.png) no-repeat top right;}

    .logo_top_bg{padding:0; margin:0 39px 0 27px; background:#FFF url(images/logo_top_bg.png) repeat-x top;height:23px;}

    .logo_left{padding:0; background:url(images/logo_left.png) repeat-y top left;}

    .logo_right{padding:0; background:url(images/logo_right.png) repeat-y top right;}

    .logo_pad{background:#FFF; margin: 0 19px 0 7px; padding:0 0 10px 10px;height:100%;}

    .ControlPanel{background:transparent url(images/cpanel_center.png) repeat-x bottom left; border:none;padding-bottom:10px;}

    .cpanel_left {background: url(images/cpanel_left.png) no-repeat bottom left;padding-left:21px;}

    .cpanel_right {background: url(images/cpanel_right.png) no-repeat bottom right;padding-right:33px;}

    </style>

    </head>

    <body>

    <table class="template_style">

    <tr>

    <td valign="top" align="left" class="logo_top_left"></td>

    <td valign="top" align="left" class="logo_top_bg"></td>

    <td valign="top" align="left" class="logo_top_right"></td>

    </tr>

    <tr>

    <td valign="top" align="left" class="logo_left"></td>

    <td valign="top" align="left" class="logo_pad">logo

    </td>

    <td valign="top" align="left" class="logo_right"></td>

    </tr>

    <tr>

    <td valign="top" align="left" class="logo_left"></td>

    <td valign="top" align="left" class="logo_pad">main

    </td>

    <td valign="top" align="left" class="logo_right"></td>

    </tr>

    <tr>

    <td valign="top" align="left" class="cpanel_left"></td>

    <td valign="top" align="left" class="ControlPanel"></td>

    <td valign="top" align="left" class="cpanel_right"></td>

    </tr>

    </table>

    </body>

    </html>

    Lowell


    --help us help you! If you post a question, make sure you include a CREATE TABLE... statement and INSERT INTO... statement into that table to give the volunteers here representative data. with your description of the problem, we can provide a tested, verifiable solution to your question! asking the question the right way gets you a tested answer the fastest way possible!

  • answering my own question, now that I've been caffeine infused:

    i was looking for the border-collapse:collapse; property, usually applied on the table tag.

    Lowell


    --help us help you! If you post a question, make sure you include a CREATE TABLE... statement and INSERT INTO... statement into that table to give the volunteers here representative data. with your description of the problem, we can provide a tested, verifiable solution to your question! asking the question the right way gets you a tested answer the fastest way possible!

  • Lowell not sure what you are developing in but make sure you specify the DOCTYPE or border-collapse can have some strange results.

    _______________________________________________________________

    Need help? Help us help you.

    Read the article at http://www.sqlservercentral.com/articles/Best+Practices/61537/ for best practices on asking questions.

    Need to split a string? Try Jeff Modens splitter http://www.sqlservercentral.com/articles/Tally+Table/72993/.

    Cross Tabs and Pivots, Part 1 – Converting Rows to Columns - http://www.sqlservercentral.com/articles/T-SQL/63681/
    Cross Tabs and Pivots, Part 2 - Dynamic Cross Tabs - http://www.sqlservercentral.com/articles/Crosstab/65048/
    Understanding and Using APPLY (Part 1) - http://www.sqlservercentral.com/articles/APPLY/69953/
    Understanding and Using APPLY (Part 2) - http://www.sqlservercentral.com/articles/APPLY/69954/

Viewing 3 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic. Login to reply