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).
Related
Why am I getting this strange padding, and how can I remove it?
<div style="border: 1px solid black;">
</div>
http://jsfiddle.net/uE9F6/1/
It's because the line-height is bigger than the image of the flag. Specify line-height:11px;. See this jsFiddle for more help.
For more information on this, see the W3C's information on the height of a line.
I have a <div> and I want to put the text 10px from bottom border of the `. However, it doesn't work for me. Following is the code.
<div id="title" style="height:35px;border-bottom:thin solid rgb(65,31,30);margin-left:14px;padding-bottom:10px;font-size:18px;font-weight:thicker">Hello, world!
</div>
remove your height:35px style. that contradicts what you are trying to do. it has a 35px height plus an additional 10px bottom padding.
check out this jsFiddle. i hope it makes sense to you.
I have experiences with this sort of stuff in the past. This is just the case in some browsers and especially if you had overflow-y: scroll; enabled in the style. Your syntax looks good and I have tried it. even with or without that semi-colon at the end, it would still work fine since you are styling it inside the div as an attribute itself.
The way I see it if this is not your entire code please be aware of overflow: scroll; it code be overwriting your style.
or try running it with other browsers.
or you could restructure your code to make sure the padding works like this:
<div id="title" style="height:35px;margin-left:14px;font-size:18px;font-weight:thicker">Hello, world!<div style="border-bottom:thin solid rgb(65,31,30);padding:10px"> </div>
</div>:
by just adding another div within that div
I know how to create a border, How do I fill in the rest inside the border with a different color? Here's what I have so far:
<div style="width:200px;height:100px;border:6px outset orange;">text</div>
Use
background:#fff
or any color;
and one more advise never use inline css for optimal output use external CSS
<div id="something">text</div>
#something
{
width:200px;
height:100px;
//likewise
}
Here you go: http://jsfiddle.net/XVDkS/
Explanation: it adds box shadows (at least 2 of them) after the border (with 0 blur). Manipulate the number of shadows & the width of them according to your need. You can as well use blurring, if required. Read the MDN article for more details on box-shadows.
It's a CSS3 solution, so old IE versions won't play nice (unless you do dark magics on it).
use the background property, for example:
background:#ccc;
which would leave your code looking like this:
<div style="width:200px;height:100px;border:6px solid orange; background:#ccc;">text</div>
<div style="width:200px;height:100px;border:6px outset orange;background:#000000">text</div>
use css background property
If you mean a background this will help
CSS
backgound:black;
HTMl with CSS
<div style="width:200px;height:100px;border:6px outset orange;background:black;">text</div>
you can use groove or ridge in place of outset,
See here is some examples for this on W3schools
http://www.w3schools.com/cssref/playit.asp?filename=playcss_border-style&preval=none
or if you want 2 borders and a different border then you try this
<div style="width:200px;height:100px;border:1px solid #000">
<div style="width:190px;height:90px;border:5px solid orange">
<div style="width:188px;height:88px;border:1px solid #000">
test
</div>
</div>
</div>
Demo is here:
http://jsfiddle.net/SPhec/
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'
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;">