Bordered tekst

Text-stroke is part of the CSS3 recommendations but so far, only Safari has implemented it.

The only way I can think you could do this would be to put every letter inside its own span, significantly bloating the html, and styling the span.

Like this:

Your Page Title Here

html,body,p,div,img,h1,h2,h3,h4,li,ul,ol,dl,dd,dt,form,table,td,tr{
margin:0px;
padding:0px;
border:0px;
border-collapse:separate;
border-spacing:0px;
}
input,select{
margin:0;
padding:0;
}
body{
font-family:verdana,arial,sans-serif;
font-size:100.1%;
}
strong,b{
font-weight:bold;
}
p{
font-size:90%;
line-height:1.1em;
}
p.testtext{
margin:5px;
}
p.testtext span{
display:inline-block;
float:left;
margin-right:2px;
border:1px solid black;
line-height:1.1em;
}

Trevor

I am really glad I get some response here, at different forums I've tried to get the answers, but no succces.

^^ I don't really understand your css. This is mine (for the menu, where I want the border around the letters)

a.mainlevel:link, a.mainlevel:visited {
font-weight: bold;
align: right;
text-align: right;
text-shadow: #000000;
}
a.mainlevel:hover {
font-weight: bold;
align: right;
text-align: right;
}
a.mainmenu:hover {
font-weight: bold;
align: right;
text-align: right;
}
a.sublevel:hover {
font-weight: bold;
align: right;
text-align: right;
}
a.sublevel:link, a.sublevel:visited {
font-weight: bold;
align: right;
text-align: right;
}

So... How do I make the border than?

(I'm a beginning user of CSS, sorry )

Could I see the full page html and the whole css, or a link to it would do?

complete css:

BODY {
margin : 0px 0px 0px 0px;
background-color : #FFFFFF;
color : #000000;
background-color: #F8F8FF;
scrollbar-base-color: #778899;
}
td, tr, p, div {
font-family : Verdana, Arial, Helvetica, sans-serif;
font-size : 11px;
color : #333333;
}
ul {
margin : 0px 0px 0px 0px;
}
hr {
background : #CCCCCC;
height : 1px;
width : 100%;
}
.title {
font-family: sans-serif;
font-size: 24px;
font-weight: bold;
color : #7B8DA1;
}
.pathway {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #000000;
}
a.pathway:link, a.pathway:visited {
color : #000000;
font-weight : normal;
}
a.pathway:hover {
color : #000000;
font-weight : normal;
text-decoration : underline;
}
/* --Default Class Settings-- */
a.mainlevel:link, a.mainlevel:visited {
font-weight: bold;
align: right;
text-align: right;
}
a.mainlevel:hover {
font-weight: bold;
align: right;
text-align: right;
}
a.mainmenu:hover,{
font-weight: bold;
align: right;
text-align: right;
}
a.sublevel:hover {
font-weight: bold;
align: right;
text-align: right;
}
a.sublevel:link, a.sublevel:visited {
font-weight: bold;
align: right;
text-align: right;
}
table.moduletable {
margin: 0px 0px 0px 0px;
width: 95%;
margin-left: 2px;
}
table.moduletable th {
font-weight: bold;
background-image: url(/images/stories//kop.gif);
text-align: left;
width: 13%;
height: 10px;
}
table.moduletable td {
font-weight: bold;
background-image: url(/images/stories//kop.gif);
text-align: left;
width: 13%;
height: 10px;
}
.poll {
font-family : Arial, Helvetica, sans-serif;
font-size : 10px;
color : #666666;
line-height : 14px;
}
.sectiontableheader {
background-color : #CCCCCC;
color : #7B8DA1;
font-weight : bold;
}
.small {
font-family : Verdana, Arial, Helvetica, sans-serif;
font-size : 10px;
color : #3366C0;
text-decoration : none;
font-weight : medium;
}
.smalldark {
font-family : Verdana, Arial, Helvetica, sans-serif;
font-size : 10px;
color : #000000;
text-decoration : none;
font-weight : normal;
}
.contentheading, .componentheading {
font-family : Verdana, Arial, Helvetica, sans-serif;
font-size : 11px;
font-weight : bold;
color : #0085C7;
text-align : left;
}
.createdate {
font-family : Arial, Helvetica, sans-serif;
font-size : 10px;
color : #0084C7;
text-align : left;
}
.button {
font-family : Verdana, Arial, Helvetica, sans-serif;
font-style : normal;
font-size : 10px;
font-weight : bold;
background-color : #cccccc;
color : #000000;
border : 1px solid #999999;
}
.inputbox {
font-family : Verdana, Arial, Helvetica, sans-serif;
font-size : 10px;
color : #000000;
background-color : #FFFFFF;
border : 1px solid #999999;
}
a:link, a:visited {
font-size : 11px;
color : #000000;
text-decoration : none;
font-family : Verdana, Arial, Helvetica, sans-serif;
}
a:hover {
color : #000000;
text-decoration : underline;
}
/* For content item titles that are hyperlink instead of Read On */
a.contentpagetitle:link, a.contentpagetitle:visited {
font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
font-size: 13px;
font-weight: bold;
color: #000000;
text-align:left;
}
a.contentpagetitle:hover {
font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
font-size: 13px;
font-weight: bold;
text-align:left;
color: #7B8DA1;
text-decoration: underline;
font-weight: bold;
}
a.category:link, a.category:visited {
color : #333333;
font-weight : bold;
}
a.category:hover {
color : #7B8DA1;
}
/* Styles for dhtml tabbed-pages */
.ontab {
background-color: #ffae00;
border-left: outset 2px #ff9900;
border-right: outset 2px #808080;
border-top: outset 2px #ff9900;
border-bottom: solid 1px #d5d5d5;
text-align: center;
cursor: hand;
font-weight: bold;
color: #FFFFFF;
}
.offtab {
background-color : #e5e5e5;
border-left: outset 2px #E0E0E0;
border-right: outset 2px #E0E0E0;
border-top: outset 2px #E0E0E0;
border-bottom: solid 1px #d5d5d5;
text-align: center;
cursor: hand;
font-weight: normal;
}
.tabpadding {
}
.tabheading {
background-color: #ffae00;
text-align: left;
}
.pagetext {
visibility: hidden;
display: none;
position: relative;
top: 0;
}
/* for modifying {moscode} output. Dont set the colour! */
.moscode {
background-color: #f0f0f0;
}
/* Text passed with mosmsg url parameter */
.message {
font-family : Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
font-size : 10pt;
color : #ff6600;
text-align: center;
}
/* custom stuff */
.container {
border: solid;
border-width: 1px;
border-color: #efefef;
background-color: White;
}
.boxes {
border: solid;
border-color: #efefef;
border-width: 1px;
}

and HTML:

<?php defined( '_VALID_MOS' ) or die( 'Direct Access to this location is not allowed.' ); $iso = split( '=', _ISO ); echo '<?xml version="1.0" encoding="'. $iso[1] .'"?' .'>'; ?>

<?php if ( $my->id ) initEditor(); ?>
/>
<?php mosShowHead(); ?>
<?php echo " " ; ?>
<?php echo "" ; ?>
<?php echo "" ; ?>












<?php mosLoadModules ( 'user1' ); ?>
<?php mosPathWay(); ?>

 

<?php mosLoadModules ( 'left' ); ?>


<?php mosMainBody(); ?>
<?php mosLoadModules ( 'right' ); ?>

 



 


 
 

It is not a public site, So I can't provide u with an URL

Hi

The css has this property:

align: right

which does not exist, so delete these.

You need to view the page in your local browser, and then view the code, and copy and paste THAT html here, not the php stuff!

Trevor

ok i've deleted that (align thing)

this is the html:

<?xml version="1.0" encoding="utf-8"?>

Home / Nieuws - Intranet

 

Home / Nieuws

Telefoonlijst Personeel PINGO OR

Lotto genomineerd voor 'Dagblad Goud'

Written by Administrator
  

Feb 13, 2007 at 12:44 PM

Lotto is, samen met 9 andere adverteerders genomineerd voor de publieksprijs 'Dagblad Goud'. De vraag is natuurlijk of wij gaan winnen. Nu hebben we dat deels in eigen hand, omdat het een publieksprijs is. Iedereen kan namelijk zijn stem uitbrengen. Op zaterdag 10 februari verschijnt de overzichts-advertentie met alle 10 de nominaties. Mensen kunnen stemmen via telefoon, sms of internet. Dat laatste kan nu al: ga naar www.dagbladgoud.nl en stem op de advertentie van Lotto. Stemmen kan tot en met 14 februari.

 



 

 
 

A quick thing, delete the xml declaration at teh top, it will throw IE6 into quirks mode (it is valid, HTML tidy always puts it in, but I wouldn't use it).

I will take a look at the code.

thnx I'm waiting on a reply

Ok

Find the first menu item (Home / Niews):

Home / Nieuws

and change this to:

Home  / Nie uws

Now you can see the bloat!

Now add margin: 5px as follows:

a.mainlevel:link, a.mainlevel:visited { font-weight: bold; text-align: right; margin:5px; }

And new css:

a.mainlevel span{ display:inline-block; float:left; margin-right:2px; border:1px solid black; line-height:1.1em; }

Some adjustment to menu item widths will be needed!

Sorry, but that ain't good for me. I work with Mambo. So that in the future, new people do not have to use or edit html. Mambo creates de links without having to edit HTML. In Mambo it is not possible to edit the html itselfs.

Is it possible to make it without editing html with span and /span?

PS SO FAR THANKS

As I said before, without extra HTML the only way to do it is currently unsupported by most browsers.

I know, but I was just wondering because clevaTreva had allready come upo with this solution, i was hoping..

Maybe someone of u has a letter which has it allready, than I could include it?

And If that is not possible is it possible to make the decoration (underline) in another color?

There are specilist fonts that do have this border, but they are not commonly found on user's computers.

Back to the drawing board and can your idea I'm afraid.

Do you know if it is possible to change the color of the underline?

The text underline inherits its color from the font color, doesn't it? Thus, they must be the same.

too bad...

You could always set

text-decoration: none;
border-bottom: 1px solid #your-color;