Multiple grids - nearly there! Just a few odd things happening

I have 5 grids I'm displaying on a page. The style setup I'm using that gets it working is -

<style>
H3 {text-align: center; color:blue}

.active-templates-item {text-align: right; color: red;)

#tab1 {}
#tab1 .active-column-0 {width: 60px;}
#tab1 .active-column-1 {width: 50px; text-align: right;}
#tab1 .active-column-3 {width: 110px;}
#tab1 .active-column-6 {width: 135px;}
#tab1 .active-column-7 {width: 60px; text-align: right;}
#tab1 .active-column-8 {width: 115px;}
#tab1 .active-grid-column {border-right: 1px solid threedlightshadow;}

#tab2 .active-column-0 {width: 60px;}
#tab2 .active-column-1 {width: 50px; text-align: right;}
#tab2 .active-column-2 {width: 75px;}
#tab2 .active-column-5 {width: 80px; text-align: right;}
#tab2 .active-column-6 {width: 65px; text-align: right;}
#tab2 .active-column-7 {width: 70px; text-align: right;}
#tab2 .active-column-9 {width: 135px;}
#tab2 .active-column-10 {width: 60px; text-align: right;}
#tab2 .active-column-11 {width: 115px;}
#tab2 .active-grid-column {border-right: 1px solid threedlightshadow;}

#tab3 .active-column-0 {width: 60px;}
#tab3 .active-column-1 {width: 50px; text-align: right;}
#tab3 .active-column-5 {width: 75px;}
#tab3 .active-column-6 {width: 60px; text-align: right;}
#tab3 .active-grid-column {border-right: 1px solid threedlightshadow;}

#tab4 .active-column-0 {width: 60px;}
#tab4 .active-column-1 {width: 50px; text-align: right;}
#tab4 .active-grid-column {border-right: 1px solid threedlightshadow;}

#tab5 .active-column-0 {width: 60px;}
#tab5 .active-column-1 {width: 50px; text-align: right;}
#tab5 .active-column-3 {width: 350px;}
#tab5 .active-grid-column {border-right: 1px solid threedlightshadow;}

.active-templates-header {color: green;)
.active-grid-column {border-right: 1px solid threedlightshadow;}
.active-grid-row {border-bottom: 1px solid threedlightshadow;}
.active-controls-grid {height: 214px; font: menu;)
</style>

There are a few bugs with this. Every grid has the first two columns the same (header and data). However, I couldn't set them the same with just one CSS directive. I had to do one for each grid.

The first bug was the column zero wouldn't take the CSS directive. The next column did. I fixed it by repeating the CSS definition for each grid.

Then I noticed that column 0 of the first grid didn't take its CSS definition even with that approach. I found that using the empty #tab1 {} CSS directive worked (in fact, putting any rubbish into the brackets also worked. Even real CSS settings. These weren't applied though. E.g. setting the background color to black had no effect - but it fixed the column 0 problem).

I also found that the 3D row shadow didn't work. I had to set the CSS .active-templates-item and .active-templates-header exactly as above (position-wise) or the wouldn't work (as I reported a few days back).

It didn't matter where I put .active-grid-row, it didn't show the 3D shadow. But it did affect the header settings, so I had to set it for each grid individually.

Everything is working fine now (apart from finding out the number of rows so I can set the grid height percentage) but I was wondering what the problem is with these CSS directives.

Is it an inheritance issue? Or should I be forcing the settings with a !inportant directive?

try using something other than tab1-tab5

for instance, myGrid1 etc... could be that he's using the same naming convention as you. You will notice in the code that if there is a #myGrid CSS and the grid's name happens to be myGrid, that it will automatically set the grid's css to whatever you specified.

This means that even though you have 2 common columns, you need to set those individually if you specify a style for a specific grid.

Also make sure your definitions is after any CSS includes (and make sure the .active-template-item (aka general grid css) gets included after your custom definitions)

Hope it helps?

I don't see anything in the source code that refers to "myGrid". Can you indicate where?

As for my IDs they seem to be fine. I wonder if its a problem with IE?

I've now narrowed the common CSS code for the grid columns down to -

{}
.active-column-0 {width: 85px;}
.active-column-1 {width: 50px; text-align: right;}

All the grids now inherit the directive for the first two common columns. The empty bracket does the trick. I'm not sure why but it works.

Using "!important" didn't have any effect.

I have to leave .active-templates-item at the top or it won't work. I still have to define .active-grid-column for each grid and at the bottom or it won't work either.

That's rather strange but I can live with it.