Hi, My first attempt at image rollovers in CSS is unusuccessful. Any help would be appreciated.... ----Html------ <code> <div class="col-4 maxheight"> <a href="../strategy/strategy.html" style="text-decoration: none"> <div class="box4 maxheight"> <div class="indent"> <span style="color: #C0C0C0">Entry Level / Student</span> <h4 style="color: #C0C0C0">Strategy</h4><span class="style7"></span> </div> </div></a> </div> </code> ----CSS----- <code> .boxes{ width:820px; overflow:hidden;} .boxes .col-4{ width:205px !important; margin-left:1px;} .box4{ background:url("../images/box4-tailgrey.gif") top repeat-x #999999; color:#999999;} .boxes .indent{ padding:25px 15px 31px 24px; position:relative;} .box4 a{ color:#ff9967;} .box4 a:hover{ background:url("../images/box4-tail.gif") top repeat-x #c23605; color:#ff9967;} </code>
Avoid putting divisions in a elements and expect the background to change properly on hover state. .a_element_css { display:block; width:xxxpx; (define your own element size) height:xxxpx; (define your own element size) background: url(box4-tailgrey.gif) no-repeat; } .a_element_css:hover { background-position: bottom; } What this does? It switches the background position on hover state. That also means you can do it with one image not two. Merge two images into one and place the second image below the first image. You can adjust the elements in <a> tags after that (but without divisions).
Like I said, merge two images together. That means make one image from previous two images. Place the graphics from the second image underneath the graphics of the first image. ie. If you had two 20x20 images, merge them and make one 20x40 image. ...or you can show me the site and could tell you in detail.
To explain further on that - anchor (A) is an inline-level tag. DIV is a block-level tag, as such you cannot put DIV's inside Anchors, that's invalid markup. I very much doubt that your heading orders actually has you down to a H4, so you're probably using heading tags wrong - from what you have for styling I'm willing to bet most of those DIV are actually unnecessary... You've got a nasty case of 'not every ejaculation deserves a name' going on there, since you've got perfectly good class/id on the outer wrapper so why do the inner ones even NEED a class, and the use of presentational names like maxheight defeat one of the reasons to USE CSS in the first place. Given you are doing a repeat-x, I really can't say just what technique I'd use for the rollovers given you appear to have dynamic height content (the method fixie said would not work great with that) - I'd really have to see the images involved and the content involved... But yeah, from a semantics point of view that markup is gibberish, and from what you are applying for style so far I'd say there is no reason to have more than one div, one anchor, and maybe a strong tag... Though I suspect that "Entry Level / Student" text should NOT be inside the anchor since that looks like a heading. (which would make the use of a H4 even MORE inappropriate)
If you want to create rollover images simply read this article. http://bloggertipandtrick.blogspot.com/2009/10/create-rollover-images-in-blogger.html