I'm designing an HTML email template, which forces me to use tables. In the code below, I'm having trouble (1) removing the spacing below the placeholder image and (2) removing the space between the image and the caption. Here's a screenshot of how it looks in Chrome 15 on OS X 10.6.8.:
<!DOCTYPE HTML>
<html>
<head>
<title>Email Template</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
</head>
<body>
<table style="border: 1px solid #b50b32; margin: 30px auto; width: 600px; padding: 0; border-spacing: none;" cellspacing="0" cellpadding="0">
<tr>
<td id="main" style="background-color: #f2f2f2;">
<h2 style="color: #b50b32; font-family: 'Lucida Grande', Arial, sans-serif; font-size: 22px; font-weight: normal; padding: 15px; margin: 25px 0; background-color: #fff;">Major headline goes here</h2>
<table class="main-story-image" style="float: left; width: 180px; margin: 0 25px 25px 25px;">
<tr><td style="padding: 0; border: 1px solid red;"><img src="placeholder.jpg" width="180" height="130" style="border: none; margin: 0; padding: 0;" alt="Placeholder" /></td></tr>
<tr><td style="padding: 0; border: 1px solid red;"><p class="image-caption" style="background-color: #bebebe; color: #333; font-family: 'Lucida Grande', Arial, sans-serif; margin: 0; padding: 5px;">Caption.</p></td></tr>
</table><!--/.main-story-image-->
<p style="margin: 0 50px 25px 25px;">Lorem ipsum dolor sit amet.</p>
<p>Click here to read more </p>
<div style="clear: both;"></div>
</td><!--/#main-->
</tr>
</table>
</body>
</html>
The red borders are there only to show the outlines of the cells. I don't want them there in the final version.
Add border-collapse: collapse into the style attribute value of the inner table element. You could alternatively add the attribute cellspacing=0 there, but then you would have a double border between the cells.
I.e.:
<table class="main-story-image" style="float: left; width: 180px; margin: 0 25px 25px 25px; border-collapse: collapse">
It looks like the DOCTYPE is causing the image to display as an inline element. If I add display: block to the image, problem solved.
I had a similar problem. This helps me across main email clients.
Add:
attributes cellpadding="0", cellspacing="0" and border="0" to tables
style border-collapse: collapse; to tables
styles padding: 0; margin: 0; to each element
and styles font-size: 0px; line-height: 0px; to each element which is empty
You have cellspacing="0" twice, try replacing the second one with cellpadding="0" instead.
If you see table class it has border-spacing: 2px; You could override table class in your css and set its border-spacing: 0px!important in table; I did it like
table {
border-collapse: separate;
white-space: normal;
line-height: normal;
font-weight: normal;
font-size: medium;
font-style: normal;
color: -internal-quirk-inherit;
text-align: start;
border-spacing: 0px!important;
font-variant: normal; }
It saved my day.Hope it would be of help. Thanks.
Nothing has worked. The solution for the issue is.
<style>
table td {
padding: 0;
}
</style>
Used font-size:0 in parent TD which has the image.
I had a similar problem and I solved it by (inline)styling the td element as follows :
<td style="display: block;">
This will work although its not the best practice. In my case I was working on a old template that had been styled using HTML tables.
Hi as #andrew mentioned make cellpadding = 0, you still might have some space as you are using table border=1.
Put display:block on the css for the cell, and valign="top" that should do the trick
If the caption box is gray then you can try wrapping the image and the caption in a div with the same background color of gray---so a "div" tag before the "tr" tag...This will mask the gap because instead of being white, it will be gray and look like part of the gray caption.
Related
I have a table.matrix in a div.matrix-wrapper.
The whole thing shall be centered in a bigger div.
I only achieved this by adding display: table; margin: 0 auto; to the wrapper.
(Adding the auto margin to the table is not an option, because of the gray border.)
On its own, the result looks the way I expect. (left)
But when I place it within a table, It looks like the wrapper has a padding. (middle)
When I remove display: table; from the wrapper, the pseudo padding goes away,
but then the centering does not work anymore. (right)
(External links removed.)
Based on the answer given by Alohci, I added this simplified example:
.green {
width: 80px;
height: 50px;
border: 2px solid #0d0;
}
.red {
display: table;
margin: 0 auto;
border: 2px solid red;
}
.blue {
width: 20px;
height: 20px;
margin: 0;
border: 2px solid yellow;
background-color: blue;
}
table {
border: 3px solid black;
border-spacing: 5px;
margin: 20px 0;
}
table td {
border: 3px solid gray;
color: gray;
padding: 5px;
}
<h2>plain boxes</h2>
<p>The red box wraps directly around the blue box with the yellow border.</p>
<div class="green">
<div class="red">
<p class="blue"></p>
</div>
</div>
<h2>boxes in table</h2>
<p>The red box inherits border-spacing from the surrounding table.</p>
<table>
<tr>
<td>
<div class="green">
<div class="red">
<p class="blue"></p>
</div>
</div>
</td>
</tr>
</table>
<h2>plain table</h2>
<table>
<tr>
<td>plain</td>
<td>table</td>
</tr>
</table>
border-spacing and border-collapse inherit. The wrapping table has
border-spacing: 2px;
border-collapse: separate;
applied to it through the user-agent stylesheet, so these values are inherited by your div.matrix-wrapper and have effect when it's given display:table.
To remove the "padding", just set the div.matrix-wrapper to border-spacing: 0px.
I want to use CSS for buttons. For some buttons I use input elements, for other - links.
For buttons with short text I want to set min-width. For all buttons I want align text to center and set padding. Also somewhere on portal table layout is used.
Code below looks good in FF, but not in IE7:
Incorrect text align in inputs
Something bad happens with 'a' when it is in table
I know that there is problem with min-width in IE7 but it should works when 'display: inline-block' is set. Also I remember that padding is not included to width, but I can't explain what I see.
The only way I see is add class "btn-short" with fixed width and remove min-width from common button. Is it best solution or there are some fixes for min-width for IE7?
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
input.btn {
height: 26px;
display: inline-block;
min-width: 80px;
overflow:visible;
}
a.btn {
height: 19px;
display: inline-block;
min-width: 60px;
background: none repeat scroll 0 0 #008000;
}
.btn {
background: none repeat scroll 0 0 darkblue;
color: #FFFFFF;
font-family: Verdana, Tahoma, sans-serif;
font-size: 14px;
padding: 4px 10px 3px;
text-align: center;
text-decoration: none;
border: none;
white-space: nowrap;
}
td {
border: 1px solid #000000;
}
</style>
</head>
<body>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<input type="submit" value="Search" class="btn"/>
</td>
<td> </td>
<td>
<input type="button" value="Clear" class="btn"/>
</td>
</tr>
</table>
<br/>
<input type="submit" value="Search" class="btn"/><br/><br/>
<input type="button" value="Clear" class="btn"/><br/><br/>
<input type="button" value="Change Default Values" class="btn"/><br/><br/>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
Search
</td>
<td> </td>
<td>
Clear
</td>
</tr>
</table>
<br/>
Search<br/><br/>
Clear<br/><br/>
Change Default Values<br/><br/>
</body>
</html>
inline-block doesn't work on IE7, you need to trigger hasLayout by using zoom: 1; including display: inline to fake the display-inline effect:
input.btn {
height: 26px;
display: inline-block;
*display: inline;
*zoom: 1;
min-width: 80px;
}
a.btn {
height: 19px;
display: inline-block;
*display: inline;
*zoom: 1;
min-width: 60px;
background: none repeat scroll 0 0 #008000;
}
FYI: The star-hack is used for IE 6/7.
I have this problem than could not figure out why. The background color, background image did not fill in the whole css box model no matter what I adjust it.
http://imageoneads.com/kmplumbing/plumbing.htm
Could it be some css specific rule overlapped somewhere in my codes?
I would appreciate if someone could help.
Thanks
David
Try removing background-color: #F9F0D3; from plumbingText2.
If you are tying to hide the background use:
#plumbingText2 {
background-color: #F9F0D3;
border: medium none;
float: left;
font-family: Arial,Helvetica,sans-serif;
font-size: 12px;
margin: 0;
padding: 0;
position: relative;
vertical-align: top;
width: 100%;
}
and add valign="top" to your <td>:
<td valign="top" height="" colspan="2" rowspan="3"> <div id="plumbingText2">
Another option is to leave out the valign tag and use:
#plumbingText2 {
background-color: #F9F0D3;
font-family: Arial,Helvetica,sans-serif;
font-size: 12px;
padding-bottom: 10px;
padding-top: 15px;
}
and set the style on the <ul>:
<ul style="border: medium none; margin: 0;">
<!DOCTYPE html>
<html>
<head>
<title>MyTitle</title>
<style type="text/css">
body
{
background-image:url('images/my.png');
/*width:100%;*/
height:100%;
background-repeat:no-repeat;
background-size:100%;
/*background-position:0,0,0,0px;
background-position:center;*/
margin: 0;
padding: 0;
}
html
{
height: 100%;
}
</style>
</head>
<body>
<table cellpadding="0" cellspacing="0"
style="height:100%; width: 100%; border-collapse: collapse; background-color: Red; border-color:Yellow;">
<tr style="background-color: Green;">
<td style="background-color: Blue; text-align: center; vertical-align: bottom; padding-bottom:0px;">
<div style="margin: 0px 0px 0px 0px; background-color:Silver;">
<button type="submit">Some text</button>
<p style="">Another text</p>
</div>
</td>
</tr>
</table>
</body>
</html>
FF4. The window is blue, it means td fills the whole window. The div has zero margins, td has zero paddings. Nevertheless, there is a blue rectangle between the div and the bottom edge of the window. How to avoid it? Margin-bottom: -16px; is not an option.
Thank you.
The problem is with the p element - specifically its margin-bottom.
Collapsing margins are the reason this is happening:
http://reference.sitepoint.com/css/collapsingmargins
http://www.w3.org/TR/CSS2/box.html#collapsing-margins
You can fix it in this instance with overflow: hidden on the div which is the parent of the p.
Your code: http://jsbin.com/enote5
Your code with the fix: http://jsbin.com/enote5/2
(or you could just remove the margin on the p, if you like)
What I want is to have a centered content column that has a bg with a long vertical gradient. It will most likely extend past the browser, however I don't want it to create scrollbars. I want it to act as if it were like the body background where it continues and is only revealed if the browser is larger or there is more content.
Looks like you need something like this. My example used tables, but you can try to replace it with div layout.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
<title>aruseni</title>
<style type="text/css">
body {
font-size: 14px;
font-family: arial, helvetica, sans-serif;
color: #000;
background-color: #9b9b9b;
}
html, body{
margin:0;
padding:0;
height:100%;
border:none
}
a, a:link {
font-weight: bold;
color: #000;
}
a:visited {
font-weight: bold;
color: #444;
}
img {
border: 0;
}
table.site {
border: 0;
padding: 0;
border-spacing: 0;
margin: 0 auto;
width: 80%;
height: 100%;
min-width: 700px;
}
tr {
vertical-align: top;
}
td {
padding: 0;
}
td.left_side {
width: 200px;
}
td.right_side {
width: 200px;
}
td.content {
padding: 10px;
background-color: #fff;
background-image:url('gradient-1x2000.png');
background-repeat: repeat-x;
width: 200px;
}
</style>
</head>
<body>
<table class="site">
<tr style="padding: 0px;">
<td class="left_side"> </td>
<td class="content">
<p>Your contents go here. :)</p>
</td>
<td class="right_side"> </td>
</tr>
</table>
</body>
</html>
The gradient here is an image with 2000 height and 1 weight. The gradient starts in the top, and if the browser’s height is more than 2000 pixels (oh, really?), as “background-color: #fff;” specifies, the white colour is rendered.