I am trying to send an html email with an image border as
<p align="center">
<img src="images/pic1.jpg" width="443" height="148" align="middle"
style="border: 1px solid grey; padding:10px;" border="1"/>
</p>
However, the border just does not display in any of the email clients. How can i fix this?
Main problem is Microsoft Outlook, enclosing the image in a table seems to do the job.
It's a hassle to enclose every image, but dats em breaks:
<p align="center">
<table><tr><td style="border: 1px solid grey;">
<img src="images/pic1.jpg" width="443" height="148" align="middle"
style="padding:10px;"/>
</td></tr></table>
</p>
To be honest your in for a hard time using "p" tags. Tables will 100% be the way to go in this situation. I know I know, tables blow, but for email clients that use word as their html render cough outlook cough and ones like hotmail and gmail running html 1 (this might be a little bit of a strech but its somewhere around there), you never really know how things are going to turn out.
As for an answer to your question, try display:block on your image. Generally you want to put display:block on all your images as well as heights and width to insure there are no weird gaps between image slices.
According to this: http://www.campaignmonitor.com/css/ border should be working properly.
I would try two things:
First add the following to the image, which will also help with Gmail rendering bugs
display:block;
And also, maybe try:
border-top: 1px solid gray;
border-right: 1px solid gray;
border-bottom: 1px solid gray;
border-left: 1px solid gray;
a little bit off topic but mailchimp has a great tool for translating a normal HTML layout with seperate CSS classes into an inline CSS version
http://beaker.mailchimp.com/inline-css
and also a great tutorial how to code HTML emails the right way
http://kb.mailchimp.com/article/how-to-code-html-emails/
and regarding your CSS problem.
Try wrapping the image in a table cell and give the cell the border.
Unfortunately with HTML E-mails, tables are your friend, yet again.
Have fun
try changing the color either to it's value, #808080 or it's properly spelled version 'gray'
Related
I have used the <hr> tag to separate the rows, which is showing double lines in outlook emails.
But I want just a single line to be displayed. How can I rectify this?
I have used the following code
<hr style="border:none;border-bottom:1px solid #0a0a0a;box-shadow:none;margin-bottom:0;">
All answers appreciated.
Adding outline:none; might remove the double line issue in outlook emails.
<hr style="border:none;outline:none;border-bottom:1px solid #0a0a0a;box-shadow:none;margin-bottom:0;"/>
Or, you can remove outlines, borders and give a height and background color as:
<hr style="border:none;outline:none;height:1px;background:#0a0a0a;box-shadow:none;margin-bottom:0;"/>
You can use a different way.
<div style="border-top: 1px dotted #999999;"> </div>
For best cross-email compatibility, I use border. You can do that on the <td>, or other block level element like <p>.
Here, I'd use a paragraph like so:
`<p style="border-top:1px solid #0a0a0a;line-height: 0;font-size:0;margin:10px 0;"> </p>`
Adjust the margin to what you need. The line-height and font-size are needed so that there is not an additional space caused by the "text" (non-breaking space).
I'm working on a new HTML page and I want to use a table-less layout. Bear in mind that what follows here is only part of the page, but I think it paints a clear picture of what I'm trying to do.
The HTML below is meant to render six cells with text inside. I want the cells to be sized appropriately to contain the text inside.
The problem I'm having is that the borders are drawn incorrectly. In both IE and Firefox, I see two problems:
1) One of the borders is drawn outside the table.
2) The borders between the cells in the first row are drawn incompletely.
<!DOCTYPE html>
<html>
<head>
<style>
html
{
}
.reviewRow
{
clear:both;
}
.reviewBlock
{
float:left;
border-top: 1px solid #444;
border-left: 1px solid #444;
}
.rightBorder
{
border-right: 1px solid #444;
}
.bottomBorder
{
border-bottom: 1px solid #444;
}
</style>
</head>
<body>
<div class='reviewRow'>
<div style="width:200px;" class='reviewBlock'>
THIS TEXT IS MUCH LONGER THAN THE TEXT IN THE OTHER CELLS
</div>
<div style="width: 225px" class='reviewBlock'>
ABC
</div>
<div style="width: 100px" class="reviewBlock rightBorder">
December 25, 2012
</div>
</div>
<div class='reviewRow bottomBorder'>
<div style="width:300px;" class='reviewBlock'>
Hello, World!
</div>
<div style="width: 125px" class='reviewBlock'>
123
</div>
<div style="width: 100px" class="reviewBlock rightBorder">
May 1, 2013
</div>
</div>
<div style='clear:both;'></div>
</body>
</html>
Don't go what others say, that don't make layouts using tables, but when it comes to tabular data and if you use div's for making a table doesn't make any sense to me, just don't use tables for designing layouts, but YOU SHOULD USE IT FOR TABULAR DATA
Still if you want to use you can refer this
By the way, to answer the question... You can use display:table, table-cell and table-row (in CSS3)
But I agree with Mr. Alien : just use tables for tabular data.
See the height of html elements are computed based on the content inside them unless you explicitly specify it.
Your second div has taken only the height necessary to show ABC and hence the border showed up only that much. To fix this you must specify a certain height to each of the div so that they appear just as you want.
If you are trying to show data in a tabular manner just use tables. They are there for that purpose only. You can obviously style them in order to make them better looking.
If you're trying to do this for tabular data, then by all means use a table that's what it's there for. Not doing so it about like trying to use Photoshop to make a spreadsheet when Excel would be the better tool.
You can change the number of columns a cell takes up by using the colspan attribute. By default, of course, a cell takes up 1 column (colspan="1"), but if you need it to take up more, you simply change the number. You can do the same thing for rows with rowspan.
I'm trying to make a simple progress bar using the width property of an HR representing percent complete. I did these years ago but for some reason I can't seem to make this one look right. The website uses tables so I am placing the bar within a table cell. I'm open to doing it with pure css but I would like this to be light as in a few lines of code as there is a lot of other stuff on this page that has to load quickly.
I can get the rule to display a nice solid bar.
<td width=200 style="border: 2px solid silver;padding:none"><hr style="color:#c00;background-color:#c00;height:15px; border:none;" align="left" width=50% /></td>
where the percentage complete is set on the server side with php. This is not a dynamic bar where polling is required. Just one that represents percentage of a profile that is complete.
Ideally, I'd like the bar to fill a percentage of the cell equal to that completed so that the solid bar shows what percent is done and the white space to the right what part remains. However, I can't get a nice looking rule around the whole cell for the bar to fill a portion of. Instead there is a lot of space around the bar. I've tried setting the padding to none but that doesn't seem to work.
Here is a jsfiddle.
http://jsfiddle.net/GqrnC/
Thanks for any suggestions.
You have to remove the margins from the <hr> (add margin: 0 to its styles) to get rid of the extra space: http://jsfiddle.net/GqrnC/1/
<table>
<tr>
<td width=200 style="border: 2px solid silver;padding:none">
<hr style="color:#c00;background-color:#c00;height:15px; border:none;
margin:0;" align="left" width=50% />
</td>
</tr>
</table>
However, I agree with the comments above, I don't see any reason to use an <hr> instead of a <div> for this. The <hr> has the semantics of a "separator", which is not the case here. A div has neutral meaning.
Does this fit your needs better: http://jsfiddle.net/GqrnC/16/
You should really use <div> instead of a <hr> since a <div> is a structural element.
HTML
<div class='outer'>
<div class='inner'>
</div>
</div>
CSS
.outer{
border: 2px solid silver;
width: 200px;
}
.inner{
background-color: #c00;
width: 50%;
height: 5px;
}
Alternatively, I would recommend looking into the jQuery UI progress bar. It is built exactly for this case and looks really great (plus if you want to later, you can update it using AJAX).
I'm very new to YUI. And I used this tool to generate some css grid layouts. But even though I get the code, when rendered in browser I can't able to see the borders at all. But others(like alignment, the number of columns..) are correct.
How do I add border to the YUI generated code?
Thanks in advance
You can add a border to YUI2 grids by adding styles to the yui-u class
.yui-u {
border: 1px solid black;
}
However, borders don't play very nice with YUI2 grids because it relies on percentage based widths for columns, so you'll have to insert another div inside each unit and add a border to that div:
<style>.yui-u-inner { border: 1px solid black; }</style>
<div class="yui-g">
<div class="yui-u first">
<div class="yui-u-inner"></div>
</div>
<div class="yui-u">
<div class="yui-u-inner"></div>
</div>
</div>
There may be more elegant solutions.
You should consider moving to YUI3. YUI2 is only on maintenance mode and there is no new development besides basic bug fixing. YUI3 is quite active and in particular its CSS grids are a lot simpler to use.
What do you call this "gray line" in HTML, where you can use like a separator?
<hr /> is this what you mean?
this is called a horizontal rule and can be created using the following:
<hr />
However, the fact that the line is gray is online its default behaviour. Using CSS you can style it as you like.
I assume you're talking about the <hr /> element. HR stands for horizontal rule.
You're probably referring to <hr/>, which is a Horizontal Rule.
<hr />, which is horizontal rule
It doesn't need to be gray either as it can take styles just like anything else, although how these behave in different browsers can be tricky.
Do you mean simply a nicely formatted | character?
Or perhaps a horizontal rule? <hr />
One thing I always found was CSS control over an HR tag is very limited, I always tend to go for a div defined in my CSS as being long and thin.
you can customize the <hr/> by
<hr style="margin: 0px 5em; border: 1px solid grey; border-radius: 1em; background-color: gray;">