Insert text into border

#native_company# #native_desc#

#native_cta#

This site is best viewed in a modern browser with JavaScript enabled.

Juliata

Hi! I have a question regarding this issue:

http://img23.binimage.org/df/8d/80/screenhunter_24_may._06_16.09.jpg

Right now I have created grey border around page, and I need to insert text (w/ link) into upper border field.

I am using Kompozer and Dreamweaver, and I have tried several times to insert text via Insert -> Form -> Text, but I can't put this form into the border, can anyone help me please?

jedaisoul

You cannot put text in a border, but there are various ways that you can put text in what appears to be a border.

Say you want to have a "border" of 50px around a box, with text in the upper "border", then set up two divs, the upper one with a background matching the body background (or not set). E.g.

<!DOCTYPE HTML>
<html>
<head>
<title>Border Text Demo</title>
<style>
* {
margin: 0;
padding: 0;
border: 0;
}
html {
background-color:#CCC;
}
body {
width: 100%;
height: 400px;
background-color: #999;
}
#upper {
height: 30px;
padding: 10px 0;
font-size: 24px;
text-align: center;
color: #000;
background-color: #999;
clear: both;
}
#mainarea {
height: 280px;
margin: 0 50px 50px 50px;
padding: 10px;
color: #FFF;
background-color: #F70;
}
</style>
</head>
<body>
<div id="upper">
This text appears to be in the border of the box below...
</div>
<div id="mainarea">
This is the main text area...
</div>
</body>
</html>

Juliata

Thank you, I have managed to apply your code to my html file; however, e-mail client doesn't recognize "background image." Is there a way to make it compatible w/ Outlook etc? Instead of image there is just blank space. Firefox reads it correctly, though. I have read that Outlook doesn't read several CSS options, and background image just seems to be one of them.

jedaisoul

I am not familiar with the Outlook client you refer to. HTML elements, by default, generally have a transparent background, so any color or image behind them can show though. If that is not the case with the Outlook client then there is nothing I can suggest to do about it.

Juliata

Thanks! I just want to specify that when I copy this code to create HTML e-mail, this part "background-color" simply disappears... I.e., the programme rejects it... I have no idea how to insert background image so that it would be visible.

jedaisoul

I have no experience of html emails, so I cannot comment.

paki250

I did it. It is very easy way to insert the text into border.

Juliata

Text into border... Yes, well, it turned out that what I needed was text on background image... I substituted background-color w/ background-image and it doesn't work... It is mentioned here that indeed background-image CSS is incompatible w/ Outlook.

jedaisoul

Juliata;1330751 wrote:
Text into border... Yes, well, it turned out that what I needed was text on background image... I substituted background-color w/ background-image and it doesn't work... It is mentioned here that indeed background-image CSS is incompatible w/ Outlook.

Or, more accurately, Outlook does not support the background image property! At least you have found the answer, and need not spend any more time trying to get Outlook to display a background image.

deathshadow

Ah, one little detail buried in the posts -- it's an E-mail.

Generally speaking, R-mails are VERY different from writing web pages, and that's what's biting you. As a rule of thumb, it's a bad idea to even MAKE styled e-mails as a lot of hosts use it as a spam filter. I know my setups all do because there is no legitimate excuse for someone sending me a legitimate e-mail to send one done with HTML.

That said, mail clients on the whole choke badly on HTML e-mails because their rendering engines usually haven't been updated since 1996 -- That's NOT a joke. On the whole they support HTML 3.2 BARELY, and CSS support is spotty if nonexistent. AS SUCH, trying to use CSS in a HTML e-mail is NOT GOING TO WORK reliably across all the different mail clients out there.

AS SUCH, to make a working HTML e-mail you have to dial the clock back to 1997 and write nothing but HTML 3.2 without CSS, and even then you'll want to check at least FIVE mail clients (Three webmail, outlook, thunderbird) to see if it actually works how you want.

Then of course there's the other thing biting you, your tools. Now I'm not saying that using anything more complex than a flat text editor is a waste of time, and I'm not saying that you can't learn anything from Dreamweaver aside from how not to build a site... No, wait... That's EXACTLY what I'm saying.

If you REALLY have your heart set on doing this, you should be working from a flat text editor, and I'd suggest using something like Oracle VirtualBox with Windows 98 installed in it to test in Nyetscape 4 and IE 5.0 (NOT 5.5, too new). If you can get it working in both of those WITHOUT using CSS, it will work in an e-mail.

But again, I wouldn't be wasting my time on that crap in the first place as again, I block them by default as do a lot of other people. HTML in e-mail was a dumb idea at the start, and it's not really viable given that all the mail clients (other than the now defunct Opera 12/earlier) haven't bothered updating their rendering engines in what is rapidly closing on two decades.

rtrethewey

If anyone wants more information about CSS support in Email clients, I found a site that has a pretty comprehensive chart that shows what works and where at http://www.campaignmonitor.com/css/. It includes the most popular desktop and mobile clients and claims to have been updated this month. These folks are in the mass Email business, so I'd be inclined to trust their information.

My reading of it is that you'll find broad support for basic text styling properties, borders, and background colors, and you're best off using inline styles since (apparently) GMail doesn't support embedded stylesheets. Everything else is hit-or-miss.

Juliata

deathshadow, thank you! Indeed, I have consulted a few more resources and found out that it is more efficient to use Notepad++ for creating & editing HTML. I have stumbled upon inconsistency among e-mail clients; if one engine renders style= etc correctly, the other does not. Since it is supposed to be newsletter for existing business clients, it is crucial to create "universal" code that would be rendered correctly by the most popular e-mail clients (including mobile clients since many use only their phones for communication purposes) so as not to scare them away by sending sth that looks totally ugly

As to the use of Dreamweaver... Isn't "what you get is what you see" the best approach? I mean, I am not by all means a pro in anything related to web design, but for the beginners wouldn't it be more useful to learn from Kompozer etc.? I mean, there are various tips on the net hot to create newsletter, and such programs seem to be on the top of the list.

rtrethewey Thank you! I have found the following: "Some email clients will ignore a background on the <body> tag, or one that’s set in your style sheet. Having a wrapping table around all your content and setting a bgcolor attribute on it will work around this issue." Alltough bgcolor allows to use only colors, i.e., you can't add link to image file to be used as background, right?... I mean, if using HTML 3.2. is the only option, I have to re-write the whole code b/c there are major differences between HTML 4.0 and 3.2, AFAIK.

Oh my, I remember Netscape Navigator... sigh Good ol' days. Right, if VirtualBox is my time machine to go back to 90s, then so be it. Thanks again! Can't wait for the results... I mean, if my boss assigned this task to ME, and he knows better, then I have to succeed, and I shall

rtrethewey

Right. It does look like there are quite a few Email clients that don't support the CSS 'background-image' property. Once you go beyond tables, images, and styled text, you're going to run into compatibility issues. That's not to say its impossible to create an attractive message. You just have to be aware of the limitations and do some testing.

deathshadow

Juliata;1331261 wrote:
As to the use of Dreamweaver... Isn't "what you get is what you see" the best approach?

Oddly enough no, because of the nature of what the web is. There's a saying a dearly departed friend of mine came up with: "This is the Internet, the only thing we know for certain is we do not know who will visit a website."

The simple fact is with the variety of default font sizes, screen sizes, font rendering capabilities -- What YOU see is almost guaranteed NOT to be what the visitor gets. Much less the rendering engines used by most WYSIWYGS don't even render like the real browser they are based on. DW is notorious for this since legacy versions were based on Presto (Opera's engine -- you'd never know it) and newer versions are based on webkit (which again, REALLY?). You can't trust the preview pane, and just because it works in the preview pane doesn't mean you still don't have to test it in at least eight browsers (IE 6, 7, 9, 11, Opera 12.17 and latest, latest FF, Chrome and Safari). Alt-tab F5 is your friend.

You also have the issue that what WYSIWYG's make for code is non-semantic inaccessible bloated trash. No automated tool seems to (nor do I think they ever can) do things like logical document structure and heading orders. It's why pretty much any site built using a WYSIWYG is absolute rubbish.

Though at the same time, we all have to start somewhere. Much to my own shame my first site from 17 years ago was built with Nyetscape Composer.

Honestly, for something like a newsletter -- I'd put it on your website, and send LINKS to it as the mail. Or at the very least, put it on the website as well as sending it, with a plaintext link before it "having trouble viewing this mail?"

If you do go the HTML mail route, be sure to send both HTML and plaintext in the mail. That's called "multi-part mime" which goes a little something like this:

<?php

$to = 'email@example.com';
$from = 'another@example.com';
$subject = 'NewsLetter';

$divider = uniqid('newsLetter');

$headers = ';

$message = '
This is a MIME encoded message.

--' . $divider . '
Content-type: text/plain;charset=utf-8


Your plaintext version of the e-mail goes here


--' . $divider . '
Content-type: text/html;charset=utf-8


<h1>Newsletter</h1>
<p>The HTML version goes here</p>


--' . $boundary;

mail('', $subject, $message, 'MIME-Version: 1.0
From: ' . $from . '
To: ' . $to . '
Content-Type: multipart/alternative;boundary=' . $divider .
'X-Mailer: PHP/'.phpversion());

?>

deathshadow

Oops, gah the lack of edit drives me nuts. Remove the $headers ='; line, left over cruft from my gutting it down.