CSS image rollover problem...

  • DeadBolt
  • Novice
  • Novice
  • DeadBolt
  • Posts: 31

Post 3+ Months Ago

Hi,

I have been trying to get this working for to many hours, and I am absolutely baffled. I am using Coda to build the site (html & css)

I am using a png file that has both buttons in one graphic, and once hovered over, will shift the image to reveal the over state. I have tried several different css tricks - to no avail. Can someone take a look at this code and tell me if you notice something that is conflicting.

The button shows up, but it will not change state nor will it register that there is even a link connected to the button.

css
Code: [ Select ]
* {
    padding: 0px;
    margin: 0px;
}
body {
    font-size: 0.5em;
    font-family: Verdana, Arial, "Lucida Grande", sans-serif;
    background-repeat: repeat;
    background-image: url(images/bg_wallpaper2.gif);
}
#container {
    margin-left: auto;
    margin-bottom: 5em;
    margin-right: auto;
    margin-top: 0px;
    position: relative;
    width: 906px;
}
h1 {
    text-align: center;
    background-repeat: no-repeat;
    background-image: url(images/balmer_building.png);
    font-family: "Lucida Grande", Verdana, Arial, sans-serif;
    font-size: large;
    background-position: center top;
    margin-right: auto;
    margin-left: -9999px;
}
#buildingDIV {
    left: 50%;
    margin-left: -472px;
    text-align: center;
    position: absolute;
    height: 100%;
    width: 100%;
    z-index: 4;
    background-repeat: no-repeat;
    background-image: url(images/balmer_building.png);
}
#header {
    height: 231px;
    width: 100%;
}
#content {
    margin-left: -453px;
    left: 50%;
    text-align: center;
    position: absolute;
    z-index: 3;
    clear: both;
    background-image: url(images/content_bg.png);
    height: 500px;
    width: 906px;
}
#sidebar_left {
    margin-top: 65px;
    height: 100%;
    width: 171px;
    float: left;
}
#content_main {
    float: left;
    height: 100%;
    width: 668px;
    background-color: #fffcfb;
}
#content_right {
}
#sidebar_right {
}
#logo_sidebar {
    display: block;
    margin-bottom: 50px;
    margin-left: -17px;
    background-repeat: no-repeat;
    position: absolute;
    background-image: url(images/logo_sidebar.png);
    z-index: 2;
}

#home
{
 z-index: 10;
 margin-top: 125px;
 display: block;
 width: 171px;
 height: 46px;
 background: url("images/buttons/home2.png") no-repeat 0 0;
}
#home:hover
{
 background-position: 0 -171px;
}
#home span
{
 display: none;
  1. * {
  2.     padding: 0px;
  3.     margin: 0px;
  4. }
  5. body {
  6.     font-size: 0.5em;
  7.     font-family: Verdana, Arial, "Lucida Grande", sans-serif;
  8.     background-repeat: repeat;
  9.     background-image: url(images/bg_wallpaper2.gif);
  10. }
  11. #container {
  12.     margin-left: auto;
  13.     margin-bottom: 5em;
  14.     margin-right: auto;
  15.     margin-top: 0px;
  16.     position: relative;
  17.     width: 906px;
  18. }
  19. h1 {
  20.     text-align: center;
  21.     background-repeat: no-repeat;
  22.     background-image: url(images/balmer_building.png);
  23.     font-family: "Lucida Grande", Verdana, Arial, sans-serif;
  24.     font-size: large;
  25.     background-position: center top;
  26.     margin-right: auto;
  27.     margin-left: -9999px;
  28. }
  29. #buildingDIV {
  30.     left: 50%;
  31.     margin-left: -472px;
  32.     text-align: center;
  33.     position: absolute;
  34.     height: 100%;
  35.     width: 100%;
  36.     z-index: 4;
  37.     background-repeat: no-repeat;
  38.     background-image: url(images/balmer_building.png);
  39. }
  40. #header {
  41.     height: 231px;
  42.     width: 100%;
  43. }
  44. #content {
  45.     margin-left: -453px;
  46.     left: 50%;
  47.     text-align: center;
  48.     position: absolute;
  49.     z-index: 3;
  50.     clear: both;
  51.     background-image: url(images/content_bg.png);
  52.     height: 500px;
  53.     width: 906px;
  54. }
  55. #sidebar_left {
  56.     margin-top: 65px;
  57.     height: 100%;
  58.     width: 171px;
  59.     float: left;
  60. }
  61. #content_main {
  62.     float: left;
  63.     height: 100%;
  64.     width: 668px;
  65.     background-color: #fffcfb;
  66. }
  67. #content_right {
  68. }
  69. #sidebar_right {
  70. }
  71. #logo_sidebar {
  72.     display: block;
  73.     margin-bottom: 50px;
  74.     margin-left: -17px;
  75.     background-repeat: no-repeat;
  76.     position: absolute;
  77.     background-image: url(images/logo_sidebar.png);
  78.     z-index: 2;
  79. }
  80. #home
  81. {
  82.  z-index: 10;
  83.  margin-top: 125px;
  84.  display: block;
  85.  width: 171px;
  86.  height: 46px;
  87.  background: url("images/buttons/home2.png") no-repeat 0 0;
  88. }
  89. #home:hover
  90. {
  91.  background-position: 0 -171px;
  92. }
  93. #home span
  94. {
  95.  display: none;



and html
Code: [ Select ]
<body>


<div id="header">
    <span>
        <div id="buildingDIV"><span></span>
        </div>
    </span>
</div>

<div id="content">
    <span>
        <div id="sidebar_left"><span>
            <br><img id="logo_sidebar" src="images/logo_sidebar.png">
                <a id="home" href="index.html" title="Home"><span>Home</span></a>
    </span>
        </div>
    
        <div id="content_main">
            <span>
            </span>
        </div>


    </span>
</div>




</body>
  1. <body>
  2. <div id="header">
  3.     <span>
  4.         <div id="buildingDIV"><span></span>
  5.         </div>
  6.     </span>
  7. </div>
  8. <div id="content">
  9.     <span>
  10.         <div id="sidebar_left"><span>
  11.             <br><img id="logo_sidebar" src="images/logo_sidebar.png">
  12.                 <a id="home" href="index.html" title="Home"><span>Home</span></a>
  13.     </span>
  14.         </div>
  15.     
  16.         <div id="content_main">
  17.             <span>
  18.             </span>
  19.         </div>
  20.     </span>
  21. </div>
  22. </body>



Thanks a ton as always,
-Dave
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • mindfullsilence
  • Professor
  • Professor
  • User avatar
  • Posts: 854

Post 3+ Months Ago

#home:hover
{
background-position: 0 -171px;
}

change this line off css to this:

#home:hover
{
background-position: 0px -171px;
}

as a side note, you have a z-index set for #home, but no position. Therefore, your z-index won't effect anything.

Not sure if this was from you pasting your code or if it's part of your actual css doc, but your "#home span" selector has no closing bracket.
  • DeadBolt
  • Novice
  • Novice
  • DeadBolt
  • Posts: 31

Post 3+ Months Ago

Thanks for your reply mindfull but that still doesn't seem to work.

Any other ideas. I have even simplified the code to test out and it still in not working. I'm absolutely baffled.
  • DeadBolt
  • Novice
  • Novice
  • DeadBolt
  • Posts: 31

Post 3+ Months Ago

O.K I found that it works if it is not located within another div. Why would that be?

I put it at the start of the body tag and it worked without problems. As soon as I place it within a div - the rollover effect & link no longer works.

Any help is greatly appreciated.

Thanks
Dave

Post Information

  • Total Posts in this topic: 4 posts
  • Users browsing this forum: thanhlam and 48 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.