Solved

Space in Class Name

Posted on 2004-10-01
9
270 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
Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
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

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

This is a how to build your own CSS3 slideshow and when I say CSS3 I mean just CSS with no javascript in sight! There a few examples online of how to do this but most just show you an example without any explanation, others make it more complicat…
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
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 …

861 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