...

View Full Version : Linking to the same page when you are using CSS hover



pmontesi
12-01-2006, 02:09 AM
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:


<!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 pastNCSNCSNCSNCSNCSNCSNCSNCSNCSNCSNCSNCSNCSNCSNCSNCSNCSNCSNCSNCSNCSNCSNCSNCSNCSNCSNCSNCSNCSNCSNCSNCS NCSNCSNCSNCSNCSNCSNCSNCSNCSNCSNCSNCSNCSNCSNCSNCSNCSNCSNCSNCSNCSNCSNCSNCSNCSNCSNCS-->
<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:

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);}

Arbitrator
12-01-2006, 02:23 PM
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 (http://validator.w3.org/). 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 (http://hsivonen.iki.fi/doctype/) 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">

pmontesi
12-02-2006, 04:04 AM
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.

Arbitrator
12-02-2006, 11:56 AM
Unfortunately, my page went even wackier.Yeah, that tends to happen when you design around one mode then switch to the other mode.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum