I'm having some trouble getting this picture of mars and the main links surrounding it to be positioned correctly. I've surfed the web for hours trying to find a solution, but I just can't. I assume it's something to do with the css and they way I've declared their positions, but I can't pinpoint it exactly. I've tried using both absolute, fixed, relative positioning, and changing the offsets from percentages to pixels and everything like that (including setting the overflow to scrolled and hidden etc), but still no luck. It looks fine on my monitor, but when I go to another computer or resize my browser, it acts up in unwanted ways. Can anyone help?
Relevant HTML:
<html><head><link type="text/css" href="main.css" rel="stylesheet"><script type="text/javascript" src="main.js"></script></head><body><h1>Generic Welcome Message Here</h1><img id="earth" src="images/globe.gif" width="150" height="150" alt="globe.gif" /><img id="mars" src="images/mars.png" width="800" height="800" alt="mars.png" /><!--Navigation Bar --><a id="indexNav" href="index.html">Home</a><a id="aboutUsNav" href="aboutUs.html">About Us</a><a id="coverageNav" href="coverage.html">Coverage</a><a id="productsNav" href="products.html">Product Info</a><a id="ordersNav" href="orders.html">Inquiries-Orders</a><a id="contactUsNav" href="contactUs.html">Contact Us</a><a id="supportNav" href="support.html">Support</a><p id="footer">Copyright ©2014 Generic Title, All rights reserved</p></body></html>
Here is my CSS for the entire page:
body {overflow:hidden;background-image:url("images/space.jpg");}#earth {position:absolute;padding:0;left:200px;top:150px;}#mars {position:absolute;padding:0;right:-200px;}h1 {font:Palatino Linotype;color:white;text-decoration:underline;text-align:center;}p {font:"Times New Roman";font-size:20px;color:white;}#footer {position:fixed;bottom:-10px;right:5px;background::#355E95;font-size:15px;font-style:italic;}/*Navigation link section for homepage*/#indexNav{position:absolute; top:150px; right:400px; z-index:2; font-size:30px; color:white;}#aboutUsNav{position:absolute; top:250px; right:450px; z-index:2; font-size:30px; color:white;}#coverageNav{position:absolute; top:350px; right:500px; z-index:2; font-size:30px; color:white;}#productsNav{position:absolute; top:450px; right:550px; z-index:2; font-size:30px; color:white;}#ordersNav{position:absolute; top:550px; right:500px; z-index:2; font-size:30px; color:white;}#contactUsNav{position:absolute; top:650px; right:450px; z-index:2; font-size:30px; color:white;}#supportNav{position:absolute; top:750px; right:400px; z-index:2; font-size:30px; color:white;}