Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Oct 2005
    Posts
    38
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Smile Linking to the same page when you are using CSS hover

    Hi all,

    I am used to using anchor tags to point to somewhere else on the same page. I am in the middle of fixing the CSS on my website and I decided to get creative.

    I used the anchor tags but I also used rollover images using CSS for the links. Now, the links don't work as intended in Firefox or Opera. Everything is fine IE.

    In Mozilla, when I click on the second step, it does not go to the second step. The rest of the steps do not appear at the top of the screen when I click on their respective images at the top of the screen.

    In Opera, I get a little bit of that. The bigger problem here is that when I click on '[Return To Top]', it does not go to the top.

    What's going on?

    The webpage is www.ncsmtg.com/documents2.htm.

    Here's the code:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
    >
    <html>
    
    <head>
    <meta name="GENERATOR" content="Microsoft FrontPage 5.0">
    <meta name="ProgId" content="FrontPage.Editor.Document">
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
    <title>NCS Mortgage - We finance your future, not your past</title>
    <link rel="stylesheet" type="text/css" href="styles2.css">
    <script language="JavaScript" type="text/javascript">
    </script>
    </head>
    
    <body bgcolor="#FFFFFF">
    
    <table height="100%" cellspacing="0" cellpadding="0" align="center">
      <tr>
        <td colspan="2">
        <div id="header">
          <div id="menubar">
            <a id="home" href="index.htm">
            <img src="images/menu/home-blank.gif" alt="Home" width="100" height="100"></a>
            <a id="mortgage" href="mortgage-process.htm">
            <img src="images/menu/mortgage-process-blank.gif" alt="Mortgage Process" width="200" height="100"></a>
            <a id="financial" href="financial-calculators.htm">
            <img src="images/menu/financial-calculators-blank.gif" alt="Financial Calculators" width="220" height="100"></a>
            <a id="apply" href="apply.htm">
            <img src="images/menu/apply-blank.gif" alt="Apply" width="80" height="100"></a>
            <a id="glossary" href="glossary.htm">
            <img src="images/menu/glossary-blank.gif" alt="Financial Calculators" width="200" height="100"></a>
          </div>
          <div id="logo1">
            <!-- URL's used in the movie-->
            <!-- text used in the movie-->
            <!--NCSWe finance your future, not your pastNCSNCSNCSNCSNCSNCSNCSNCSNCSNCSNCSNCSNCSNCSNCSNCSNCSNCSNCSNCSNCSNCSNCSNCSNCSNCSNCSNCSNCSNCSNCSNCSNCSNCSNCSNCSNCSNCSNCSNCSNCSNCSNCSNCSNCSNCSNCSNCSNCSNCSNCSNCSNCSNCSNCSNCSNCSNCSNCS-->
            <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" WIDTH="800" HEIGHT="150" id="logo" ALIGN>
              <param NAME="movie" VALUE="logo/logo.swf">
              <param NAME="loop" VALUE="false">
              <param NAME="quality" VALUE="high">
              <param NAME="bgcolor" VALUE="#FFFFFF">
              <embed src="logo/logo.swf" loop="false" quality="high" bgcolor="#FFFFFF" WIDTH="800" HEIGHT="150" NAME="logo" ALIGN TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer">
              
              
              
              
              
              
              
              
              
              
              
              
              
              
              
              
              
            
              </embed></object>
          </div>
        </div>
        </td>
      </tr>
      <tr>
        <td>
        <div id="navigation">
          <!-- URL's used in the movie-->
          <!-- text used in the movie-->
          <!--SincerityDignitySimplicityThe Values of NCS Mortgage:Sincerity, Dignity, SimplicityWhether you arepurchasing, refinancing,or consolidating debtNCS Mortgage will findthe best mortgage planfor you...Our Promise-->
          <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" WIDTH="200" HEIGHT="200" id="values" ALIGN>
            <param NAME="movie" VALUE="values.swf">
            <param NAME="quality" VALUE="high">
            <param NAME="bgcolor" VALUE="#0099CC">
            <embed src="values.swf" quality="high" bgcolor="#0099CC" WIDTH="200" HEIGHT="200" NAME="values" ALIGN TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer">
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            </embed></object>
          <img src="images/take-advantage.jpg" alt="Take advantage now of timely approvals, low rates, and quick closings.  Explore our site and learn.  Pre-qualify yourself, apply online, and collect the necessary documents to get the loan approved." width="200" height="200">
          <div id="navcontainer">
    &nbsp;&nbsp;&nbsp; Our Company
            <ul id="navlist">
              <li><a href="about.htm" class="navnews">About Us</a></li>
              <li><a href="contact.htm" class="navnews">Contact Us</a></li>
              <li><a href="employment.htm" class="navnews">Employment</a></li>
            </ul>
          </div>
        </div>
        </td>
        <td>
        <div id="content">
          <img src="images/header-mortgage-process.jpg" class="heading" alt="Mortgage Process" width="295" height="58">
          <img src="images/documents.jpg" class="pic" alt="Documents" width="250" height="167">
          <p><a href="mortgage-process.htm" class="acontent">Back to Mortgage Main Page</a></p>
          <h2>Mortgage Loan Education</h2>
          <p>The following is an outline of the process of a mortgage loan. It is good 
          to read this guideline in order to be better prepared and to understand how 
          you will accomplish buying a new home or to refinance. </p>
          <img src="images/stepsmortgage.jpg" alt="Steps In The Mortgage Process" width="360" height="43">
          <div id="steps">
            <a id="step1" href="#1">
            <img src="images/steps/blank1.gif" width="108" height="144"></a>
            <a id="step2" href="#2">
            <img src="images/steps/blank2.gif" width="108" height="144"></a>
            <a id="step3" href="#3">
            <img src="images/steps/blank3.gif" width="119" height="144"></a>
            <a id="step4" href="#4">
            <img src="images/steps/blank4.gif" width="108" height="144"></a>
            <a id="step5" href="#5">
            <img src="images/steps/blank5.gif" width="108" height="144"></a>
          </div>
          <div id="firststep">
            <p class="quasihead"><a name="1"></a>Organize your documents</p>
            <div id="mquote">
              <h4>For purchases and refinancing:</h4>
              <ul id="regularlist">
                <li>For salaried workers: provide two years W-2 and one month of pay 
                stubs.</li>
                <li>For the self-employed: provide two years tax returns and a YTD profit 
                and loss statement.</li>
                <li>For rental property owners, provide the rental agreements and two 
                years tax returns</li>
                <li>If you would like the approval process to be quick, be prepared 
                to provide three months bank statements for each bank, stock and mutual 
                fund account.</li>
                <li>Provide recent copies of stock brokerage or IRA/401K accounts that 
                you have.</li>
                <li>If you would like a cash out refinance, provide a letter with an 
                explanation of your plan for the proceeds.</li>
                <li>Please provide a copy of divorce decree (if you are divorced).</li>
                <li>For those that are NOT US citizens, provide us with a copy of your 
                green card (both front and back)</li>
                <li>For those that are NOT permanent residents, provide us with your 
                H-1 or L-1 Visa.</li>
              </ul>
              <h4>For home equity loans:</h4>
              <ul id="regularlist">
                <li>For salaried workers: provide two years W-2 and one month of pay 
                stubs.</li>
                <li>For the self-employed: provide two years tax returns and a YTD profit 
                and loss statement.</li>
                <li>For rental property owners, provide the rental agreements and two 
                years tax returns</li>
                <li>Provide a copy of the note from your first mortgage. This is usually 
                included within the closing loan documents</li>
                <li>Please provide a letter with an explanation of your plan for the 
                proceeds. This must include your signature.</li>
                <li>Please provide a copy of divorce decree (if you are divorced).</li>
                <li>For those that are NOT US citizens, provide us with a copy of your 
                green card (both front and back)</li>
                <li>For those that are NOT permanent residents, provide us with your 
                H-1 or L-1 Visa.</li>
              </ul>
              <a href="#top">[Return to top]</a>
            </div>
          </div>
          <div id="secondstep">
            <p class="quasihead"><a name="2"></a>Become qualified</p>
            <p>Becoming qualified before you apply for a loan predicts how much you 
            will be able to borrow. Whenever you buy a house, you will either be pre-qualified 
            or pre-approved. Usually, you can get pre-qualified over the telephone or 
            on the internet in a few minutes. A pre-qualification does not have the 
            advantages of a pre-approval. This is because the pre-approval process is 
            more rigorous and involves the verification of you credit, income, assets 
            and liabilities. It is best that you become pre-approved before you start 
            looking for a home. This benefits you because: </p>
            <div id="mquote">
              <ul id="regularlist">
                <li>It determines what kind of house you can afford. This reduces wasted 
                time looking for properties not in your price region.</li>
                <li>It makes you more valuable to the seller when you are in negotiations. 
                The seller feels more comfortable that your loan is approved.</li>
                <li>The loan will close faster because it is already approved.</li>
              </ul>
              <a href="#top">[Return to top]</a>
            </div>
          </div>
          <div id="thirdstep">
            <p class="quasihead"><a name="3"></a>Browse different loan programs and 
            rates</p>
            <div id="mquote">
              <h4>To browse and find the best loan for you, you need to:</h4>
              <ul id="regularlist">
                <li><span class="highlightedpoint">Figure out how long you plan to keep 
                that loan.</span> If you are thinking of selling the house in the near 
                future, you may want to consider an adjustable or balloon loan. Otherwise, 
                if you plan on keeping the house for a longer period of time, you will 
                want to look at fixed loans.</li>
                <li><span class="highlightedpoint">Be conscious of the relationship 
                between rates and points.</span> Points are defined to be prepaid interest 
                and are tax deductible. Each point equals one percent of the loan. For 
                example, 1 point on a $135,000 loan is $1,350. As you pay more points, 
                you will receive a lower rate.</li>
                <li><span class="highlightedpoint">Compare each program.</span> Shopping 
                for a loan is a difficult task. So many programs exist that it is hard 
                to decide which is best for you. It is at this point that one of our 
                experienced mortgage professionals can help you make an informed decision 
                that best suits your needs. </li>
              </ul>
              <a href="#top">[Return to top]</a>
            </div>
          </div>
          <div id="fourthstep">
            <p class="quasihead"><a name="4"></a>Goal: Loan Approval!</p>
            <p>As soon as we receive your loan application, we will start the loan approval 
            process immediately. At this point, we verify your credit history, employment 
            history, assets (bank accounts, stocks, mutual funds and retirement accounts), 
            and property value.</p>
            <p>Depending on your specific situation, additional documents or verifications 
            may be needed. In order to increase the chance to approve your loan, you 
            must: </p>
            <div id="mquote">
              <ul id="regularlist">
                <li>Completely fill out the loan application.</li>
                <li>Respond immediately to any request for supplementary documents. 
                This is especially important when your rate is locked or if you have 
                a specified closing date.</li>
                <li>Do not make any another major purchases. Major purchases includes 
                cars, furniture, or another house. These only cause your debts to increase 
                and may negatively affect your current application. After you close, 
                it is safe to make any major purchase you like.</li>
                <li>Do not move money into your bank accounts unless it can be traced. 
                If you are about to receive any money from friends or family, please 
                contact us as soon as possible.</li>
                <li>Do not make any plans to leave town around the expected closing 
                date. If you do have plans to be out of town, you may sign a power of 
                attorney to authorize another individual to sign on your behalf.</li>
              </ul>
              <a href="#top">[Return to top]</a>
            </div>
          </div>
          <div id="fifthstep">
            <p class="quasihead"><a name="5"></a>Close your loan</p>
            <p>Once your loan becomes approved, the final loan documents must be signed 
            by you. This usually happens in front of a notary public. Be ready to:
            </p>
            <div id="mquote">
              <ul id="regularlist">
                <li>Bring a cashiers check for your down payment and closing costs if 
                they are required. Personal checks are not usually accepted.</li>
                <li>Examine the final loan documents. Verify that the interest rate 
                and loan terms are what were promised to you. Also, it is very important 
                that you make certain that the name and address on the loan documents 
                are accurate.</li>
                <li>Sign the loan documents.</li>
              </ul>
              <p>Your loan should close soon after you sign the loan documents. According 
              to federal law, for refinance and home equity loan transactions, you have 
              3 days to review the documents before your loan transaction can close.
              </p>
              <a href="#top">[Return to top]</a>
            </div>
          </div>
          <img src="images/equal-housing.gif" class="housing" width="58" height="48" alt="Equal Housing Lender">
          <p>&nbsp;</p>
        </div>
        </div>
        </td>
      </tr>
      <tr>
        <td colspan="2" style="vertical-align: bottom">
        <div id="footer" class="center">
          Copyright [2004] [<span class="insideBracket">NCS Mortgage Corporation</span>].&nbsp; 
          All Rights Reserved
        </div>
        </td>
      </tr>
    </table>
    
    </body>
    
    </html>
    Here's the CSS:
    Code:
    html, body {
    	margin: 0;
    	padding: 0;
    	height: 100%;
    	text-align: center;
    	font-family: times;
    	color: #000000;
    	background-image: url('images/brick.gif');
    	}
    	
    p {
    	color: black;
    	font-family: times;
    	font-size: 12pt;
    	margin: 15px;
    	}
    	
    .asterisk {
    	color: red;
    }
    
    h2 {
    	color: blue;
    	margin: 10px;
    	}
    	
    h3 {
        color: gray;
        }	
    
    .center {
    	text-align: center;
    	}
    	 
    /* main grid */
    	
    #header {
    
    	margin: 0px;
    	width: 800px;
    	}
    	
    #content {
    	padding: 0px;
    	margin: 0px;
    	width: 600px;
    	height: 100%;
    	background-color: #fff;
    }	
    
    #navigation {
    	margin: 0px;
    	padding: 0px;
    	width: 200px;
    	height: 100%;
       color: #fff;
    	background-color: #09c;
    }
    
    #footer {
    	margin: 0px;
    	width: 800px;
    	background-color: #0ff;
    	}
    	
    /* divs for header */
    
    #logo1 {
    	border: solid thin #0099CC;
    	border-width: 1px;
    }
    
    /*divs for navigation bar */
    #navlist {
    	list-style: none;
    	}	
    	
    #navlist li {
    	padding-left: 20px;
    	padding-bottom: 5px;
    	background-image: url('images/bullet-news.jpg');
    	background-repeat: no-repeat;
    	}
    	
    A.navnews:link {color: #FFFFFF; text-decoration: none}
    A.navnews:visited {color: #FFFFFF; text-decoration: none}		
    A.navnews:hover {color: #8b008b; text-decoration: underline}
    A.navnews:active {color: #FFFFFF; text-decoration: none}
    
    /*divs for content */
    
    .heading {
       float: left;
    	margin: 10px;
    }
    	
    .pic {
       float: right;
    	margin: 10px;
    }
    
    .highlight {
       padding: 5px;
    	margin: 20px;
    }
    
    .housing {
       float: left;
    	margin: 10px;
    }
    
    .seal {
       float: right;
    	margin: 10px;
    }
    
    #regularlist {
    	list-style: none;
    	}	
    	
    #regularlist li {
    	padding-left: 20px;
    	margin-left: -40px;
    	padding-bottom: 10px;
    	background-image: url('images/bullet.jpg');
    	background-repeat: no-repeat;
    	}
    
    #columnleft {
    	margin: 0px;
    	padding: 10px;
    	background-color: #FFFFFF;
    	width: 300px;
    	float: left;
    	}
    	
    #columnright {
    	margin: 0px;
    	padding: 10px;
    	background-color: #FFFFFF;
    	width: 250px;
    	float: right;
    	}
    
    p.quasihead{
    	color: black;
    	font-family: times;
    	font-size: 20pt;
    	margin: 15px;
    	}
    	
    A.acontent:link {color: #0000FF; text-decoration: underline}	
    A.acontent:visited {color: #8b008b; text-decoration: underline}		
    A.acontent:hover {color: #8b008b; text-decoration: underline}	
    A.acontent:active {color: #0000FF; text-decoration: underline}
    
    #mquote {
    	margin: 0px;
    	padding: 10px;
    	background-color: #FFFFFF;
    	float: left;
    	}
    	
    #steps {
    	margin: 0px;
    	padding: 15px;
    	background-color: #FFFFFF;
    	float: left;
    }
    
    .highlightedpoint {
    	font-weight: bold;
    }
    /* form divs */
    
    form p {
       width: 550px;
       clear: both;
    }
    
    form p label {
       display: inline;
       float: left;
       width: 330px;
    }
    
    form p input, form p textarea, form p select {
       margin: 0;
    }
    
    /* divs for footer */
    
    .insideBracket {
    	color: blue;
    }
    
    /* divs for hovers */
    
    a img {
    	border-width: 0;
    	background: top left no-repeat;
    	margin: -2;
    }
    
    a#home img {background-image: url(images/menu/home.jpg);}
    a#mortgage img {background-image: url(images/menu/mortgage-process.jpg);}
    a#financial img {background-image: url(images/menu/financial-calculators.jpg);}
    a#apply img {background-image: url(images/menu/apply.jpg);}
    a#glossary img {background-image: url(images/menu/glossary.jpg);}
    
    a#home:hover img {background-image: url(images/menu/home2.jpg);}
    a#mortgage:hover img {background-image: url(images/menu/mortgage-process2.jpg);}
    a#financial:hover img {background-image: url(images/menu/financial-calculators2.jpg);}
    a#apply:hover img {background-image: url(images/menu/apply2.jpg);}
    a#glossary:hover img {background-image: url(images/menu/glossary2.jpg);}
    
    a#step1 img {background-image: url(images/steps/step1.jpg);}
    a#step2 img {background-image: url(images/steps/step2.jpg);}
    a#step3 img {background-image: url(images/steps/step3.jpg);}
    a#step4 img {background-image: url(images/steps/step4.jpg);}
    a#step5 img {background-image: url(images/steps/step5.jpg);}
    
    a#step1:hover img {background-image: url(images/steps/step1b.jpg);}
    a#step2:hover img {background-image: url(images/steps/step2b.jpg);}
    a#step3:hover img {background-image: url(images/steps/step3b.jpg);}
    a#step4:hover img {background-image: url(images/steps/step4b.jpg);}
    a#step5:hover img {background-image: url(images/steps/step5b.jpg);}

  • #2
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,315
    Thanks
    29
    Thanked 279 Times in 273 Posts
    I have a feeling that your problems are related to (A) invalid code and (B) backward compatibility (or quirks) layout mode.

    Concerning the invalid code, you can validate your document here. Note in particular error 40, which seems to indicate that you have an unequal number of opening and closing div element tags. Since your IDs are specified on div elements, and you haven’t opened or closed all such elements properly, the browser has to guess what you meant when deciding what goes where, and it may be guessing incorrectly, leading to the described problem. Solution: fix the errors so that the browser doesn’t have to guess at your intent.

    Regarding the second issue, backward compatibility layout mode, it would be advisable to choose a document type declaration that does not trigger that mode. The (quirky) rendering behaviors of backward compatibility layout mode vary widely between browsers, making it that much harder to create a cross‐browser compatible website. One of these quirks may be a cause of your issue. Solution: use a full document type declaration; that is, one that includes the optional URI at the end. Here’s a resource that gives some indication as to which declarations activate which layout mode in various browsers. Here’s the full declaration for the HTML 4.01 Transitional DTD:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #3
    New Coder
    Join Date
    Oct 2005
    Posts
    38
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks Arbitrator. I used the doctype that you supplied. Unfortunately, my page went even wackier. I will look into this further so I can have everything work. Thank you so much for your help.

  • #4
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,315
    Thanks
    29
    Thanked 279 Times in 273 Posts
    Quote Originally Posted by pmontesi View Post
    Unfortunately, my page went even wackier.
    Yeah, that tends to happen when you design around one mode then switch to the other mode.
    For every complex problem, there is an answer that is clear, simple, and wrong.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •