pmontesi
12-12-2006, 04:04 AM
Hi everyone,
Here's the page: www.ncsmtg.com/documentstest.htm
#navigation gets smaller underneath the Flash file in IE. I'm not sure why. It looks perfect in both Firefox and Opera.
I noticed during editing, when I took out <div id="fourthstep"> and <div id="fifthstep"> plus both of their content, the page looks fine in all browsers. It was also fine when I added <div id="fourthstep"></div>. As soon as I added a paragraph of text in <div id="fourthstep">, #navigation gets pushed in again in IE. What's going on?
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;
background-color: #fff;
}
#navigation {
float: left;
margin: 0px;
padding: 0px;
width: 200px;
color: #fff;
position: absolute;
}
#footer {
margin: 0px;
width: 800px;
position: relative;
bottom: 0px;
background-color: #00FFFF;
clear: both;
}
#container {
margin: 0 auto;
width: 800px;
text-align: left;
position: relative;
padding: 0;
background-color: #fff;
background: url('images/column-background.jpg') repeat-y 0;
}
#information {
margin: 0 auto;
width: 800px;
text-align: left;
position: relative;
padding: 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;
}
#regularlist2 {
list-style: none;
}
#regularlist2 li {
padding-left: 20px;
margin-left: -40px;
padding-bottom: 10px;
background-image: url('images/bullet.jpg');
background-repeat: no-repeat;
}
#regularlist3 {
list-style: none;
}
#regularlist3 li {
padding-left: 20px;
margin-left: -40px;
padding-bottom: 10px;
background-image: url('images/bullet.jpg');
background-repeat: no-repeat;
}
#regularlist4 {
list-style: none;
}
#regularlist4 li {
padding-left: 20px;
margin-left: -40px;
padding-bottom: 10px;
background-image: url('images/bullet.jpg');
background-repeat: no-repeat;
}
#regularlist5 {
list-style: none;
}
#regularlist5 li {
padding-left: 20px;
margin-left: -40px;
padding-bottom: 10px;
background-image: url('images/bullet.jpg');
background-repeat: no-repeat;
}
#regularlist6 {
list-style: none;
}
#regularlist6 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;
}
#mquote2 {
margin: 0px;
padding: 10px;
background-color: #FFFFFF;
float: left;
}
#mquote3 {
margin: 0px;
padding: 10px;
background-color: #FFFFFF;
float: left;
}
#mquote4 {
margin: 0px;
padding: 10px;
background-color: #FFFFFF;
float: left;
}
#mquote5 {
margin: 0px;
padding: 10px;
background-color: #FFFFFF;
float: left;
}
#mquote6 {
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);}
Here's the page: www.ncsmtg.com/documentstest.htm
#navigation gets smaller underneath the Flash file in IE. I'm not sure why. It looks perfect in both Firefox and Opera.
I noticed during editing, when I took out <div id="fourthstep"> and <div id="fifthstep"> plus both of their content, the page looks fine in all browsers. It was also fine when I added <div id="fourthstep"></div>. As soon as I added a paragraph of text in <div id="fourthstep">, #navigation gets pushed in again in IE. What's going on?
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;
background-color: #fff;
}
#navigation {
float: left;
margin: 0px;
padding: 0px;
width: 200px;
color: #fff;
position: absolute;
}
#footer {
margin: 0px;
width: 800px;
position: relative;
bottom: 0px;
background-color: #00FFFF;
clear: both;
}
#container {
margin: 0 auto;
width: 800px;
text-align: left;
position: relative;
padding: 0;
background-color: #fff;
background: url('images/column-background.jpg') repeat-y 0;
}
#information {
margin: 0 auto;
width: 800px;
text-align: left;
position: relative;
padding: 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;
}
#regularlist2 {
list-style: none;
}
#regularlist2 li {
padding-left: 20px;
margin-left: -40px;
padding-bottom: 10px;
background-image: url('images/bullet.jpg');
background-repeat: no-repeat;
}
#regularlist3 {
list-style: none;
}
#regularlist3 li {
padding-left: 20px;
margin-left: -40px;
padding-bottom: 10px;
background-image: url('images/bullet.jpg');
background-repeat: no-repeat;
}
#regularlist4 {
list-style: none;
}
#regularlist4 li {
padding-left: 20px;
margin-left: -40px;
padding-bottom: 10px;
background-image: url('images/bullet.jpg');
background-repeat: no-repeat;
}
#regularlist5 {
list-style: none;
}
#regularlist5 li {
padding-left: 20px;
margin-left: -40px;
padding-bottom: 10px;
background-image: url('images/bullet.jpg');
background-repeat: no-repeat;
}
#regularlist6 {
list-style: none;
}
#regularlist6 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;
}
#mquote2 {
margin: 0px;
padding: 10px;
background-color: #FFFFFF;
float: left;
}
#mquote3 {
margin: 0px;
padding: 10px;
background-color: #FFFFFF;
float: left;
}
#mquote4 {
margin: 0px;
padding: 10px;
background-color: #FFFFFF;
float: left;
}
#mquote5 {
margin: 0px;
padding: 10px;
background-color: #FFFFFF;
float: left;
}
#mquote6 {
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);}