CSS to create border around the News Scroller

[kc99]

Hi,

a while ago I was asked if we could put a bold border (with rounded corners !!) around the 'News Scroller' widget displayed on our ESS home page.

This seemed quite easy until I realised that the DIV's ID that is created for the News Scoller is dynamic so my CSS had to be 'wildcarded' to try and target the correct DIV.

I've managed to get this CSS to work:

[id*='_wrap']

{

margin: 0 px;

padding: 5px;

border: 5px solid #4a3e9e;

border-radius:25px;

}

but there are other DIV elements that are affected as they also have the string '_wrap' somewhere in their ID name.

The DIV code generated for the scroller is as below:

<div id="64072509e96b6100651096fba12f504b_wrap" style="width:98%;height:100px;overflow:hidden;" onmouseout="HOME_SCROLL_SPEED=HOME_RESUME_SPEED" onmouseover="HOME_SCROLL_SPEED=HOME_PAUSE_SPEED"><div id="64072509e96b6100651096fba12f504b" style="position: relative; left: 0px; top: 58px; width: 100%;"><table width="100%" border="0" cellpadding="0" cellspacing="2"><tbody><tr><td><i>No items</i></td></tr></tbody></table></div></div>

Can anyone please tell me if there is a way that I can target only the News Scroller with this CSS?

Many thanks,

Keiron.

[kc99]

Hello again,

as   an update to this I decided to look to use another HTML attribute (event) as part of my wildcarding of the CSS.

This code appears to have worked as the scroller DIV will (probably) be the only element that will have this value in the onmouseover event.

Please correct   me if you think this can be done better...

[onmouseover*='HOME_SCROLL']

{

margin: 0 px;

padding: 5px;

border: 5px solid #4a3e9e;

border-radius:25px;

}