Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

CSS colors without the hash mark

Posted on 2008-06-25
20
Medium Priority
?
1,187 Views
Last Modified: 2012-05-05
strange question:  is there any way to make the CSS color render without formatting them correctly?

Im trying to build template for a system and the requirements are that it can accept pre made layouts built for MySpace.

The problem is that in this code MySpace does something to remove the Hash (#) marks and still uses the color codes.

So im getting input like:
background-color: cccccc
color: 670001

if the code was correct CSS code there would be no problem.  So the question is: is there any way to make this type of layout work.

Im hoping javascript.  The templating system is made with SMARTY and if possible i dont want to touch the core PHP behind the templates.

an example of the code that is coming as input: (Layout Codes:)
http://www.myspacemaster.net/myspace-layouts/getcode/9085

Any Ideas?
<STYLE>a.searchlinkSmall:link{color:ffffff} a.searchlinkSmall:active{color:ffffff} a.searchlinkSmall:visited{color:ffffff} a.searchlinkSmall:hover{color:ffffff}</STYLE>
 
<style type="text/css">
body, body.bodyContent {
padding-left: 30px; }
</style>
 
<style type="text/css">
body, body.bodyContent {
scrollbar-track-color:ffffff;
scrollbar-face-color:ffffff;
scrollbar-3dlight-color:ffffff;
scrollbar-highlight-color:ffffff0;
scrollbar-darkshadow-color:ffffff0;
scrollbar-shadow-color:ffffff;
scrollbar-arrow-color:ffffff;
}
 
</style>
 
 
 
 
<style type="text/css">
table, tr, td {
	border: none;
	border-width: 0px;
 
 
}
body, body.bodyContent {
	background-color:7c542c;
	background-attachment: fixed;
	background-position: left bottom;
	background-repeat: no-repeat;
        margin: 20px 20px 0px 20px;
        background-image:url(http://i140.photobucket.com/albums/r6/cwm1021/layout_bg14/bg-ppp-110.gif);
	border-color:ffffff;
	border-width:0px;
	border-style:solid;
 
}
 
 
table table {
	border: 0px;
}
table table table table {
	border: 0px;
}
table table table {
	border-width: 12 px;
	border-style: solid;
	border-color:543414;
	padding: 1px; 
	background-color:44240c;
	width: 100%;
 
 
}
form {border-width:0px;	background-color:none;}
input {background-color:transparent !important;}
p {margin:0px 0px 1em 0px;}
u {text-decoration: none; font-size: 9px;}
img {border: none}
 table, tr, td, table tr, table table, table table tr,
table table td, table table table td, table table table
 table, table table table table td {
	border-style:none;
	background-image:none;
	background-color:transparent;
 
 
}
table table table td {
	background-color: transparent;
 
}
table table table table td {
	background-color: transparent;
}
td td td td {
	width: 5%;
}
table, td {
	width: 740px;
	padding: 0px;
}
div table td font {
	color:ea7118;
 
}
a.text, table div font a, table div font, table div div {
	visibility:hidden;
}
table, tr, td, li, p, div {
	
	color:ea7118;
	font-family:arial ;
	font-size: 8pt;
	line-height: 8pt;
 
	
}
.btext {
	color:ea7118; 
	font-family:arial ;
	font-size: 8pt;
	line-height: 8pt;
        
        
         
 
 
	     
}
.blacktext10 {  
	color:ea7118;
	font-family:arial ;
	font-size: 8pt;
	line-height: 8pt;
 
	     
} 
.blacktext12 {  
	color: d95a15;     
	font-family:arial ;
	font-size: 8pt;
	line-height: 8pt;
 
 
} 
.lightbluetext8 { 
	color: d95a15; 	
	font-family:arial ;
	font-size: 8pt;
	line-height: 8pt;  
  text-transform: bold
} 
.orangetext15 { 
	color: ffffff; 	
	font-family:arial ;
	font-size: 8pt;
	line-height: 8pt; 
   text-transform: bold
} 
.redtext { 
	color: ffffff; 	
	font-family:arial ;
	font-size: 8pt;
	line-height: 8pt; 
    text-transform: bold
} 
.redbtext { 
	color: ffffff;
	font-family:arial ;
	font-size: 8pt;
	line-height: 8pt;
text-transform: bold
} 
.text { 
	
        font-family:arial ;
	font-size: 8pt;
	line-height: 8pt;
	color:ffffff; 
text-transform: bold
	     
} 
.whitetext12 { 
	
	font-family:arial ;
	font-size: 8pt;
	line-height: 8pt; 
	color:ffffff; 
text-transform: bold
a:link { color: red; }
a:visited { color: red; } 
a:hover { color: blue; } 
 
	   
} 
a:active, a:visited, a:link { 
	
	font-family:arial ;
	font-size: 8pt;
	line-height: 8pt; 
	color:ffffff; 
text-transform: bold
 
	    
} 
a:hover { 
	
	font-family:arial ;
	font-size: 8pt;
	line-height: 8pt; 
	color: ffffff; 
 
	    
} 
a.navbar:active, a.navbar:visited, a.navbar:link { 
        
	color: ffffff; 	
	font-family:arial;
	font-size: 8pt;
	line-height: 8pt;
  font-weight:bold ;
 
 
   
} 
a.navbar:hover { 
	
	color: ffffff; 
	background-color: #000000;
	font-family:arial ;
	font-size: 8pt;
	line-height: 8pt;  
   
} 
a.redlink:active, a.redlink:visited, a.redlink:link { 	
	color: ffffff; 	
	font-family:arial ;
	font-size: 8pt;
	line-height: 8pt; 
 background-color: #000000;
text-transform: uppercase
   
} 
a.redlink:hover { 
	 
	color:ffffff; 
	background-color: #000000;
	font-family:arial ;
	font-size: 8pt;
	line-height: 8pt; 
text-transform: uppercase
 
 
   
} 
.nametext { 
	
	color:ffffff; 
	
	font-family:arial ;
	font-size: 8pt;
	line-height: 8pt;  
   text-transform: uppercase
 
 
} 
</style>
 
 
 
 
<style type="text/css">
table table table td {
	vertical-align: top ! important;
 
}
span.blacktext12 {
	visibility: visible !important;
	background-color: transparent;
	background-repeat: no-repeat;
	background-position: center center;
	font-size: 0px; 
text-transform: uppercase
	letter-spacing: -1px;
	width: 435px; 
	height: 280px;
 
 
display: block !important;
 
  background-image:url(http://i140.photobucket.com/albums/r6/cwm1021/layout_bg14/network-ppp-110.gif);
}
 
span.blacktext12 img {
	display: none;
}
</style>
 
 
 
 
<style type="text/css">
.contactTable {
	width: 300px !important; 
	height: 150px !important; 
	padding: 0px !important;
 
background-image:url(http://i140.photobucket.com/albums/r6/cwm1021/layout_bg14/contact-ppp-110.gif);
	background-attachment: scroll; 
	background-position: center center;
	background-repeat: no-repeat; 
	background-color: transparent;
	border-width: 12px;
	border-style: solid;
	border-color:543414;
}
.contactTable table, table.contactTable td { 
	padding: 0px !important;
	border: 0px; 
	background-color: transparent; 
	background-image: none;
 
 
 
}
.contactTable a img {
	visibility: hidden; 
	border: 0px !important;
}
.contactTable .text {
	font-size: 1px !important;
}
.contactTable .text, .contactTable a, .contactTable img {
	filter: none !important;
}
.contactTable .whitetext12 {
	display: none;
}
</style><style>div.msmnet{position:absolute;right:5px;top:35px;border:1px solid rgb(128,128,128);background:url(http://i140.photobucket.com/albums/r6/cwm1021/msmaster/fade.jpg) repeat-x 0 0 ;padding:0;margin:0;}div.msmnet ul{list-style:none;padding:5px;margin:0;}div.msmnet ul li{padding:2px;}div.msmnet ul li a:link,div.msmnet ul li a:visited{color:rgb(128,128,128);font-family:"Trebuchet MS", Arial, sans-serif;font-size:12px;}div.msmnet ul li a:hover,div.msmnet ul li a:active{background-color:rgb(128,128,128);color:white;text-decoration:none;font-family:"Trebuchet MS", Arial, sans-serif;font-size:12px;}</style>
<div style="position:absolute;left:0;top:0;"><a href="http://www.myspacemaster.net/" target="_blank"><img src="http://i140.photobucket.com/albums/r6/cwm1021/msmaster/button.gif" alt="Myspace Layouts" border="0" /></a><br /><a href="http://www.myspacemaster.net/myspace-layouts" target="_blank">MySpace Layouts</a></div><div class="msmnet"><ul><li><a href="http://www.myspacemaster.net" target="_blank"><b>MySpace Layouts</b></a></li><li><a href="http://www.myspacemaster.net" target="_blank"><b>MySpace Codes</b></a></li><li><a href="http://www.myspacemaster.net" target="_blank"><b>MySpace Backgrounds</b></a></li></ul></div><img style="visibility:hidden;width:0px;height:0px;" border=0 width=0 height=0 src="http://counters.gigya.com/wildfire/CIMP/bT*xJmx*PTEyMTQzNzcxMTQyMDImcHQ9MTIxNDM3NzE3MTgxNiZwPTE4OTg4MSZkPXBhcnRuZXIrZGF*YSZuPSZnPTE=.jpg" />

Open in new window

0
Comment
Question by:ussher
  • 8
  • 6
  • 5
  • +1
20 Comments
 
LVL 3

Expert Comment

by:seandolan
ID: 21863207
I must have misunderstood the question... I don't usually include the hashes and it still works fine for me. Can you please point me to where you are having difficulties.
0
 
LVL 1

Author Comment

by:ussher
ID: 21863259
do you mean on the myspace site?  on the myspace site this code WILL work.  In normal CSS the correct code for a color is #cccccc; or #ccc; (for light grey in this case)

If you mean that you use CSS color codes without the # then your server is set up differently than mine.  It is that setting that i would like to know.

My code is not going into myspace.  I am wanting to use code made for myspace on MY site.
0
 
LVL 3

Expert Comment

by:seandolan
ID: 21863422
Yeah, I have never been required to include them, even though it makes the code not CSS standard complaint. CSS shouldn't be affected by anything on the server. So let's look at other possibilities...

Depending on how the code is getting processed you may be able to use one of the HTML character codes for the # symbol. But I don't think this will work:
http://www.tntluoma.com/sidebars/codes/

Also you may be able to find a very similar named colour to the colour you are wanting to use:
http://www.w3schools.com/HTML/html_colornames.asp

I have tested on a Windows server and our Unix server and this:

.footer {
      background-color: #008b39;
      color: White;
}

has the same result as this:

.footer {
      background-color: 008b39;
      color: White;
}

both appear to work. This is from within an attached style sheet - if you are using it directly in a <style> tag it may result differently. If it's possible can you try your code in a .css file and use a <link> tag in your <head> tag to reference the style you want to use?
0
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
LVL 3

Expert Comment

by:seandolan
ID: 21863451
I have also run your code in a test page and it works fine. I tried in IE and FireFox. What browser are you running?
0
 
LVL 1

Author Comment

by:ussher
ID: 21863584
im using FireFox3 on a ubuntu linux desktop using KDE.


if i alter the code that comes in then i can make anything work.  but the point of this template is that the user can copy the code from any site that makes layouts for MySpace.  The code in these layouts often does not contain the # mark before the color tags.  So to get this project to work i need to be able to accept the code as it comes.  

in the attached code on my PC the code with the hash marks results in color, the code without results in no color.
THIS WORKS:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
 
<body>
<STYLE>
table tr td {
background-color: #CC3300;
color: #0000FF;
}
</STYLE>
<table>
	<tr>
		<td>THIS IS THE TEST TABLE CELL</td>
	</tr>
</table>
</body>
</html>
 
 
 
THIS DOES NOT WORK:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
 
<body>
<STYLE>
table tr td {
background-color: CC3300;
color: 0000FF;
}
</STYLE>
<table>
	<tr>
		<td>THIS IS THE TEST TABLE CELL</td>
	</tr>
</table>
</body>
</html>

Open in new window

0
 
LVL 4

Expert Comment

by:snrudda
ID: 21864540
In most cases you can simple use color names like Black, White etc (see http://en.wikipedia.org/wiki/Web_colors - nice guide on subject, also may find useful to bookmark http://www.csscolornames.com/ ). If you have to use some more precise color definition that is not on the symbolic palette just omit # sign (modern browsers uses these the same way; users of old browsers won't visit myspace anyway).
0
 
LVL 5

Expert Comment

by:codeQuantum
ID: 21868541
>> I am wanting to use code made for myspace on MY site.

There is no other character that is equivalent to # in a CSS afaik I am afraid you are stuck using PHP or Javascript to make the replacements. I prefer PHP personally, mainly for performance and SEO issues.

You could use a PHP search and replace on your CSS files. Insert a # before all colors :

1) Use the following line on your page : <link href="css.php" rel="stylesheet" type="text/css" />
2) Create the css.php file.. it will open the CSS.CSS file and make the replacement.
3) You can recognize 6 digit hexadecimal numbers using regular expressions and use str_replace() to insert the #.
0
 
LVL 5

Expert Comment

by:codeQuantum
ID: 21868570
>> The problem is that in this code MySpace does something to remove the Hash (#) marks and still uses the color codes.

Hmmm, Strange. I had a look at a few MySpace pages and they do use #. Could you post a link to a page that does not use # and still has working colors?
0
 
LVL 1

Author Comment

by:ussher
ID: 21870906
codeQuantum thank for reading the question.

Just to be clear to everybody.  The code that is coming IN (the CSS Style Sheet code) will be PASTED in by users.  so it comes in as it comes in.  I cant change this other than by creating PHP or Javascript Or Smarty replace functions.  Or possibly by altering server settings to make this format acceptable.  

The question is:
"How do i make incorrect CSS  code that comes in work."
       NOT  
"whats wrong with my css, it wont work."

I used the above myspace code in MySpace so that you could see.  In Myspace the CSS code remains as it is formatted above, without the # mark.  When i locate an item with firebug to see the code that powers the formatting it does show the CSS without the # mark as the responsible code. (eg, see LINE 494)

http://www.myspace.com/ussher
0
 
LVL 5

Expert Comment

by:codeQuantum
ID: 21871124
It must be firebug that is acting up because I opened all CSS files in that page and there are # everywhere.

Links to the CSS files :

http://x.myspacecdn.com/modules/common/static/css/global015.css
http://x.myspacecdn.com/modules/common/static/css/myspace.css
http://x.myspacecdn.com/modules/common/static/css/header003.css
http://x.myspacecdn.com/modules/common/static/css/header/profileheader002.css

Open them with firefox and you will see the #s.
0
 
LVL 3

Expert Comment

by:seandolan
ID: 21871140
I don't know if anyone else is going to be able to help you too easily. I can't replicate the issue you are having as it seems to work fine for me without any hashes at all. Is it possible for you to test this on another server. What you need to find out to solve this is why your PC is specifically not processing the CSS strings if the #'s aren't there. This may be specific to FF3 - which I haven't tried. I believe this is where your answer lies. So to clarify...

If you paste the code, without the hashes, into a file called test.html and open it - you don't get the colours coming through? If this is the case, try with a different browser. I believe you will find out that it is working fine - but maybe a restriction of FF3 that it will not process 100% complete CSS code. If you try this and post your results you will stop getting responses about the code itself.
0
 
LVL 5

Expert Comment

by:codeQuantum
ID: 21871161
Confirmed.

The color without # works fine in Firefox 2 but does NOT work in Firefox 3.

>> The question is: "How do i make incorrect CSS  code that comes in work."

The answer is that you can't. You are forced to use PHP or some scripting to add the # to the colors. If you need assistance with that, open another question for that and close this one.
0
 
LVL 5

Expert Comment

by:codeQuantum
ID: 21871170
>> Or possibly by altering server settings to make this format acceptable.  

You can't.

CSS is interpreted by browsers (firefox, internet explorer, safari, etc), locally on your machine. The server has nothing to do with it, and there is no way a server setting can enable something that happens on your local machine on your browser.
0
 
LVL 1

Author Comment

by:ussher
ID: 21871239
I just tested it on XP on a different machine using both IE and FF2  on my local machine and on a hosted server and always the same result. no color.

so i uploaded it to my testing server and same result. color in one, none in the other

I CAN see color on this page:
http://junk.hostsaba.com/with_hash_mark.html

I CAN NOT see color on this page.
http://junk.hostsaba.com/without_hash_mark.html

Is this the same for everyone else?  or can you see the color in both?


I do appreciate the help.

Yes codeQuantum you are right, the CSS that myspace coded its self does contain some hash marks, and yes these do work correctly.  but this is not the point of the question.  We are taliking about code that OTHERS have coded for myspace and that DOES NOT contain the hash mark BUT STILL DOES WORK on thier servers.  like on line 494  which gives the border color as border-color:543414; and a nice brown border appears.  (well at least on myspace it does.)


table table table {
      border-width: 12 px;
      border-style: solid;
      border-color:543414;
      padding: 1px;
      background-color:44240c;
      width: 100%;


}
0
 
LVL 1

Author Comment

by:ussher
ID: 21871422
Here's another way of looking at the problem:

I took the myspace code and stripped all but the base elements out of it and it still DOES work without the # marks.

Why is this code ABLE to show the colors without the hash marks.
http://junk.hostsaba.com/myspace_code.html

(however if you CAN see the colors on this page http://junk.hostsaba.com/without_hash_mark.html then you can help.)
0
 
LVL 5

Accepted Solution

by:
codeQuantum earned 2000 total points
ID: 21871512
hahaha found the solution.

Remove this line from your second links and the colors will work :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Open in new window

0
 
LVL 5

Expert Comment

by:codeQuantum
ID: 21871527
Funny how two bad coding issues (omitting the hash, and omitting the doctype) collide and make something work.

This was an interesting issue. :)
0
 
LVL 3

Expert Comment

by:seandolan
ID: 21871532
Thats probably it! The doctype is forcing the document to use the standards and not allow non-conforming elements to display.
0
 
LVL 5

Expert Comment

by:codeQuantum
ID: 21871558
As a side note, it works also with a doctype HTML 4 transitional (I was feeling bad about not using a doctype) :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

Open in new window

0
 
LVL 1

Author Closing Comment

by:ussher
ID: 31470471
Spot on. Nice Thinking.  Ive never really paid much attention to the doctype before.   Now there is another thing that i have to learn more about.  Thanks for solving the problem.
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

The first step to building an amazing About page is to figure out what you want the page to say about your company. You then must grab the attention of the reader, boast a bit, tell a story and let others brag about you. With a little bit of thought…
It’s a season to be thankful, and we’re thankful for users like you who engage on site, solve technology problems, and network with others in the industry. What tech are we most thankful for? Keep reading.
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
Suggested Courses

886 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question