...

View Full Version : Page fine in Firefox/Opera but wrong in IE



pmontesi
12-07-2006, 07:05 AM
Hi everyone,

For whatever reason, this one page out of all the rest of my site will not layout correctly in IE, but be ok in both Firefox and Opera. Why is this so?

www.ncsmtg.com/documents4.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>
<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="container">
<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>
<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><a name="top">Mortgage Loan Education</a></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">Organize your documents</a></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>
</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">Become qualified</a></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">Browse different loan programs and
rates</a></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">Goal: Loan Approval!</a></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">Close your loan</a></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" alt="Equal Housing Lender" width="58" height="48">
<p>&nbsp;</p>
</div>
</div>
</td>
</tr>
<tr>
<td 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;
margin: 10px;
}

.center {
text-align: center;
}

/* main grid */

#header {
margin: 0 auto;
width: 800px;
}

#content {
float: right;
padding: 0px;
margin: 0px;
width: 600px;
height: 100%;
background-color: #fff;
}

#navigation {
float: left;
margin: 0px;
padding: 0px;
width: 200px;
height: 100%;
color: #fff;
background-color: #09c;
}

#footer {
margin: 0px;
width: 800px;
position: relative;
bottom: 0px;
background-color: #00FFFF;
clear: both;
}

#container {
margin: 0 auto;
width: 800px;
height: 100%;
text-align: left;
position: relative;
padding: 0;
background-color: #fff;
background: url('images/column-background.jpg') repeat-y 0;
}

/* 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;
}

#solopicture {
margin: 0px;
padding: 10px;
background-color: #FFFFFF;
width: 500px;
float: left;
}

.faq {
color: #8b008b;
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);}

ahallicks
12-07-2006, 10:10 AM
Something confuses me here. CSS based coding is great when used for styling and positioning elements on a page and gets rid of a need for tables to aid layout. So why oh why do people still use tables to surround the CSS styled elements that should be placed where they are because of their positioning in the CSS and not placement in a table?

Is mixing the two a bad practise? I know it validates a page, but surely new W3C Web Thingies say that the need for tables, other than for an actual table in a form or something are unneeded?

Help me out here?

And could you explain why it doesn't display correctly? What exactly is it doing wrong? Thank you

pmontesi
12-07-2006, 02:47 PM
Read this article. It says mimimal tables with CSS is ok. This is what I followed. http://developer.apple.com/internet/webcontent/bestwebdev.html

Now, can someone help me out?

_Aerospace_Eng_
12-07-2006, 02:55 PM
We could but you still haven't told us exactly WHAT is wrong with layout. What isn't showing up properly.

I still don't think you have a valid reason for using tables. Everything they said that could be done with tables can be done with CSS alone and it won't bloat your code.

pmontesi
12-07-2006, 05:48 PM
In IE, this page grows too long. All the content ends up being somewhere in the middle of the page. So, when you go to this page, you have to scroll forever to find the content. I tested this on both my work computer and my home computer. Same thing. You'll probably see the same thing when you click on the link. www.ncsmtg.com/documents4.htm

As for why I still have tables. This company ABSOLUTELY needs their site up and running. I am working on a full CSS layout, but whenever I try to do this, everything goes to hell. I'm almost there, though. So for now, I will have minimal tables. But, a full CSS version is on its way.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum