Css position doesn't work on an ipod

programming web dev
1

Hi guys,

I am working on a project and have an issue with the index. On the index I have a rollover css button that is suppose to be positoned in the center of the page. It’s working in every browser except on an ipod (maybe on other phones too, I didn’t try. The button appears maybe 200 px above the correct position. Any ideas why ?

Here’s the address to test it, you can check it on a browser to see how it is suppose to be and an a ipod (or other phones) to see the issue.

http://www.liferevolution.com/index/

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" style= "height: 100%">
<head>

<script type="text/javascript">
window.resizeTo(screen.width,screen.height);
</script>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title>LIFE REVOLUTION | Unlocking the Potential of the Next Generation</title>

<style> 

body {
	background-image:url(images/bg2.jpg);
	background-repeat:repeat;
	background-position:50% 50%;
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
}


	a:link {
	color:#C3D9F0;
	}
	a:hover {
	color:#464749;
	}  /* mouse over link */

.style1 {
	color:#C3D9F0;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	}
.style2 {
	color:#C3D9F0;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	}
.style3 {
	color:#333333;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	}

.cssnav
{
position: relative;
font-family: arial, helvetica, sans-serif;
background: url("images/btn2.png") no-repeat;
white-space: nowrap;
display: block;
width: 213px;
height: 34px;
margin: 0;
padding: 0;
}

.cssnav a
{
display: block;
color: #000000;
font-size: 11px;
width: 213px;
height: 34px;
display: block;
float: left;
color: black;
text-decoration: none;
}

.cssnav img
{
width: 213px;
height: 34px;
border: 0
}

* html a:hover
{
visibility:visible
}

.cssnav a:hover img
{
visibility:hidden
}

.cssnav span
{
position: absolute;
left: 35px;
top: 15px;
margin: 0px;
padding: 0px;
cursor: pointer;
}	
	

</style>
</head>

<body>

<div style= "background:#2693D1; height: 30px;"></div>

<div class="cssnav"style="position:absolute;top:50%;left:50%;margin-left:-28px;margin-top:50px;">
<a href="http://www.liferevolution.com/homepage/"><img src="images/btn1.png" alt="images/btn1.png" /></a></div>


<div class="style3" style= "text-align:center; position:absolute; top:50%; left:50%; margin-left:-375px; margin-top:180px; width: 800px;"><p>DISCOVER HOW THE POWER OF KNOWLEDGE & LIFE COACHING CAN IMPACT TEENAGERS & COLLEGE STUDENT</p>
  <p> <span style="font-weight:bold;;">OBTAIN FREE TIPS FOR HELPING YOUNG PEOPLE ESCAPE STRESS</span></p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>Copyright © 2009 LIFE REVOLUTION - All Rights Reserved</p>
</div>





<div class="style2" style= "position:absolute;top:8px;right:80px;">
888-9-LIFE-REV (888-954-3373)
</div>

<div style= "position:absolute;top:8px;right:620px;">
<a href= "http://www.liferevolution.com/sitemap/" class="style2">Site Map</a>
</div>

<div style= "position:absolute;top:8px;right:480px;">
<a href= "http://www.liferevolution.com/html/" class="style2">Enter Html Website</a>
</div>

<div style= "position:absolute;top:8px;right:310px;">
<a href= "mailto:info@liferevolution.com" class="style2">info@liferevolution.com</a>
</div>

</body>
</html>