February 16, 2012 at 6:36 am
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
February 16, 2012 at 6:52 am
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
February 16, 2012 at 7:12 am
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