CSS wont' work! Damn stroke attribute

[sixthcrusifix]

I have tried using:

filter:glow(color=000000;strength=4);

(maybe not that exactly but it was the right syntax, I got it off of a CSS website

And I've tried this:

stroke:000000;stroke-weight:0.3px;


And on Mozilla and IE niether of them work at all! I just want me damed text to have stroke so that I can see it next to my complicated background. (The reason is because a little bit of the text dissapears in a black spot)


Why aren't these working??? here's my style.css file if you need it:

<style type="text/CSS">
BODY {font-family:Century Gothic Bold;font-size:35px;font-weight:bold;color:ffffff;scrollbar-face-color:009800;background-image:url('BG_TEMP.jpg'); background-attachment:fixed;background-repeat:no-repeat;background-position:center;}
.ttl {color:af9090;font-size:25px;font-family:Century Gothic Bold;font-weight:bold;}
.area {background-color:cf5544;}
.title {color:00ff00;text-decoration:underline;font-size:30px;font-family:Century Gothic; }
.content {color:3333df;text-decoration:none;font-size:25px;}
A:link {color:000000;text-decoration:underline overline;font-size:17px;font-family:Century Gothic Bold;background-color:dd3333}
A:hover {color:000000;text-decoration:underline;font-size:17px;font-family:Century Gothic Bold;background-color:ffff00}
A:active {color:000000;text-decoration:underline overline;font-size:17px;font-family:Century Gothic Bold;background-color:000000}
A:visited {color:000000;text-decoration:underline overline;font-size:17px;font-family:Century Gothic Bold;background-color:ff7878}
.COPYINFO {color:000000; text-align: center; font-size:12px;font-family:Century Gothic;stroke:#000000;stroke-width:1}
TABLE {border-color:af7500;}
TD {border-color:af7500}
.button {background-color:df9800;border-color:984511}

</style>

[webzone (archived)]

filter is a proprietary extension of Internet Explorer (Windows only). It is not implemented by any other browser.
stroke is designed to be used with SVG (Graphics Language), not with HTML.

Are you looking for text-decoration:line-through ?

[sixthcrusifix]

filter is a proprietary extension of Internet Explorer (Windows only). It is not implemented by any other browser.
stroke is designed to be used with SVG (Graphics Language), not with HTML.

Are you looking for text-decoration:line-through ?

No, I want teh text to be outlines in a different color. like glow but solid, I thought that would be a basic funtion of CSS.


And even worse I just got this:

text-shadow:ffffff,3px,3px,3px;


from W3.org and it didn't work either! They should be kicked in the ass for giving me crap that doesn't work! What the hell!?

[webzone (archived)]

Text-shadow is a CSS 2.1 property that is actually only supported by the KHTML engine (Safari and Konqueror).
It is in the specs, but nobody has bothered to implement it in a browser yet.

I'm not sure I well understand what you want though. Do you want a shadow, a line through your text, or one around it (outline)?

[sixthcrusifix]

Text-shadow is a CSS 2.1 property that is actually only supported by the KHTML engine (Safari and Konqueror).
It is in the specs, but nobody has bothered to implement it in a browser yet.

I'm not sure I well understand what you want though. Do you want a shadow, a line through your text, or one around it (outline)?

a line around it, outline. but I can't find that either.

And damn them! Microsoft and Mozilla need to get off their ass in implement it! Shadow would be cool too.

[webzone (archived)]

A line around? That's possible.

You could use border (CSS 1).
Example: border:1px solid red;

[Ben]

the problem with the "world wide web" is that coding standards don't make it world wide.

Yeah, is border what you're talking about, or are you looking for something differant?

[sixthcrusifix]

A line around? That's possible.

You could use border (CSS 1).
Example: border:1px solid red;

no no no no no no no my loves, my dears my darlings. What I'm looking for is called a stroke in technical terms. Lemmie open photoshop and give you an image. I want to type in black text and get this:





That is black text with a red stroke (Stroke, border, outline -whatever you wanna call it)

Not trying to sound mean it's just that people keep misunderstanding me.

Thanks for reading you guys.

[Ben]

Something like this?

It's a BBCode on the forums, so it's gotta be possible. I'll look up in the source how its done.

Edit: It's done with this CSS:

Code Select Expand

filter: Glow(color=red, strength=2);

Edit again: You've already tried it... well, I don't think there's another way, and if there is I don't know.

[brainiac744]

I had this exact same problem. What I ended up doing was writing a PHP script that generates a gif image with an outline around the text. If you want I can go and get the part of the code that outlines the text.

[sixthcrusifix]

Something like this?

It's a BBCode on the forums, so it's gotta be possible. I'll look up in the source how its done.

Edit: It's done with this CSS:

Code Select Expand

filter: Glow(color=red, strength=2);

Edit again: You've already tried it... well, I don't think there's another way, and if there is I don't know.

-Yea it only works in IE and on my IE it didn't even work (I've got 6 . . . )

I had this exact same problem. What I ended up doing was writing a PHP script that generates a gif image with an outline around the text. If you want I can go and get the part of the code that outlines the text.

hey that would be awsome.

[brainiac744]

Code Select Expand


<?php
//define some vars
    if(!isset($_GET['size'])) $_GET['size'] = "26";
    if(!isset($_GET['text'])) $_GET['text'] = "Text";
    if(!isset($_GET['font'])) $_GET['font'] = "arial.ttf";
    if(!isset($_GET['stroke'])) $_GET['stroke'] = "1";


//find the x and y sizes
    $size = imagettfbbox($_GET['size'], 0, $_GET['font'], $_GET['text']);

    $xsize = abs($size[0]) + abs($size[2] + 2);
    $ysize = abs($size[5]) + abs($size[1] + 2);

//create an image
    $image = imagecreate($xsize, $ysize);
//set the background color
    $blue = imagecolorallocate($image, 0, 0, 255);
//makes the background color transparent
    imagecolortransparent($image, $blue);
//set the text color
if (isset($_GET['r']) && isset($_GET['g']) && isset($_GET['b'])){
    $font_color = ImageColorAllocate($image, $_GET['r'], $_GET['g'], $_GET['b']);
}
else {
    $font_color = ImageColorAllocate($image, 255,255,255);
}

//set the outline color
if (isset($_GET['or']) && isset($_GET['og']) && isset($_GET['ob'])){
    $stroke_color = ImageColorAllocate($image, $_GET['or'], $_GET['og'], $_GET['ob']);
}
else {
    $stroke_color = ImageColorAllocate($image, 0, 0, 0);
}

// now draw out the outline (stroke) on the text
$stroke = $_GET['stroke'];
for ($ox = -$stroke; $ox <= $stroke; $ox++) {
for ($oy = -$stroke; $oy <= $stroke; $oy++) {
imagettftext($image, $_GET['size'], 0, abs($size[0])+$ox, abs($size[5])+$oy, -$stroke_color, $_GET['font'], $_GET['text']);
}
}

//print the text
    imagettftext($image, $_GET['size'], 0, abs($size[0]), abs($size[5]), -$font_color, $_GET['font'], $_GET['text']);

//set the type of image
//    header("Content-type: image/gif");
//barf out the image
    imagegif($image);
//free up memory
    imagedestroy($image);
?>


Just pasted the whole file.
You'll need to upload a ttf font and set it at the top or add it to the query like:
?font=something.ttf&text=blahblah&size=12&stroke=2

Obviously, you'll want to just set the defaults at the top to what you typically use.

[sixthcrusifix]

Code Select Expand


<?php
//define some vars
    if(!isset($_GET['size'])) $_GET['size'] = "26";
    if(!isset($_GET['text'])) $_GET['text'] = "Text";
    if(!isset($_GET['font'])) $_GET['font'] = "arial.ttf";
    if(!isset($_GET['stroke'])) $_GET['stroke'] = "1";


//find the x and y sizes
    $size = imagettfbbox($_GET['size'], 0, $_GET['font'], $_GET['text']);

    $xsize = abs($size[0]) + abs($size[2] + 2);
    $ysize = abs($size[5]) + abs($size[1] + 2);

//create an image
    $image = imagecreate($xsize, $ysize);
//set the background color
    $blue = imagecolorallocate($image, 0, 0, 255);
//makes the background color transparent
    imagecolortransparent($image, $blue);
//set the text color
if (isset($_GET['r']) && isset($_GET['g']) && isset($_GET['b'])){
    $font_color = ImageColorAllocate($image, $_GET['r'], $_GET['g'], $_GET['b']);
}
else {
    $font_color = ImageColorAllocate($image, 255,255,255);
}

//set the outline color
if (isset($_GET['or']) && isset($_GET['og']) && isset($_GET['ob'])){
    $stroke_color = ImageColorAllocate($image, $_GET['or'], $_GET['og'], $_GET['ob']);
}
else {
    $stroke_color = ImageColorAllocate($image, 0, 0, 0);
}

// now draw out the outline (stroke) on the text
$stroke = $_GET['stroke'];
for ($ox = -$stroke; $ox <= $stroke; $ox++) {
for ($oy = -$stroke; $oy <= $stroke; $oy++) {
imagettftext($image, $_GET['size'], 0, abs($size[0])+$ox, abs($size[5])+$oy, -$stroke_color, $_GET['font'], $_GET['text']);
}
}

//print the text
    imagettftext($image, $_GET['size'], 0, abs($size[0]), abs($size[5]), -$font_color, $_GET['font'], $_GET['text']);

//set the type of image
//    header("Content-type: image/gif");
//barf out the image
    imagegif($image);
//free up memory
    imagedestroy($image);
?>


Just pasted the whole file.
You'll need to upload a ttf font and set it at the top or add it to the query like:
?font=something.ttf&text=blahblah&size=12&stroke=2

Obviously, you'll want to just set the defaults at the top to what you typically use.

awsomeness! YAY! By the way, if you want a certain font for your website, is there a way you can upload the ttf to your website so that even people who don't have teh font installed can see it??? Otherwise I've just been having to make images for stuff to be in cool fonts. (It'd be easy if Internet Explorer, the most popular browser, had better PNG support) .

Why isn't there an Internet Explorer 7.0 with full PNG transparency support, tabbed browsing, The Latest CSS and personalized security? You can get plugins for some of it but microsoft is so big I feel like they owe it to me to give me a better browser. I wish everyone in the world would just switch to firefox!

[Ben]

But updating IE requires WORK. Don't you know that Microsoft hires programmers that sit in the office all day and say
Fred: "Oh, we could do that. Get Bob to do it."
Bob replies "That's a good idea, put Fred on it".

Besides, IE 7 is supposed to be released with Windows Vista.

[sixthcrusifix]

But updating IE requires WORK. Don't you know that Microsoft hires programmers that sit in the office all day and say
Fred: "Oh, we could do that. Get Bob to do it."
Bob replies "That's a good idea, put Fred on it".

Besides, IE 7 is supposed to be released with Windows Vista.

Vista? Sounds like some damned beach softdrink. is that the new OS? VERY gay sounding I hate it. But it will probably be better than XP and I'll have to upgrade because the new Adobe software will only be availale on it....

I hope somone breaks the window one of these days.