Previously, this site was functioning fine without Ruby on Rails. However, after moving the code to Rails, a strange issue has arisen where the hover images turn black when the mouse is placed over them.
// Place all the styles related to the home controller here.
// They will automatically be included in application.css.
// You can use Sass (SCSS) here: http://sass-lang.com/
html {
height: 80%;
width:90%
}
p {
font-size:25px;
font-family: Helvetica, Arial, sans-serif;
}
body {
background-image: url('Loons-bkg.jpg');
width: 100%;
padding: 0;
height: 100%;
}
#logo {
width: 100%;
height: 190px;
background: url('Loons-Title.png');
background-position: center top;
background-size: contain;
background-repeat: no-repeat;
}
div.wrapper {
position: relative;
width: 80%;
height: 100%;
margin-left: 10%;
}
#blog {
position: absolute;
border-style: solid;
border-width: 2px;
width: 60%;
padding: 30px;
min-height: 92%;
background: rgb(255, 250, 250);
background: rgba(255, 250, 250, .5);
left: 20%;
}
#navbar {
height: 65px;
width: 700px;
list-style: none;
padding: 0;
margin: 0 auto;
overflow: hidden;
}
#navbar li {
float: left;
background-image: url(image_path('Loons-menu-sprite.png'));
}
#navbar a {
display: block;
padding-top: 66px;
text-decoration: none;
}
#nav-bio {
width: 79px;
}
#nav-bio:hover {
width: 79px;
background-position: 0px -66px;
}
...
This is the application view
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Loons</title>
<%= stylesheet_link_tag "application", :media => "all" %>
<%= javascript_include_tag "application" %>
<%= csrf_meta_tags %>
</head>
<body>
<div id = 'logo'></div>
<ul id="navbar">
<li id="nav-bio"><a href="#">Bio</a></li>
<li id="nav-music"><a href="#">Music</a></li>
<li id="nav-video"><a href="#">Video</a></li>
<li id="nav-press"><a href="#">Press</a></li>
<li id="nav-shows"><a href="#">Shows</a></li>
<li id="nav-shop"><a href="#">Shop</a></li>
</ul>
<div class = 'wrapper'>
<div id = 'blog'>
<%= yield %>
<iframe width="600" height="500" src="http://www.youtube.com/embed/MQ24QnrPKwo" frameborder="0" allowfullscreen></iframe>
</div>
<div id ="social">
<ul id="social-media">
<li id="facebook"><a href="https://www.facebook.com/pages/Loons/157520584337783?v=info">b</a></li>
<li id="bandcamp"><a href="http://loonsmusic.bandcamp.com/">b</a></li>
<li id="rc"><a href="#">b</a></li>
</ul>
</div>
</div>
</body>
</html>