CSS for widget title
 

I want to format the widget title area differently for different widgets.
www.esa.org/scalingup/student-workshop

vs.

www.esa.org/scalingup/early-career-scientists-workshop


I added the following CSS code to the "Add HTML/CSS inserts" ATO.
In Internet Explorer 8 they work fine.
In Firefox 16.0.2 only the first bit code works.


/*Widget sidebar title colors*/
/*student workshop*/
td#left-inner div.widget-title{
background: #df9536;
}

/*early career workshop*/
td#left div.widget-title{
background: #cb6d27;
}

Well, it looks like you corrected it since they look the same to me.

I did not fix the problem.

I don't want them to look the same. I want them to be different.

they look the same in firefox,
But they look different in IE (the look I want)

Thanks in advance for your help.

I found a workaround.. using the Widget Title Box

but it seems like an odd fix.

It might be caused becaused you used the background shorthand, but did no add all the elements.
Try using 'background-color: #df9536;' instead of 'background: #df9536;'

That is not the issue. I changed 'background' to 'background-color'

It seems that
As long as I have the widget title box as:

background-color: #df9536;

and the CSS insert:

/*student workshop*/
#left-inner .widget-title{
background-color: #df9536;
}

/*early career workshop*/
#left .widget-title{
background-color: #cb6d27;
}

It doesn't make sense to me as to why I need to have both codes for the inserts. But it works. I would have thought that I could have only used the #left insert. But it doesn't work if I do that. Nor does it work if the inserts are in the opposite order.

Thanks!