Some Annoying Little Issues

[Caitlin-havener]

I'm making a site for school with a fake product: http://sulley.dm.ucf.edu/~ca081919/adventures/finalproject/finalproject.html I probably didn't put the text that is over the image the best way.. I positioned it relative and z-indexed over it. On the "Application" page, in Chrome the positioning is perfect, but in Firefox it appears lower. Does anyone know why? Also, on the "Press" page, the same text I previously mentioned has a strange gap? Any ideas? The button in the navigation for "order" disappears when you zoom out the page? How can I prevent this? Finally, do I have to use php to get a button in the navigation to stay the hover color when that page is being viewed? Thanks ya'll! Let me know If I should make these separate threads. CSS:

@charset "utf-8";/* CSS Document */body{background-color:rgb(24,41,69);font-family:Arial, Helvetica, sans-serif;}@font-face {    font-family: 'ChunkFiveRegular';    src: url('fonts/Chunkfive-webfont.eot');    src: url('fonts/Chunkfive-webfont.eot?#iefix') format('embedded-opentype'),		 url('fonts/Chunkfive-webfont.woff') format('woff'),		 url('fonts/Chunkfive-webfont.ttf') format('truetype'),		 url('fonts/Chunkfive-webfont.svg#ChunkFiveRegular') format('svg'),   url('fonts/Chunkfive.otf');    font-weight: normal;    font-style: normal;}#banner{margin-bottom:20px;}p{font-family:Arial, Helvetica, sans-serif;}a{text-decoration:none;color:#94BA65;font-family:Arial, Helvetica, sans-serif;font-size:15px;}a:hover{color:#748E4F;}h1,h2{color:#2790B0;font-family:ChunkFiveRegular;font-size:25px;}#logo{height:50px;}#logo img{z-index:2;position:relative;}#blankArea{height:50px;}#blankArea2{height:30px;}#logIn{height:50px;text-align:right;}#logIn li{display:inline;}#navigation{height:30px;}#navigation li{display:inline;width:138px;height:30px;float:left;border:1px #637921 solid;text-align:center;vertical-align:middle;color:white;background-color:rgb(161,196,54);font-family:ChunkFiveRegular;font-size:20px;line-height:30px;}#navigation a{text-decoration:none;color:black;}#navigation li:hover, #navigation li:visited{background-color:#46A5E5;border:1px #2E6F93 solid;}#pricePromotion{float:left;}#orderButton{float:right;}#summary{padding:10px;background-color:#FBF6CE;margin:15px 0 15px 0;border-radius:7px;}#productImage{margin-top:15px;}#productImage img{margin-bottom:10px;background-color:#E8E8F0;border-radius:7px;}.productDetails{width:200px;display:inline;float:left;}.productDetailHeader{width:190px;margin:5px;}.productDetailContent{width:180px;margin:5px;padding:5px;background-color:#E8E8F0;border-radius:7px;}#blankArea3, #blankArea4{height:100px;}#footer{height:100px;text-align:center;}#footer li{display:inline;float:left;margin:5px;}#footer ul{padding-left:40px;margin-top:15px;}#footer h1{display:block;}.testimonials{margin:20px;min-height:150px;padding:15px;border-radius:7px;}.testimonials img{float:left;}.testimonials img{margin-right:15px;}.testimonials p{margin-top:10px;}hr{border:none;border-top:1px gray solid;height: 1px;}#press{margin:15px;}.article{margin:20px 0 20px 0;padding:15px;padding-bottom:25px;border-radius:7px;}.article img{float:left;}.articleMiddle{display:inline;margin-left:15px;text-indent:15px;}.articleRight{display:inline;float:right;}.application{margin:15px 0 15px 0;height:150px;padding:15px;border-radius:7px;}.application img{float:left;margin-right:10px;}.application h2{font-size:17px;}.application p{font-size:15px;}td,th{padding:12px;border:1px black solid;}th{background-color:#FBF6CE;}#orderButton{float:right;}.orderButton2 a{font-size:25px;font-family:ChunkFiveRegular;}.orderButton2 a{color:black;text-decoration:none;font-weight:bold}.homeNav{border-top-left-radius:7px;}.orderNav{border-top-right-radius:7px;}.copywrite{font-family:Arial, Helvetica, sans-serif;font-size:15px;}#order{background-color:#E8E8F0;}#floatingText{position:relative;z-index:2;top:-850px;left:35px;width:280px;}#floatingText h1{color:#DCDCDC;}#orderNowButton{background-color: #2790B0;width:150px;margin:15px;padding:10px;border-radius:7px;box-shadow: 5px 5px 10px #173844;border: 1px #28627C solid;}#orderNowButton2{background-color: #2790B0;width:150px;margin:15px;padding:10px;border-radius:7px;box-shadow: 5px 5px 10px #173844;border: 1px #28627C solid;}#orderNowButton h2{color:white;}#orderNowButton2 h2{color:white;}#orderNowButton:hover{padding:20px;position:relative;left:-10px;box-shadow: 7px 7px 15px #173844;}.orderEdit{margin-bottom:10px;}

Home page HTML:

<!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"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Use It And Lose It</title><link rel="stylesheet" type="text/css" href="reset.css" /><link rel="stylesheet" type="text/css" href="960.css" /><link rel="stylesheet" type="text/css" href="style.css" /></head><body><div class="container_12"><div class="grid_3" id="logo">	 <a href="finalproject.html"><img src="images/logo.gif" alt="Use It And Lose It logo" /></a>    </div>    <div class="grid_7" id="blankArea">    </div>    <div class="grid_2" id="logIn">	 <ul>		 <li><a href="#">Log-In</a> | </li>		    <li><a href="#">Cart</a></li>	    </ul>    </div>       <div class="grid_3" id="blankArea2">    </div>    <div class="grid_9" id="navigation">	 <ul>		 <a href="finalproject.html"><li class="homeNav">Home</li></a>		 <a href="testimonials.html"><li>Testimonials</li></a>		    <a href="press.html"><li>Press</li></a>		    <a href="application.html"><li>Application</li></a>		    <a href="order.html"><li class="orderNav">Order</li></a>	    </ul>    </div>       <div class="grid_12" id="banner">	 <img src="images/main_banner_5_1.jpg" alt="banner" />	    <!--Image from http://www.bodymedia.com/-->    </div>       <div class="grid_4" id="productImage">	 <img src="images/wholekit.gif" alt="product" />	    <div id="pricePromotion">		 <h2>Only $299!</h2>	    </div>	    <div id="orderButton">		 <p class="orderButton2"><a href="order.html" style="color:#A1C436;">Order Now!</a></p>	    </div>    </div>    <div class="grid_8" id="productInfo">	 <div id="summary">		 <p>Tired of measuring and guessing all of the food you eat and exercise activities you do? Finally there is an answer in this new revolutionary kit. The "Use It AND Lose It" Kits are a ground-breaking approach to weight loss and calorie counting. The kit consists of three pieces of amazing technology. </p>	    </div>	    <div class="productDetails">		 <div class="productDetailHeader">			 <h1>Use-It Scale</h1>		    </div>		    <div class="productDetailContent">			 <p>The second piece is the "Loss-Scale": place the food that you are weighing on the scale. Then use the interface to select what kind of food it is you are measuring and it will send those calorie numbers throughout the day to our application. </p>		    </div>	    </div>	    <div class="productDetails">		 <div class="productDetailHeader">			 <h1>Lose-It Band</h1>		    </div>		    <div class="productDetailContent">			 <p>The first is the "Loss-Band": Simply turn on and wear the comfortable, weightless arm band from the time you wake up to just before you go to bed. It continually takes your body temperature against the time to calculate calorie burn then sends those numbers to subtract your calorie expenditure from calorie intake in our application.</p>		    </div>	    </div>	    <div class="productDetails">		 <div class="productDetailHeader">			 <h1>Application</h1>		    </div>		    <div class="productDetailContent">			 <p>And finally we have the application formerly mentioned that will keep track of all the calories and in which you can use to make and track your goals and weight loss. This application can be used on your computer, iphone, and/or android.</p>		    </div>	    </div>    </div>   <div class="grid_1" id="blankArea3">    </div>    <div class="grid_10" id="footer">	 <ul>		 <li><a href="#">Returns & Warranty</a> | </li>		    <li><a href="#">Product Manual</a> | </li>		    <li><a href="#">FAQ</a> | </li>		    <li><a href="#">Jobs</a> | </li>		    <li><a href="#">Privacy Policy</a> | </li>		    <li><a href="#">Terms of Use</a> | </li>		    <li><a href="credits.html">Photo/Content Credits</a></li>	    </ul><br /><br />	    <h1 class="copywrite">© 2011 Use It And Lose It</h1>    </div>    <div class="grid_1" id="blankArea4">    </div><div id="floatingText"><h1>For a limited time order the Use It And Lose It Kit for only $299! Or 6 payments of $50!</h1>    <a href="order.html"><div id="orderNowButton" style="margin-left:40px;">	 <h2>Order Now!</h2>    </div></a></div>	   </div> </body></html>

[Ingolme]

You most likely should be using background-imagesn instead of positioning things over <img> elements.The text appears to change the line height to accomodate the $ symbol. There's nothing you can do about that. For the navigation, just add an extra class name to the menu element when the page is currently visited.