Can't get rollovers to work

HTML & CSS
1

I’m trying to get my buttons to rollover using a single image and change the background position on a:hover… and I’m having a ***** of a time figuring out why they’re not working. I’m building them almost exactly how I always do, but I can’t for the life of me see what’s going wrong here.

Hoping somebody can take a peek at my code and tell me what I did wrong here…

http://www.crackin.com/dev/index.html


<!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" />
<title>Melt Away Massage</title>

<style type="text/css">
<!--
body,td,th {font-family: Arial, Helvetica, sans-serif;font-size: 14px;color: #000;}
body {margin: 0px; background: url(images/pageBg.jpg) no-repeat center top fixed #fff;}
img {margin:0px; padding:0px; border:none;}

.float img, .float div {float:left;}
.clear {clear:both; height:0px;}

#nav1 div {width:223px; height:98px; margin:0 0 13px 10px;}
#nav1 a {display:block; width:100%; height:100%; background-position:left;}
#nav1 a:hover {background-position:right;}

#nav2 div {width:161px; height:34px; position:relative; top:-12px;}
#nav2 img {position:relative; top:-12px;}
#nav2 a {display:block; width:100%; height:100%; background-position:top;}
#nav2 a:hover {background-position:bottom;}

#content_frame {position:relative; top:-12px; margin:0px; padding:0px; height:100%; width:100%; background:url(images/index_bodyBgStretch.jpg) repeat-y;}
#content_subFrame {margin:0px; padding:0px; height:100%; width:100%; background:url(images/index_bodyBgTop.jpg) no-repeat top;}

#footer_wrap {width:100%; height:140px; background:url(images/foot_bg.png) repeat-x; position:relative; margin-top:-133px;}
#footer {min-height:121px; min-width:955px;}
#footer div {position:relative; z-index:10; padding:60px 60px 0;}
-->
</style>

</head>

<body>
<div id="wrapper" style="width:100%;">

	<div style="position:absolute; width:100%; height:33px; top:175px; background:#fff;"></div> <!-- SUB TITLE STRIPE -->

	<div id="content_wrap" style="width:955px; margin:0 auto;">
		
        <!-- SEARCH BAR -->
        <span class="float">
            
            <form style="position:absolute;">
                <a href="#"><img src="images/index_01.png" width="129" height="32" /></a>
              	<div style="width:394px; height:32px; background:#fff;">
                    <input name="search" type="text" style="margin-top:7px;" /> &nbsp; INSERT DATE CODE
                </div>
            </form>
            
            <span style="float:right;">
            	<img src="images/index_02.png" width="432" height="32" />
            </span>
            
        </span> <!-- END FLOAT -->
        <div class="clear"></div>
        <!-- END SEARCH BAR -->
        
  		<img src="images/index_03.png" width="955" height="143" /><br /> <!-- MAIN TITLE -->
        <img src="images/index_04.png" style="position:relative; left:373px;" /><br /> <!-- SUB TITLE -->
        
        <!-- REDUCED WIDTH CONTENT WRAP -->
        <div id="sub-content_wrap" style="width:936px; margin:0 auto;">
        	<span class="float">
            	<div style="background:url(images/index_MainImg.jpg); width:703px; height:321px;"></div>
                
                <span id="nav1">
                    <div><a href="#" style="background:url(images/nav_1services.jpg);"></a></div>
                    <div><a href="#" style="background:url(images/nav_2rates.jpg);"></a></div>
                    <div><a href="#" style="background:url(images/nav_3book.jpg);"></a></div>
                </span> <!-- END NAV1 -->
                
                <span id="nav2">
	                <img src="images/index_05.png" />
                    <div style="width:160px;"><a href="#" style="background:url(images/nav_4new.jpg);"></a></div>
                    <div><a href="#" style="background:url(images/nav_5specials.jpg);"></a></div>
                    <div><a href="#" style="background:url(images/nav_6about.jpg);"></a></div>
                    <div><a href="#" style="background:url(images/nav_7contact.jpg);"></a></div>
                    <img src="images/index_06.png" />
                </span> <!-- END NAV2 -->
                
            </span> <!-- END FLOAT -->
            <div class="clear"></div>
            
            <!-- MAIN CONTENT FRAME -->
            <div id="content_frame">
            	<div id="content_subFrame">
					<div style="padding:10px; min-height:300px;">
	                    INSERT CONTENT HERE
                    </div>
                </div>
            </div>
            <!-- END MAIN CONTENT FRAME -->
            
		</div> <!-- END SUB-CONTENT_WRAP -->
        <!-- END REDUCED WIDTH CONTENT WRAP -->
        
	</div> <!-- END CONTENT_WRAP -->
    
	<div style="background:url(images/foot_bgMid.jpg); width:955px; height:121px; margin:0 auto; position:relative; top:-12px; z-index:5;"></div> <!-- BODY BASE -->
    
    <div id="footer_wrap">
        <div id="footer">
            <div style="float:left;">
            	FOOTER CONTENT GOES HERE
            </div>
            <div style="float:right;">
            	FOOTER CONTENT GOES HERE
            </div>
                        
        </div> <!-- END FOOTER -->
    </div> <!-- END FOOTER_WRAP -->
    
</div> <!-- END WRAPPER -->
</body>
</html>
2

Hi,
You have some invalid code going on there. You are nesting divs inside spans, spans are inline elements and it is invalid to nest block level divs within them. The doctype formatting does not allow that sort of coding even if you were to set the spans as block levels in the css. :wink:

You really should just set your navs up as a <ul> and let the <li> take the place of those divs.

I would just float the ul#nav1 to the right and then float the ul#nav2 left.

As far as your nav sprite images, you should just give each list item an ID and set your bg images accordingly in the css.

Have a look here at this sprite example that uses four different id’s and images. View the source code and you will get a feel for the basic set up.

Get your code valid first and we can go from there if you hit a snag. :slight_smile:

3

Here is a rough mock-up of your #nav1 with the sprites working in a ul. :slight_smile:

I linked directly to your images so the code can be run as is.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>sprite demo</title>

<style type="text/css">
#wrap {
    width:800px;
    margin:30px auto;
    padding:10px;
    overflow:hidden;/*contain inner floats*/
    background:tan;
    border:1px solid #000;
}

/*=== Begin Nav Styles ===*/
ul#nav1{
    margin:0;
    padding:10px 10px 0;
    width:223px;
    float:right;
    background:wheat;/*demo only*/
}
#nav1 li{
    list-style:none;
    float:left;
    margin:0 0 13px 0;
}
#nav1 li a{
    float:left;
    width:223px;/*half of sprite image width*/
    height:98px;/*sprite image height*/
    text-decoration:none;
    font-weight:bold;
    color:#00F;
}

/*=== Target the list ID anchors with different BG Images/Colors ===*/
#nav1 li#service a{background:url(http://www.crackin.com/dev/images/nav_1services.jpg) no-repeat 0 0;}
#nav1 li#rates a{background:url(http://www.crackin.com/dev/images/nav_2rates.jpg) no-repeat 0 0;}
#nav1 li#book a{background:url(http://www.crackin.com/dev/images/nav_3book.jpg) no-repeat 0 0;}

#nav1 li#service a:hover{background-position:-223px 0;}
#nav1 li#rates a:hover{background-position:-223px 0;}
#nav1 li#book a:hover{background-position:-223px 0;}

</style>
</head>
<body>

<div id="wrap">
    <ul id="nav1">
        <li id="service"><a href="#"></a></li>
        <li id="rates"><a href="#"></a></li>
        <li id="book"><a href="#"></a></li>
    </ul>
</div>

</body>
</html>
4

Thanks for the help, I started using LIs for my nav when I was first learning CSS and I guess sometimes I get a little too quick for my own good. So, switching to a list seemed to make them behave.

Also, I’ve been using spans to float groups of imgs and divs for a little while now and for some reason it didn’t even click that it was invalid code. So, learned me somethin new right there.

Anyhow, after getting everything working and about 95% valid, I went and found that my nav is completely destroyed in IE7 (par for the course) so it’s time for a small break.

5

Hi,
Yeah you have some other positioning problems going on in IE6/7. You have used a lot of relative positioning on that page and it is catching up to you now.

As for the #nav2 a width while get IE7 to drop it down in the right spot. You have a little spacer image that goes to the left of that navbar, it is getting hung up in IE7. Give it a float and clear left then the navbar will float in beside it. Then remove the relative position from the next image and float it also, use a negative top margin instead of positioning on it though.

<img [COLOR=Blue]style="float:left;clear:left"[/COLOR] src="images/index_05.png" width="30" height="34" alt="" />
            <ul id="nav2">
                <li id="new"><a href="#"></a></li>
                <li id="specials"><a href="#"></a></li>
                <li id="about"><a href="#"></a></li>
                <li id="contact"><a href="#"></a></li>
            </ul>
<img [COLOR=Blue]style="float:left;margin-top:-12px;" [/COLOR]src="images/index_06.png" width="262" height="34" alt="" />

Now give nav2 a width and relative positioning in order to stack it above the positioned div that follows it.


[B][COLOR=Black]ul#nav2[/COLOR][/B]{
[COLOR=Blue]    float:left;
    width:644px;[/COLOR]
    height:34px; 
    margin:0; 
    padding:0; 
[COLOR=Blue]    position:relative;
    z-index:1;[/COLOR]
}

Those are really just some fixes for IE7, I would really try to do away with more of that positioning if I were you.

6

Thanks for the help, really. Got everything showing up in FF, IE7 and IE8 correctly. Small issue with header images in Opera but I don’t know that I care enough to figure it out.