Rollover image and alignment problem

[elite311]

I'm pretty new to the world of CSS but love how it works, I have been doing a lot of reading about it and how to implement it into my site. I think I'm getting pretty good at at it.... and then I can't figure this problem out which seems so simple.

 

I'm trying to use CSS to make 3 buttons with rollovers. This is my code:

 

/*==== BUTTONS =====*/

#applyonline
{
  display: block;
  width: 144px;
  height: 57.5px;
  background: url("../images/applyonline.gif") no-repeat 0 0;

}

#applyonline:hover
{ 
  background-position: 0 -58px;
}

#applyonline span
{
  position: absolute;
  top: -999em;
}

#reloadcard
{
  display: block;
  width: 136px;
  height: 58px;
  background: url("../images/reloadcard.gif") no-repeat 0 0;

}

#reloadcard:hover
{ 
  background-position: 0 -58px;
}

#reloadcard span
{
  position: absolute;
  top: -999em;
}

#checkbalance
{
  display: block;
  width: 138px;
  height: 57.5px;
  background: url("../images/checkbalance.gif") no-repeat 0 0;

}

#checkbalance:hover
{ 
  background-position: 0 -58px;
}

#checkbalance span
{
  position: absolute;
  top: -999em;
}

 

The weird part is the apply online button works great but the other 2 buttons don't. When I rollover the re-load card and check balance button they disappear.  Here's the link to my site http://s262833979.onlinehome.us/AR2011/washcard.html

 

The other problem is I can't figure out how to line the 2 images up side by side.

 

Here's the code on my HTML page:

 

<div class="colum">
            <div align="left"><img src="images/outline-1.png" width="299" height="11"></div>
            <div align="left"><img src="images/washcard.jpg" alt="" width="298" height="141" class="p2"></div>
            <div align="center">
              <div align="center"><a id="applyonline" href="wcardorder.html" title="Apply Online"><span>Apply Online</span></a>
		 </div>
              <div align="center"><a id="reloadcard" href="wcardreload.php" title="Re-load Card"><span>Re-load Card</span></a>
		  		       <a id="checkbalance" href="wcardbalance.php" title="Check Balance"><span>Check Balance</span></a>
		 </div>
            </p>
            </div>            
          </div>

 

Can anyone help me fix this? I would really appreciate it because I just cant seem to figure out what is going wrong.

[elite311]

Ok so I feel stupid now! I fixed the image rollover problem. Turns out you need to upload the correct image for it to work...WOW I feel dumb. I still haven't figured out how to align the 2 buttom images but I'll keep playing with it.

[elite311]

Looks like I didn't even need to ask this question, sorry. After doing some more reading I found that adding in:

 

float:left;

 

To my code and then a few margins I got everything to line up perfectly. So for anyone else that might have this same problem of get things to line up properly my code ended up like this:

 

#reloadcard
{
  display: block;
  width: 136px;
  height: 57.5px;
  float:left;
  margin-left: 13px;
  margin-top: 20px;
  margin-bottom: 20px;
  background: url("../images/reloadcard.gif") no-repeat 0 0;

}

#reloadcard:hover
{ 
  background-position: 0 -58px;
}

#reloadcard span
{
  position: absolute;
  top: -999em;
}

#checkbalance
{
  display: block;
  width: 138px;
  height: 57.5px;
  float:left;
  margin-top: 20px;
  margin-bottom: 20px;
  background: url("../images/checkbalance.gif") no-repeat 0 0;

}

#checkbalance:hover
{ 
  background-position: 0 -58px;
}

#checkbalance span
{
  position: absolute;
  top: -999em;
}