Solved

CSS colors without the hash mark

Posted on 2008-06-25
20
1,170 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
Comment Utility
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
Comment Utility
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
Comment Utility
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
 
LVL 3

Expert Comment

by:seandolan
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
>> 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
Comment Utility
>> 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
Comment Utility
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
Comment Utility
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
Top 6 Sources for Identifying Threat Actor TTPs

Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

 
LVL 3

Expert Comment

by:seandolan
Comment Utility
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
Comment Utility
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
Comment Utility
>> 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
Comment Utility
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
Comment Utility
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 500 total points
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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

Maximize Your Threat Intelligence Reporting

Reporting is one of the most important and least talked about aspects of a world-class threat intelligence program. Here’s how to do it right.

Join & Write a Comment

This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …

744 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

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now