z-index not working on this one

[leeboycymru]

I have a scrolling news ticker on the left side of this page:

http://www.hobbsvalve.co.uk/index.htm

It is meant to scroll over the valve picture, but its isnt.

Can anybody help me with this.

the code is below:

<div id="sub_content_trial"><br/>
<div id="valve-pic"><img src="Images/ValveBrochure.jpg" alt="Hobbs Valve Triple off-set butterfly valve design"/></div>
<div id="news_ticker">
<!-- Call jScript command script -->
<script language="JavaScript" type="text/javascript" src="JScript/newsSource.js"></script>
</div>
CLICK <a href="News.htm">HERE</a> FOR ARCHIVED NEWS <br/>
<br/>
<hr/>
</div>

CSS:

#sub_content_trial {
FONT-SIZE: 1.2em; RIGHT: 6px; FLOAT: right; MARGIN-BOTTOM: 5px; WIDTH: 313px; POSITION: relative; top: 10px; border-right: #61645b 1px solid; background-color:#000000; z-index:0;
}
#news_ticker {
PADDING-LEFT: 5px; LINE-HEIGHT: 1.5em; POSITION: relative; TOP: 0px; z-INDEX:2; background-color:#FFFFFF
}
#valve-pic {
z-index:1; position:relative;
}


cheers

 

[monksnake]

In my experience with z-index, it only seems to work with absolutely positioned elements.

I know position:absolute is not recommended, and there may be another way, but this is what I see.

<.

 

[leeboycymru]

Hi, ye you are right...

But it didnt work out, as the background is not transparent on the news ticker.

And it cause a few problems with alignment.

cheers