ansaurus

Question

How can I anticipate which type of CSS selector will work?

Answer 1

+1 A:

You have a typo in your class selector.

RIGHT_JUSTIFIED and RIGHT-JUSTIFIED will not match

David Caunt 2009-06-18 21:50:11

Thank you; this typo has been corrected, but does not affect the curious behavior.

Carl Manaster 2009-06-18 21:53:01

Answer 2

+1 A:

Use FireBug to see if there is a more specific selector overriding .RIGHT_JUSTIFIED.

Andrew Duffy 2009-06-18 22:04:42

Thank you; FireBug tells me that my RIGHT_JUSTIFIED class is the operative specification and that the text-align is therefore "right" - but my eyes tell me otherwise.

Carl Manaster 2009-06-18 22:27:25

Answer 3

+1 A:

i tried this code and it seems to work fine

<html>
<head>
<style type="text/css">

    .width_narrow {width:60px;}
    .align_right {text-align:right;}

</style>
</head>
<body>

<input
    name           = "sample_input"
    type           = "text" 
    class         = "width_narrow align_right" 
    id             = "sample_input"
    value          = "27"
    dojoType       = "dijit.form.NumberTextBox"
    constraints    = "{min:1,max:30,places:0}"
    promptMessage  = "Enter a value"
    required       = "true" 
    invalidMessage = "Invalid value."
/>

</body>  
</html>

Josh 2009-06-18 22:11:33

Thank you. When I use it alone like that, it works for me as well. My screen doesn't stand alone, however; it's embedded in a "navigation" as part of the apache turbine framework - and I think you've pointed me to what might be the source of the problem. If I take my HTML out of its context, it's OK. So I need to see what in the context is messing with it. I tried, with this question, to isolate the problem, but in doing so lost the problem.

Carl Manaster 2009-06-18 22:24:48

Answer 4

+1 A:

If a selector isn't working, there are a couple quick tests you can do to isolate the problem.

First, I try trying a more specific selector to see if a selector in a different part of the CSS is overriding your styles. For example,

body #problem { ... }

is more specific than

#problem { ... }

You can also add the !important property, which gives the property precedence over [nearly] all other properties, no matter how much more specific they are:

#problem { width:60px !important; }

If neither of those works, there's either a deeper issue, or a sneaky typo. At this stage, completely isolating the section of HTML and CSS (as you've done in the answer above) is the most effective, but also more time consuming.

Matt Hampel 2009-06-20 17:03:20

ansaurus

tags:

views:

answers:

How can I anticipate which type of CSS selector will work?

related questions