Hi all, first time poster.

I am having inconsistencies with keeping text on top of my jquery slideshow.
When you first load the page or refresh (ctrl+f5) the text loads fine, but if you go back to the home page from the other pages or use a mobile device the text does not load.

And no surprise it doesn't work at all with IE

Does anybody know what I am doing wrong?
www.reforming.org.au

HTML:

<div id="slideshow">
    <ul id="nav">
    </ul>
    <ul id="slides">
      {exp:channel:entries channel="slideshow"}
      <?php
			$image_link = '{image_link}';
			if ($image_link == 'none')
			{
				echo "<li><img src='{image}' alt='Reforming' /></li>";
			} else {
				echo "<li><a href='$image_link'><img src='{image}' alt='Reforming' /></a></li>";
			}
		?>
      {/exp:channel:entries}
    </ul>
    
<h2><span>Everything is<br />
about Jesus!</span></h2>
</div>

CSS:

#slideshow {
	height: 300px;
	width: 1060px;
	overflow: hidden;
	position: relative;
	float: left;
}

#slideshow h2 {
	position: absolute;
	left: 1px;
	float: left;
	margin-top: 100px;
	z-index: 15;
	margin-left: 700px;
}

#slideshow h2 span {
	color: #FFF;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 36px;
	letter-spacing: 2px;
	line-height: 40px;
	text-align: left;
}

div#slideshow ul#slides 
{
	list-style: none;
}

div#slideshow ul#slides li 
{
	margin: 0 0 20px 0;
}

#slideshow ul#slides li img {
	position: relative;
	float: left;
	width: 1060px;
	z-index: -1;
}

Thanks for any helps guys :)