Solved

Space in Class Name

Posted on 2004-10-01
9
269 Views
Last Modified: 2012-05-05
I have an asp page that displays some text which is formatted by a stylesheet. The colour of the text box depends on the text itself.

For example, the information displayed is a risk. If the risk is 'None', the box is white, if it is 'High', the box is red, etc.

The class is determined programmatically, according to the actual risk. In the stylesheet I have a class called 'None', another called 'High', etc.

The problem I have is that one of the risks is 'No Risk' which obviously has a space in it. The text MUST say 'No Risk' so the solution is not to have text with no space in.

How do I create a class in my stylesheet called No Risk? If I type it literally, with the space, it doesn't recognise it.

I have a procedure that selects the Risk from a database table. The asp page has the following line to set the class:

Response.Write "<td class=" & chr(34) & Replace((rs.Fields.Item("risk").Value) , " ", "") &"2" & chr(34) & ">" & (rs.Fields.Item("risk").Value) & "</td>"

Any help would be very gratefully receive it as I am rapidly running out of hair!

Thank you.
0
Comment
Question by:FingersLily
9 Comments
 
LVL 5

Expert Comment

by:php-webdesign
ID: 12199331
maybe try adding a "_" in place of the space

since i am no asp guy, i don't know the funtion. But use "replace" or something to change this "_" in "&nbsp;"

OR (not sure if it works)

remove the " " with "&nbsp;"
0
 
LVL 14

Accepted Solution

by:
dfu23 earned 125 total points
ID: 12199996
If the value coming back from s.Fields.Item("risk") is "No Risk" then the replace you are doing should result in "NoRisk" ... right? Well, then you add a "2" to that, so "NoRisk2"?

In this case make a CSS class like this

.NoRisk2 {
    /* Add rules as needed */
}

And maybe use this ASP code too:

Response.Write "<td class=""" & Replace(rs.Fields.Item("risk").Value), " ", "") & "2"">" & rs.Fields.Item("risk").Value & "</td>"
0
 

Author Comment

by:FingersLily
ID: 12200368
Thanks for the replies.

Sorry, the code I posted was after I'd tried a few remedies.
I put the 2 on the end so I could leave the original alone.

As you said dfu23, I created a class named NoRisk2 in my stylesheet but it still wasn't working.

I've actually solved the problem now in a roundabout way by testing for the value of risk first.

If risk = 'No Risk' then class = 'NoRisk'
else
code as before.

Thanks for your help although I'm still unsure why your suggestion doesn't work.
0
Gigs: Get Your Project Delivered by an Expert

Select from freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely and get projects done right.

 
LVL 3

Expert Comment

by:PaulPosition
ID: 12203173
I'm pretty sure you'd be better following 'php-webdesign's advice which is to replace spaces with the underscore character. I'd even go further than that and instead of testing for 'risk' or 'no risk' I'd simply search&replace spaces for '_' in every link.

Why? Because more than 'risk' and 'no risk' , there may be a day when you need, for example, 'important' and 'not important'. Same problem. If you already coded it so it replaces spaces with underscores, there's not much you'd need to do. With your current solution, you'd need to add a second 'if()' then who knows, a third one, etc..

Just my thoughts anyway, sorry I have no .asp code to show up.
0
 
LVL 3

Expert Comment

by:PaulPosition
ID: 12203209
(oh, as for spaces in class names like class="no risk" well if I'm not mistaken, it assigns both the class 'no' and the class 'risk' to the thing. see http://www.w3.org/TR/SVG/styling.html#ClassAttribute  )

Could be usefull, but not exactly what you're looking for, is it?
0
 
LVL 49

Expert Comment

by:Roonaan
ID: 12203217
As addition to PaulPosition, even better would be to replace all kinds of whitespaces into underscores and possible even every multiple underscores into one single underscore, just in case someone goes wrong and a type like "no    risk" is entered or someting.

Regards -r-
0
 
LVL 11

Expert Comment

by:neester
ID: 12205323
Yeah, if you have a classname with a space, it will interpret them as 2 seperate Classes....


Response.Write "<td class=" &  (rs.Fields.Item("risk").Value)  &  ">" & (rs.Fields.Item("risk").Value) & "</td>"

If you use that code...
From what you said, the class could be:

High or None...

therefore, add 2 classes:


td.High {background-color: #5A5;}
and
td.None {background-color: #F00;}
0
 
LVL 18

Expert Comment

by:arantius
ID: 12242237
A CSS class name can not have a space in it.  A space in the class="thing otherthing" is the way to assign more than one class to an element.
The only way that will work is to change the phrase "No Risk" to something without a space in it when you are placing it in your class="" attribute.
0
 
LVL 49

Expert Comment

by:Roonaan
ID: 12242266
I guess the thread starter has already got that idea going arantius, as it was already mentioned a couple of times, in my screen resolution at least.
0

Featured Post

Courses: Start Training Online With Pros, Today

Brush up on the basics or master the advanced techniques required to earn essential industry certifications, with Courses. Enroll in a course and start learning today. Training topics range from Android App Dev to the Xen Virtualization Platform.

Question has a verified solution.

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

Suggested Solutions

SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
This article discusses four methods for overlaying images in a container on a web page
In this tutorial viewers will learn how add a full-size background image to a webpage using CSS3. Create a new HTML document with an internal stylesheet.: In CSS, define the html element to have a background image. Use a high resolution image.: In t…
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…

813 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

12 Experts available now in Live!

Get 1:1 Help Now