trying to get z-index to work - CSS styling with RJS

I have a section of controller code that tries to style a page with moving text and images. This used to work a few years ago, but I have not had the site working for awhile and I am trying to resurrect it. Below is some of the RJS code. The z-index and font-size does not seem to work as far as I can tell, though I am especially focused on z- index not working. My moving text is supposed to be in front of the images, but it is not. If I do view generated source from web developer plugin, one of the elements generated is shown below. I am not sure if my problem may be something different in RJS or CSS is needed or what else I can try to troubleshoot the problem ? I am using rails 3.0.5 at the moment .. thanks

     page[k].set_style :'font-size' => font_sz      page[k].set_style :color => col      page[k].set_style :position => 'absolute'      page[k].set_style :left => 40 + (horz)      horz = horz + spacing + (w.length * mult)       page[k].set_style :top => (tidx * 100) + 70       page[k].set_style :'z-index' => 20       page[k].visual_effect effect, {:queue=> {:position => 'end', :scope => scope}, :duration => 1}

some of the dynamic css generated:

<span id="sp0_0" style="color: purple; position: absolute; left: 40px; top: 70px; overflow: visible;">Free</span>

Which suggests that :'z-index' is being ignored. Are you sure that's the way to set this property (quoted symbol name)? Have you tried :z_index instead? (I have no idea, that's just a guess.) In vanilla JavaScript, any of the attributes that have dashes in their name get interCapped, but that doesn't seem like it would work on the Ruby side of things.


Hi Jedrin,

Sorry, I disagree with this. The stylesheet is given the same priority as ever, in keeping with the idea of "weight" inherent to the cascade. The closer a declaration is to the thing that it governs, the more authoritative it is taken to be.

You can see this very easily in Safari's Web Inspector by using (Contextual Menu: Inspect Element) and look at the attributes declared on the local object versus those in the style sheet(s). The list in the sidebar will show various attributes grayed back and crossed out as those higher in the list contradict them. At the very top of the list is the Computed Style section (closed by default) which will show the result of all this cascading jujutsu.

If you make a little sample document, you can see this for yourself. Local (inline) attributes still trump all.

The only exception to this would be if you add the !important flag to the end of a rule. That will override even a locally-declared attribute, and didn't use to, and this may be the part you're remembering.


I tried this which doesn't seem to do anything either: page[k].set_style :z_index => 20

I believe that the following syntax is valid: page[k].set_style :'z-index' => 20

I tried this:

C:\Users\Laurence>irb irb(main):001:0> irb(main):002:0* irb(main):003:0* x = :'z-index' => :"z-index" irb(main):004:0> x.class => Symbol irb(main):005:0> irb(main):009:0> x => :"z-index" irb(main):010:0>

I agree, that does seem to work as expected. I'm not an expert on the RJS side of things, but I have used Prototype for many years, and $('foo').setStyle('z-index: 20') certainly works there. Maybe there's an alternative syntax you could use, where instead of pecking away with multiple calls to set_style, you could concatenate a hash and send the whole thing at once, maybe something like foo.set_style {:'z-index' => 20, :font_size => font_sz, ... }


I tried this and I seem to still have the same exact problem: page[k].set_style({:position => 'absolute', :left => (pidx * 300),                 :top => (1 * (topidx * 200) + 80),                 :'z-index' => 10})

A side note, is that if I do the following without the parens, I get a syntax error of some sort. I was never really sure why that happens:

page[k].set_style {:position => 'absolute', :left => (pidx * 300),                 :top => (1 * (topidx * 200) + 80),                 :'z-index' => 10}

I wonder if something has changed with prototype ? I'm not sure how I can view the generated javascript for this ?


You can simply view source in a browser. Furthermore, Safari or Firefox (with Firebug) can show you endless detail about the script on your page. The shortcut is the same: Control (or right) click on the element, and "Inspect Element". That will show you the actual rendered properties, not what's hard-coded in the generated HTML.


I stand corrected. Thanks.

Best regards, Bill

Another resource that's incredibly helpful, in case you don't already subscribe, is the css-discuss list. It's run by Eric Meyer and is a how-do-i-do-or-fix-this-thing list. The name is a little misleading. There's no opining. Post your objective, your code or a link to a page with the problem, and you will get very specific instruction on how to achieve your goal.

Best regards, Bill

I did the following which seems to fix the problem, note the last two set_style calls take a string rather than a hash:

page[k].set_style({:'font-size' => font_sz, :color => col,                                 :position => 'absolute', :left => (40 + (horz)), :top => ((tidx * 100) + 70)                                 #:'z-index' => 20                                 }) page[k].set_style 'z-index: 20' page[k].set_style 'font-size: ' + font_sz.to_s