The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
 Reply to this topicStart new topic
> Can't get rollovers to work
relic180
post Feb 15 2010, 09:05 PM
Post #1


Newbie
*

Group: Members
Posts: 15
Joined: 6-June 09
Member No.: 8,818
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 *beep* 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

CODE

<!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;" />   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>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Darin McGrew
post Feb 15 2010, 09:49 PM
Post #2


WDG Member
********

Group: Root Admin
Posts: 8,365
Joined: 4-August 06
From: Mountain View, CA
Member No.: 3
Our online validator reports markup errors:
http://htmlhelp.com/cgi-bin/validate.cgi?u...mp;warnings=yes
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
relic180
post Feb 17 2010, 07:36 PM
Post #3


Newbie
*

Group: Members
Posts: 15
Joined: 6-June 09
Member No.: 8,818
Fixed my original issue and code was made compliant.

Since I have a thread open already, I don't suppose anybody knows how I could get my header images line up properly in Opera?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Feb 17 2010, 08:21 PM
Post #4


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,730
Joined: 9-August 06
Member No.: 6
Set the margins of the form above to 'none'.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
relic180
post Feb 17 2010, 10:04 PM
Post #5


Newbie
*

Group: Members
Posts: 15
Joined: 6-June 09
Member No.: 8,818
Perfect. That was easy, thanks.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
« Next Oldest · Cascading Style Sheets · Next Newest »
 

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 

Display Mode: Standard · Switch to: Linear+ · Switch to: Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

- Lo-Fi Version Time is now: 25th April 2024 - 08:24 AM
Invision Power Board © 2024  IPS, Inc.
Licensed to: HTMLHelp.com, LLC