1 reply [Last post]
killthepixelnow
killthepixelnow's picture
Offline
newbie
Last seen: 2 years 34 weeks ago
Timezone: GMT-5
Joined: 2011-12-19
Posts: 4
Points: 7

Hello guys, I'm struggling wth a problem on one of the sites I'm programming. In this site there's a button bar, depending on which section you are, one of the buttons must be highlighted. In addition to this, a footer button bar was added, and the buttons in here must be highlighted too depending on the page you are.

This is the HTML code, and it works on a separate document:

<body id="rodencia-home">
<div id="main_menu">
    <ul>
        <li class="button001"><a href="index.html"><span>Inicio</span></a></li>
        <li class="button002"><a href="historia001.html"><span>Historia</span></a></li>
        <li class="button003"><a href="personajes001-001.html"><span>Personajes</span></a></li>
        <li class="button004"><a href="galeria001-001.html"><span>Galería</span></a></li>
        <li class="button005"><a href="videos001-001.html"><span>Videos</span></a></li>
        <li class="button006"><a href="juegos001.html"><span>Juegos</span></a></li>
    </ul>
 	<!--End of buttons-->
</div>
<!--End of main menu-->
<p>&nbsp;</p>
<div id="footer_menu">
    <ul>
        <li class="button001b"><a href="index.html"><span>Home</span></a></li>
        <li class="button002b"><a href="historia001.html"><span>Story</span></a></li>
        <li class="button003b"><a href="personajes001-001.html"><span>Characters</span></a></li>
        <li class="button004b"><a href="galeria001-001.html"><span>Gallery</span></a></li>
        <li class="button005b"><a href="videos001-001.html"><span>Videos</span></a></li>  
        <li class="button006b"><a href="juegos001.html"><span>Games</span></a></li>  
        <li class="button007b"><a href="socios001.html"><span>Partners</span></a></li>  
  </ul>	
  <!--End of buttons-->
</div>
<!--End of footer menu-->
</body>

Here's the CSS that works:

<code>@charset "UTF-8";
/* CSS Document */
 
/*SELECTED BUTTONS ON HEADER*/
#rodencia-home #main_menu li.button001 a,
#rodencia-historia #main_menu li.button002 a,
#rodencia-personajes #main_menu li.button003 a,
#rodencia-galeria #main_menu li.button004 a,
#rodencia-videos #main_menu li.button005 a,
#rodencia-juegos #main_menu li.button006 a{
	background-position:bottom;
}
/*SELECTED BUTTONS ON FOOTER*/
#rodencia-home #footer_menu li.button001b a,
#rodencia-historia #footer_menu li.button002b a,
#rodencia-personajes #footer_menu li.button003b a,
#rodencia-galeria #footer_menu li.button004b a,
#rodencia-videos #footer_menu li.button005b a,
#rodencia-juegos #footer_menu li.button006b a,
#rodencia-socios #footer_menu li.button007b a{
	background-position:bottom;
}
/**/
body{
	margin:0;
	padding:0;
	background-color:#120703;
}
#main_menu{
	width:520px;
	height:23px;
}
#main_menu ul{
	margin:0;
	padding:0;
	list-style:none;
}
#main_menu ul li{ 
	float:left;
	margin-right:14px;
	text-decoration:none;
}
#main_menu span{
	display:none;
}
#menu002 ul{
	list-style:none;
	margin:0 0 0 0;
	padding:0 0 0 0;
}
#menu002 span{
	display:none;
}
#main_menu .button001 a{
	background-image:url(../images/btn-inicio.png);
	width:68px;
	height:23px;
	display:block;
}
#main_menu .button001 a:hover{
	background-position:bottom;
}
#main_menu .button002 a{
	background-image:url(../images/btn-historia.png);
	width:68px;
	height:23px;
	display:block;
}
#main_menu .button002 a:hover{
	background-position:bottom;
}
#main_menu .button003 a{
	background-image:url(../images/btn-personajes.png);
	width:81px;
	height:23px;
	display:block;
}
#main_menu .button003 a:hover{
	background-position:bottom;
}
#main_menu .button004 a{
	background-image:url(../images/btn-galeria.png);
	width:67px;
	height:23px;
	display:block;
}
#main_menu .button004 a:hover{
	background-position:bottom;
}
#main_menu .button005 a{
	background-image:url(../images/btn-videos.png);
	width:68px;
	height:23px;
	display:block;
}
#main_menu .button005 a:hover{
	background-position:bottom;
}
#main_menu .button006 a{
	background-image:url(../images/btn-juegos.png);
	width:68px;
	height:23px;
	display:block;
}
#main_menu .button006 a:hover{
	background-position:bottom;
}
/*FOOTER MENU*/
#footer_menu span{
	display:none;
}
#footer_menu{
	width:500px;
	height:27px;
}
#footer_menu ul{
	margin:0;
	padding:0;
	list-style:none;
}
#footer_menu ul li{ 
	float:left;
	text-decoration:none;
	margin:0;
	padding:0;
}
#footer_menu .button001b{
	padding-right:20px;
}
#footer_menu .button001b a{
	background-image:url(../images/btn-inicio002.png);
	background-repeat:no-repeat;
	width:42px;
	height:27px;
	display:block;
}
#footer_menu .button001b a:hover{
	background-position:bottom;
}
#footer_menu .button002b{
	padding-right:20px;
}
#footer_menu .button002b a{
	background-image:url(../images/btn-historia002.png);
	background-repeat:no-repeat;
	width:39px;
	height:27px;
	display:block;
}
#footer_menu .button002b a:hover{
	background-position:bottom;
}
#footer_menu .button003b{
	padding-right:20px;
}
#footer_menu .button003b a{
	background-image:url(../images/btn-personajes002.png);
	background-repeat:no-repeat;
	width:74px;
	height:27px;
	display:block;	
}
#footer_menu .button003b a:hover{
	background-position:bottom;
}
#footer_menu .button003b{
	padding-right:20px;
}
#footer_menu .button004b a{
	background-image:url(../images/btn-galeria002.png);
	background-repeat:no-repeat;
	width:54px;
	height:27px;
	display:block;
}
#footer_menu .button004b{
	padding-right:20px;
}
#footer_menu .button004b a:hover{
	background-position:bottom;
}
#footer_menu .button005b{
	padding-right:20px;
}
#footer_menu .button005b a{
	background-image:url(../images/btn-videos002.png);
	background-repeat:no-repeat;
	width:54px;
	height:27px;
	display:block;
}
#footer_menu .button005b a:hover{
	background-position:bottom;
}
#footer_menu .button006b{
	padding-right:20px;
}
#footer_menu .button006b a{
	background-image:url(../images/btn-juegos002.png);
	background-repeat:no-repeat;
	width:50px;
	height:27px;
	display:block;
}
#footer_menu .button006b a:hover{
	background-position:bottom;
}
#footer_menu .button007b{
}
#footer_menu .button007b a{
	background-image:url(../images/btn-socios002.png);
	background-repeat:no-repeat;
	width:59px;
	height:27px;
	display:block;
}

Now, when I try to implement this thing on the final site only the footer button bar follow the order to highlight one of the buttons. The header button bar ignores the command. I've reviewed the site over and over again without results.

Here's the HTML that is giving me troubles:

<!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" />
<meta http-equiv="keywords" content="rodencia,animacion,pelicula,3d,animation,film,peru">
<meta name="description" content="Rodencia y el Diente de la Princesa" />
<title>Rodencia | Home</title>
<link href="css/rodencia-styles.css" rel="stylesheet" type="text/css" />
<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon" />
</head>
 
<body id="rodencia-home">
<div id="container">
  <div id="header">
    <div id="top_header001">
      <div id="top_image">
        <div id="logo"> <a href="index.html"><img src="images/logo-rodencia001.png" alt="Rodencia" width="292" height="173" border="0" /></a> </div>
        <!--End of logo--> 
        <!--End of top image-->
        <div id="main_menu">
          <ul>
            <li class="button001"><a href="index.html"><span>Inicio</span></a></li>
            <li class="button002"><a href="historia001.html"><span>Historia</span></a></li>
            <li class="button003"><a href="personajes001-001.html"><span>Personajes</span></a></li>
            <li class="button004"><a href="galeria001-001.html"><span>Galería</span></a></li>
            <li class="button005"><a href="videos001-001.html"><span>Videos</span></a></li>
            <li class="button006"><a href="juegos001.html"><span>Juegos</span></a></li>
          </ul>
          <!--End of buttons--> 
        </div>
        <!--End of main menu--> 
      </div>
      <div id="bottom_header">
        <div id="inner_content">
          <div id="inner_top">
            <h1>RODENCIA, A MAGICAL ADVENTURE BEGINS</h1>
          </div>
          <!--End of inner top-->
          <div id="inner_middle">
            <div id="the_content">
              <div id="home-video"></div>
              <!--End of video-->
              <div id="home-info">
                <h2>Rodencia</h2>
                <p>Coming soon.</p>
              </div>
              <div id="home-boxes">
                <div id="boxes_container">
                  <div id="box001">
                    <div id="title"></div>
                    <div id="textual_info">
                      <p>Here you will find Rodencia wallpapers, pictures, and much more.</p>
                      <div id="button"><a href="descargas001-001.html" class="ver_mas"><span>Ver más</span></a> </div>
                    </div>
                  </div>
                  <p><!--End of box001--> 
                  </p>
                  <div id="box002">
                    <div id="title"></div>
                    <div id="textual_info">
                      <p>Want to know more about the magic kingdom of Rodencia? </p>
                      <div id="button"><a href="contacto001.html" class="escribenos"><span>Escríbenos</span></a></div>
                    </div>
                  </div>
                  <!--End of box002-->
                  <div id="box003">
                    <div id="title"></div>
                    <div id="textual_info">
                      <p>Have fun with our challenging games!</p>
                      <div id="button"><a href="juegos001.html" class="ver_juegos"><span>Ver juegos</span></a></div>
                    </div>
                  </div>
                  <div class="clean"></div>
                </div>
              </div>
              <div class="clean"></div>
            </div>
          </div>
          <!--End of inner middle--> 
        </div>
        <!--End of inner content--> 
 
      </div>
      <!--End of bottom header--> 
    </div>
  </div>
  <!--End of header-->
  <div id="footer">
    <div id="footer_image">
      <div id="derechos">
        <p>© REDPOST. All Rights Reserved.</p>
      </div>
      <div id="red_post"><a href="http://www.redpost.pe" target="_blank"><img src="images/logo-red_post001.png" alt="Red Post" width="50" height="41" border="0" /></a></div>
      <div id="vista_sur"><a href="http://www.vistasurfilms.com.ar/" target="_blank"><img src="images/logo-vista_sur001.png" alt="Vista Sur" width="40" height="40" border="0" /></a></div>
      <div id="isil">
        <p>Designed by:</p>
        <a href="http://www.isil.pe" target="_blank"><img src="images/logo-isil001.png" alt="ISIL" width="52" height="30" border="0" /></a></div>
      <div id="students">
        <p>Alexis Suarez Chávez</p>
        <p>Miguel Ángel Huamán</p>
      </div>
      <div id="facebook"><a href="http://www.facebook.com/rodencia" class="btn-facebook" target="_blank"><span>Facebook</span></a></div>
      <div id="twitter"><a href="http://twitter.com/rodencia" class="btn-twitter" target="_blank"><span>Twitter</span></a></div>
      <div id="footer_menu">
        <ul>
          <li class="button001b"><a href="index.html"><span>Home</span></a></li>
          <li class="button002b"><a href="historia001.html"><span>Story</span></a></li>
          <li class="button003b"><a href="personajes001-001.html"><span>Characters</span></a></li>
          <li class="button004b"><a href="galeria001-001.html"><span>Gallery</span></a></li>
          <li class="button005b"><a href="videos001-001.html"><span>Videos</span></a></li>
          <li class="button006b"><a href="juegos001.html"><span>Games</span></a></li>
          <li class="button007b"><a href="socios001.html"><span>Partners</span></a></li>
        </ul>
      </div>
    </div>
    <!--End of footer image--> 
  </div>
  <!--End of footer--> 
</div>
</body>
</html>

Here's the CSS code of the site that is not working:

å@charset "UTF-8";
/* CSS Document */
/*SELECTED BUTTONS ON HEADER*/
#rodencia-home #main_menu li.button001 a,
#rodencia-historia #main_menu li.button002 a,
#rodencia-personajes #main_menu li.button003 a,
#rodencia-galeria #main_menu li.button004 a,
#rodencia-videos #main_menu li.button005 a,
#rodencia-juegos #main_menu li.button006 a{
	background-position:bottom;
}
/*SELECTED BUTTONS ON FOOTER*/
#rodencia-home #footer_menu li.button001b a,
#rodencia-historia #footer_menu li.button002b a,
#rodencia-personajes #footer_menu li.button003b a,
#rodencia-galeria #footer_menu li.button004b a,
#rodencia-videos #footer_menu li.button005b a,
#rodencia-juegos #footer_menu li.button006b a,
#rodencia-socios #footer_menu li.button007b a{
	background-position:bottom;
}
/**/
.clean{
	clear:both;
}
body{
	margin:0;
	padding:0;
	background-color:#120703;
}
 
#container{
	width:100%;
	background-color:#120703;
	margin-bottom:0;
}
#body{
	padding-top:0;
	padding-bottom:0;
	margin-left:auto;
	margin-right:auto;
	width:100%;
	background-repeat: repeat-y;
	background-position: center;
}
/**/
/*HEADER*/
#header{
	width:100%;
	position:relative;
	z-index: 2;
}
#top_header001{
	background-image:url(../images/header-roll_img001.jpg);
	background-position:center top;
	background-repeat: no-repeat;
	margin-left:auto;
	margin-right:auto;
}
#top_header002{
	background-image:url(../images/header-roll_img002.jpg);
	background-position:center top;
	background-repeat: no-repeat;
	margin-left:auto;
	margin-right:auto;
}
#top_header003{
	background-image:url(../images/header-roll_img003.jpg); 
	background-position:center top;
	background-repeat: no-repeat;
	margin-left:auto;
	margin-right:auto;
}
#top_header004{
	background-image:url(../images/header-roll_img004.jpg);
	background-position:center top;
	background-repeat: no-repeat;
	margin-left:auto;
	margin-right:auto;
}
#top_header005{
	background-image:url(../images/header-roll_img005.jpg);
	background-position:center top;
	background-repeat: no-repeat;
	margin-left:auto;
	margin-right:auto;
}
#top_header006{
	background-image:url(../images/header-roll_img006.jpg);
	background-position:center top;
	background-repeat: no-repeat;
	margin-left:auto;
	margin-right:auto;
}
#top_header007 {
	background-image:url(../images/header-roll_img007.jpg);
	background-position:center top;
	background-repeat: no-repeat;
	margin-left:auto;
	margin-right:auto;
}
#top_image{
	background-image:url(../images/header-top_bg001.jpg);
	background-repeat:no-repeat;
	background-position:top;
	margin-left:auto;
	margin-right:auto;
	height:39px;
	position:relative;
}
#logo{
	margin-left:240px;
	width:292px;
	height:173px;
	visibility: visible;
	z-index: 30;
	overflow: visible;
}
#bottom_header{
	margin-top:100px;
}
a.home-left_arrow{
	background-image:url(../images/home-left_arrow001.png);
	background-repeat:no-repeat;
	width:58px;
	height:58px;
	display:block;
}
a:hover.home-left_arrow{
	background-image:url(../images/home-left_arrow001.png);
	background-repeat:no-repeat;
	background-position:bottom;
}
a.home-right_arrow{
	background-image:url(../images/home-right_arrow001.png);
	background-repeat:no-repeat;
	width:58px;
	height:58px;
	display:block;
}
a:hover.home-right_arrow{
	background-image:url(../images/home-right_arrow001.png);
	background-repeat:no-repeat;
	background-position:bottom;
}
/**/
/*MAIN BUTTONS*/
#main_menu span{
	display:none;
}
#main_menu{
	position:absolute;
	top:39px;
	left:552px;
	width:520px;
	height:23px;
	z-index: 50;
}
#main_menu ul{
	margin:0;
	padding:0;
	list-style:none;
}
#main_menu ul li{ 
	float:left;
	margin-right:14px;
	text-decoration:none;
}
#main_menu .button001 a{
	background-image:url(../images/btn-inicio.png);
	width:68px;
	height:23px;
	display:block;
}
#main_menu .button001 a:hover{
	background-position:bottom;
}
#main_menu .button002 a{
	background-image:url(../images/btn-historia.png);
	width:68px;
	height:23px;
	display:block;
}
#main_menu .button002 a:hover{
	background-position:bottom;
}
#main_menu .button003 a{
	background-image:url(../images/btn-personajes.png);
	width:81px;
	height:23px;
	display:block;
}
#main_menu .button003 a:hover{
	background-position:bottom;
}
#main_menu .button004 a{
	background-image:url(../images/btn-galeria.png);
	width:67px;
	height:23px;
	display:block;
}
#main_menu .button004 a:hover{
	background-position:bottom;
}
#main_menu .button005 a{
	background-image:url(../images/btn-videos.png);
	width:68px;
	height:23px;
	display:block;
}
#main_menu .button005 a:hover{
	background-position:bottom;
}
#main_menu .button006 a{
	background-image:url(../images/btn-juegos.png);
	width:68px;
	height:23px;
	display:block;
}
#main_menu .button006 a:hover{
	background-position:bottom;
}
/**/
/*CONTENT*/
#arrows{
	margin-left:auto;
	margin-right:auto;
	width:1000px;
	height:78px;
	position:relative;
}
#arrows span{
	display:none;
}
#left_arrow{
	height:59px;
	width:58px;
	position:absolute;
	left:40px;
	top:10px;
}
#right_arrow{
	height:59px;
	width:58px;
	position:absolute;
	left:902px;
	top:10px;
}
#inner_content{
	padding-top:0;
	padding-bottom:0;
	margin-left:auto;
	margin-right:auto;
	width:100%;
}
#inner_top{
	background-image:url(../images/content-title_bg004.png);
	background-repeat:no-repeat;
	width:1000px;
	height:68px;
	margin-left:auto;
	margin-right:auto;
}
#inner_top h1{
	font-family:Arial, Helvetica, sans-serif;
	text-shadow:0 3px 0 #000;
	font-size:22px;
	color:#B4AB9E;
	padding-top:32px;
	margin-left:0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 90px;
}	
#inner_top p2{
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	color:#B4AB9E;
	margin:0 0 0 0;
	padding:32px 90px 0 0;
	float:right;
}	
#inner_top p2 a{
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	color:#B4AB9E;
	text-decoration:none;
}	
#inner_top p2 a:hover{
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	color:#D1B676;
	text-decoration:underline;
}	
#inner_middle{
	background:url(../images/content_bg001.png);
	margin-left:auto;
	margin-right:auto;
	width:1000px;
	padding-top:20px;
}
#columns{
	background:url(../images/content_bg001.png);
	margin-bottom:11px;
}
#home-video{
	background-image:url(../images/home-video_bg001.png);
	background-repeat:no-repeat;
	width:806px;
	height:428px;
	margin-left:auto;
	margin-right:auto;
	margin-bottom:10px;
	padding-top: 26px;
	padding-left: 19px;
}
#home-info{
	background-color:#6e654c;
	width:785px;
	margin-left:auto;
	margin-right:auto;
	margin-bottom:10px;
	padding:8px 20px 8px 20px;
 
}
#home-info h2{
	font-size:20px;
	color:#FFF;
	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
	font-weight:bold;
	margin:0;
	padding:0 0 3px 0;
}
#home-info p{
	font-size:15px;
	color:#FFF;
	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
	margin:0;
	padding:0;
}
#home-boxes{
	margin:0;
	padding:0;
}
#boxes_container{
	width:825px;
	margin-left:auto;
	margin-right:auto;
}
#box001{
	background-image:url(../images/box001-bg001.png);
	background-position:left bottom;
	background-repeat:no-repeat;
	width:149px;
	height:120px;
	margin-right:9px;
	padding-left:120px;
	padding-top:30px;
	float:left;
}
#box001 #title{
	background-image:url(../images/box001-title001.png);
	background-repeat:no-repeat;
	width:97px;
	height:23px;
	margin:0 0 5px 0;
	padding:0;
}
#box001 #textual_info{
	width:130px;
	height: 54px;
	margin-top: 0;
	margin-right: 0;
	margin-bottom: 0;
	margin-left: 0px;
}
#box001 #textual_info p{
	height: 54px;
	font-family:Tahoma, Geneva, sans-serif;
	font-size:11px;
	color:#473d34;
	padding:0;
	margin:0;
	line-height:12px;
}
#box001 #button{
	margin:0;
	padding:0;
	width:130px;
	text-align:right;
}
#box001 #button span{
	display:none;
}
a.ver_mas{
	background-image:url(../images/btn-ver_mas001.png);
	background-repeat:no-repeat;
	width:130px;
	height:16px;
	display:block;
	background-position: left top;
}
a:hover.ver_mas {
	background-image:url(../images/btn-ver_mas001.png);
	background-repeat:no-repeat;
	background-position: left bottom;
}
a.escribenos{
	background-image:url(../images/btn-escribenos001.png);
	background-repeat:no-repeat;
	width:130px;
	height:16px;
	display:block;
	background-position: left top;
}
a:hover.escribenos {
	background-image:url(../images/btn-escribenos001.png);
	background-repeat:no-repeat;
	background-position: left bottom;
}
a.ver_juegos{
	background-image:url(../images/btn-ver_juegos001.png);
	background-repeat:no-repeat;
	width:130px;
	height:16px;
	display:block;
	background-position: left top;
}
a:hover.ver_juegos {
	background-image:url(../images/btn-ver_juegos001.png);
	background-repeat:no-repeat;
	background-position: left bottom;
}
#box002{
	background-image:url(../images/box002-bg001.png);
	background-position:bottom;
	background-repeat:no-repeat;
	width:149px;
	height:120px;
	margin-right:9px;
	padding-left:120px;
	padding-top:30px;
	float:left;
}
#box002 #button{
	margin:0;
	padding:0;
	width:130px;
	text-align:right;
}
#box002 #button span{
	display:none;
}
#box002 #title{
	background-image:url(../images/box002-title001.png);
	background-repeat:no-repeat;
	width:100px;
	height:23px;
	margin:0 0 5px 0;
	padding:0;
}
#box002 #textual_info{
	width:130px;
	height: 54px;
	height:auto;
	margin:0;
	padding: 0px;
}
#box002 #textual_info p{
	height: 54px;
	font-family:Tahoma, Geneva, sans-serif;
	font-size:11px;
	color:#473d34;
	padding:0;
	margin:0;
	line-height:12px;
}
#box002 #textual_info p a{
	color:#473d34;
	text-decoration:underline;
}
#box002 #textual_info p a:hover{
	color:#473d34;
	text-decoration:underline;
}
#box003{
	background-image:url(../images/box003-bg001.png);
	background-position:bottom;
	background-repeat:no-repeat;
	width:159px;
	height:120px;
	padding-left:110px;
	padding-top:30px;
	float:left;
}
#box003 #title{
	background-image:url(../images/box003-title001.png);
	background-repeat:no-repeat;
	width:139px;
	height:23px;
	margin:0 0 5px 0;
	padding:0;
}
#box003 #textual_info{
	width:140px;
	height: 54px;
	margin:0;
}
#box003 #textual_info p{
	height: 54px;
	font-family:Tahoma, Geneva, sans-serif;
	font-size:11px;
	color:#473d34;
	padding:0;
	margin:0;
	line-height:12px;
}
#box003 #textual_info p a{
	color:#473d34;
	text-decoration:underline;
}
#box003 #textual_info p a:hover{
	color:#473d34;
	text-decoration:underline;
}
#box003 #button{
	margin:0;
	padding:0;
	width:140px;
	text-align:right;
}
#box003 #button span{
	display:none;
}
a.app_store{
	background-image:url(../images/btn-app_store_up.png);
	background-repeat:no-repeat;
	width:140px;
	height:37px;
	display:block;
	background-position: center top;
}
a:hover.app_store {
	background-image:url(../images/btn-app_store_down.png);
	background-repeat:no-repeat;
	background-position: center bottom;
}
/**/
/*FOOTER*/
#footer{
	width:100%;
	height:212px;
	background-position:bottom;
	background-repeat:no-repeat;
	background-image: url(../images/footer-bg001.png);
	margin-top:-45px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	z-index: 1;
	padding: 0px;
}
#footer_image{
	position:relative;
	background:#120703;
	background:url(../images/footer-center_bg001.png);
	width:1000px;
	margin-left:auto;
	margin-right:auto;
	height:212px;
	padding: 0px;
	margin-top: 0px;
	margin-bottom: 0px;
}
#derechos{
	position:absolute;
	top:65px;
	left:424px;
	margin:0 0 0 0;
	padding:0 0 0 0;
}
#derechos p{
	margin:0 0 0 0;
	padding:0 0 0 0;
	font-family:Tahoma, Geneva, sans-serif;
	font-size:11px;
	color:#D1B676;
}
#footer002{
	width:100%;
	height:212px;
	background-position:bottom;
	background-repeat:no-repeat;
	background-image: url(../images/footer-bg001.png);
	margin-top: -55px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
}
#footer_image002{
	position:relative;
	background:#120703;
	background:url(../images/footer-center_bg002.png);
	width:1000px;
	margin-left:auto;
	margin-right:auto;
	height:212px;
	padding: 0px;
	margin-top: 0px;
	margin-bottom: 0px;
}
#red_post{
	position:absolute;
	top:141px;
	left:42px;
}
#vista_sur {
	position:absolute;
	top:141px;
	left:112px;
	width: auto;
}
#vista_sur span {
	display: none;
}
#vista_sur a  {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #666;
	text-decoration: none;
	margin: 0px;
	padding: 0px;
	font-weight: bolder;
}
#vista_sur a:hover {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #666;
	text-decoration: underline;
	margin: 0px;
	padding: 0px;
}
#isil{
	width:65px;
	position:absolute;
	top:146px;
	left:818px;
}
#isil p{
	margin:0 0 3px 0;
	padding:0 0 0 0;
	font-family:Arial, Helvetica, sans-serif;
	font-size:9px;
	color:#999999;
	text-align:left;
}
#students{
	width:96px;
	position:absolute;
	top:160px;
	left:880px;
	border-left-width: 1px;
	border-left-style: solid;
	border-left-color: #8D8F8F;
}
#students p{
	margin:0 0 0 0;
	padding:0 0 0 0;
	font-family:Arial, Helvetica, sans-serif;
	font-size:9px;
	color:#999999;
	text-align:right;
}
#facebook{
	position:absolute;
	top:109px;
	left:893px;
}
#facebook span{
	display:none;
}
#twitter{
	position:absolute;
	top:109px;
	left:943px;
}
#twitter span{
	display:none;
}
/**/
/*FOOTER BUTTONS*/
#footer_menu span{
	display:none;
}
#footer_menu{
	position:absolute;
	top:158px;
	left:252px;
	width:500px;
	height:27px;
}
#footer_menu ul{
	margin:0;
	padding:0;
	list-style:none;
}
#footer_menu ul li{ 
	float:left;
	text-decoration:none;
	margin:0;
	padding:0;
}
#footer_menu .button001b{
	padding-right:20px;
}
#footer_menu .button001b a{
	background-image:url(../images/btn-inicio002.png);
	background-repeat:no-repeat;
	width:42px;
	height:27px;
	display:block;
}
#footer_menu .button001b a:hover{
	background-position:bottom;
}
#footer_menu .button002b{
	padding-right:20px;
}
#footer_menu .button002b a{
	background-image:url(../images/btn-historia002.png);
	background-repeat:no-repeat;
	width:39px;
	height:27px;
	display:block;
}
#footer_menu .button002b a:hover{
	background-position:bottom;
}
#footer_menu .button003b{
	padding-right:20px;
}
#footer_menu .button003b a{
	background-image:url(../images/btn-personajes002.png);
	background-repeat:no-repeat;
	width:74px;
	height:27px;
	display:block;	
}
#footer_menu .button003b a:hover{
	background-position:bottom;
}
#footer_menu .button003b{
	padding-right:20px;
}
#footer_menu .button004b a{
	background-image:url(../images/btn-galeria002.png);
	background-repeat:no-repeat;
	width:54px;
	height:27px;
	display:block;
}
#footer_menu .button004b{
	padding-right:20px;
}
#footer_menu .button004b a:hover{
	background-position:bottom;
}
#footer_menu .button005b{
	padding-right:20px;
}
#footer_menu .button005b a{
	background-image:url(../images/btn-videos002.png);
	background-repeat:no-repeat;
	width:54px;
	height:27px;
	display:block;
}
#footer_menu .button005b a:hover{
	background-position:bottom;
}
#footer_menu .button006b{
	padding-right:20px;
}
#footer_menu .button006b a{
	background-image:url(../images/btn-juegos002.png);
	background-repeat:no-repeat;
	width:50px;
	height:27px;
	display:block;
}
#footer_menu .button006b a:hover{
	background-position:bottom;
}
#footer_menu .button007b{
}
#footer_menu .button007b a{
	background-image:url(../images/btn-socios002.png);
	background-repeat:no-repeat;
	width:59px;
	height:27px;
	display:block;
}
#footer_menu .button007b a:hover{
	background-position:bottom;
}
a.btn-facebook{
	background-image:url(../images/btn-facebook.png);
	background-repeat:no-repeat;
	width:32px;
	height:32px;
	display:block;
}
a:hover.btn-facebook {
	background-image:url(../images/btn-facebook.png);
	background-repeat:no-repeat;
	background-position: bottom;
}
a.btn-twitter{
	background-image:url(../images/btn-twitter.png);
	background-repeat:no-repeat;
	width:32px;
	height:32px;
	display:block;
}
a:hover.btn-twitter {
	background-image:url(../images/btn-twitter.png);
	background-repeat:no-repeat;
	background-position: bottom;
}

Any ideas to solve this isuue? What I'm doing wrong and why the bars work perfectly on a separate document?

You can check the site in here:
www (dot) rodencia (dot) com/eng/html/index.html

Thanks in advance!

balajidesign
balajidesign's picture
Offline
Enthusiast
Last seen: 1 year 1 week ago
Timezone: GMT+5.5
Joined: 2012-01-31
Posts: 116
Points: 124

this is working fine now. did

this is working fine now. did you recheck it again?