PDCarroll
01-28-2008, 06:35 PM
I've built a template for a new site that works perfectly in the browsers that i have on my system (safari, firefox, IE 5.2 mac); however, when i looked at it on IE7, there are two main issues:
1) the nav bar rollovers and "current" states seem to have padding issues (i've tried resolving them, but i don't seem to have success across all browsers)
2) the footer at the bottom, which i have set to always be positioned at the bottom of the window, is off-set in IE7 to the right.
Again, both of these problems are non-existant in safari, firefox and ie 5.2; they are only an issue in IE 7 (actually the footer rendering insn't perfect in ie 5.2, but i'm not too worried about that).
Any suggestions would be greatly appreciated. Please see code below:
HTML:
<!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=ISO-8859-1" />
<!-- TemplateBeginEditable name="doctitle" -->
<title>Untitled Document</title>
<!-- TemplateEndEditable -->
<!-- TemplateBeginEditable name="head" -->
<!-- TemplateEndEditable -->
<script type="text/javascript" src="../highlight.js"></script>
<link href="../cccs_hawaii.css" rel="stylesheet" type="text/css" />
<script type="text/JavaScript">
<!--
function MM_openBrWindow(theURL,winName,features) { //v2.0
window.open(theURL,winName,features);
}
//-->
</script>
</head>
<body>
<div id="container">
<div id="header">
<div id="address">1164 Bishop Street, Suite 1614, Honolulu, Hawaii 96813 </div>
</div>
<div id="nav">
<ul>
<li><a href="../index.html">Home</a></li>
<li><a href="../who_we_are.html">Who We Are</a></li>
<li><a href="../how_we_help.html">How We Help</a></li>
<li><a href="../bankruptcy.html">Bankruptcy</a></li>
<li><a href="../credit_review.html">Credit Review</a></li>
<li><a href="../workshops.html">Workshops</a></li>
<li><a href="../forms.html">Forms</a></li>
<li><a href="../contact.html">Contact</a></li>
</ul>
<script type="text/javascript">setPage()</script>
</div>
<div id="main"><!-- TemplateBeginEditable name="main" -->Welcome to Consumer Credit Counseling Service of Hawaii. We are a non-profit community service agency providing debt management counseling and credit education to the families of Hawaii since 1969.
We understand that debt problems can mount quickly and be difficult to overcome without help. We’re here to help you regain control of your finances, understand your credit report, make a plan to become debt-free and restore peace of mind.
<!-- TemplateEndEditable -->
<div id="footer_extra"><!-- TemplateBeginEditable name="footer_extra" -->Content for id "footer_extra" Goes Here<!-- TemplateEndEditable --></div>
</div>
<div id="footer">
<ul>
<li>© 2004-2007 CCCS of Hawaii, All Rights Reserved.</li>
<li><a href="mailto:info@cccshawaii.org">info@cccshawaii.org</a> </li>
<li>Phone: 808.532.3225 </li>
<li>Toll-Free: 1.808.801.5999</li>
<li><p><span class="footer_details">CCCS of Hawaii is a proud member of <a href="#" onclick="MM_openBrWindow('http://www.nfcc.org','','toolbar=yes,location=yes,status=yes,menubar=yes,scrollbars=yes,resizable=yes,width =800,height=600')">National Foundation for Credit Counseling</a>, <a href="#" onclick="MM_openBrWindow('http://www.coanet.org','','toolbar=yes,location=yes,status=yes,menubar=yes,scrollbars=yes,resizable=yes,wid th=800,height=600')">Council on Accreditation</a> and <a href="#" onclick="MM_openBrWindow('http://www.hawaii.bbb.org','','toolbar=yes,location=yes,status=yes,menubar=yes,scrollbars=yes,resizable=yes ,width=800,height=600')">Better Business Bureau</a>.</span></p></li>
</ul>
</div>
</div>
</body>
</html>
CSS:
html, body {
background-color: #2F6B98;
margin: 0px;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #333333;
height: 100%;
padding: 0px;
}
* {
padding: 0;
margin: 0;
}
a:link {
color: #2F6B98;
text-decoration: underline;
}
a:visited {
color: #999999;
text-decoration: underline;
}
a:hover {
color: #666666;
text-decoration: underline;
}
h1 {
font-family: Arial, Helvetica, sans-serif;
font-size: 21px;
color: #2F6B98;
font-weight: lighter;
}
h2 {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
color: #333333;
}
h3 {
font-size: 16px;
font-weight: lighter;
color: #333333;
}
.indented_text {
margin-left: 10px;
}
.footer_details {
font-size: 10px;
}
.footer_index_right {
font-size: 12px;
color: #666666;
line-height: 18px;
}
.footer_index_right ul {
display: list-item;
list-style-type: disc;
}
.footer_index_right li {
list-style-type: disc;
display: list-item;
}
#container {
text-align: center;
margin: 0 auto;
width: 800px;
min-height: 100%;
height: 100%;
height: auto;
position: relative;
background-color: #E6E6E6;
}
* html #container {
height: 100%;
}
#container_footer {
text-align: center;
margin: 0 auto;
width: 800px;
min-height: 100%;
height: 100%;
height: auto;
position: relative;
background-color: #FFFFFF;
}
#header {
height: 118px;
background-image: url(images/header.gif);
background-repeat: no-repeat;
}
#address {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 11px;
font-style: italic;
color: #2F6B98;
text-align: left;
margin-left: 260px;
padding-top: 78px;
}
#nav {
font-family: Arial, Helvetica, sans-serif;
color: #FFFFFF;
font-size: 12px;
text-align: left;
margin: 0px;
padding: 0px;
height: 28px;
width: 100%;
background-color: #2F6B98;
}
#nav ul {
margin: 0px;
padding-top: 6px;
}
#nav ul li {
display: inline;
list-style-type: none;
padding: 0px;
}
#nav li a {
color: #FFFFFF;
text-decoration: none;
padding-top: 10px;
padding-right: 12px;
padding-bottom: 8px;
padding-left: 12px;
margin: 0px;
}
#nav li a:hover {
background-color: #265380;
background-image: url(images/bg-shadow.gif);
background-repeat: repeat-x;
margin: 0px;
}
#nav li a.current {
background-image: url(images/bg-shadow.gif);
background-repeat: repeat-x;
padding-top: 10px;
padding-bottom: 8px;
background-color: #265380;
}
#main {
font-size: 12px;
line-height: 20px;
color: #333333;
font-family: Arial, Helvetica, sans-serif;
background-color: #FFFFFF;
text-align: left;
margin: 0px;
padding: 0px;
top: 0px;
width: 100%;
overflow: auto;
height: 100%;
}
#main_interior {
margin-right: 0px;
margin-top: 0px;
overflow: auto;
margin-left: 0px;
margin-bottom: 0px;
width: 635px;
text-align: justify;
padding-right: 0px;
padding-top: 30px;
padding-bottom: 25px;
padding-left: 50px;
}
#col1 {
float: left;
width: 190px;
padding-top: 0px;
padding-bottom: 0px;
padding-left: 0px;
border-right-width: 1px;
border-right-style: dotted;
border-right-color: #2F6B98;
text-align: left;
height: 260px;
}
#col2 {
margin-right: 225px;
margin-left: 225px;
padding: 0px;
text-align: left;
}
#col3 {
float: right;
width: 190px;
padding-top: 0px;
text-align: left;
height: 260px;
border-left-width: 1px;
border-left-style: dotted;
border-left-color: #2F6B98;
padding-left: 35px;
}
#forms {
border-top-width: 1px;
border-bottom-width: 1px;
border-top-style: dotted;
border-bottom-style: dotted;
border-top-color: #999999;
padding-top: 12px;
padding-bottom: 12px;
border-bottom-color: #999999;
}
#header_interior {
font-size: 20px;
color: #2F6B98;
margin-bottom: 50px;
}
#index_photo {
width: 280px;
float: left;
}
#index_text {
float: right;
width: 465px;
text-align: left;
background-color: #FFFFFF;
padding: 0px;
margin-top: 30px;
margin-right: 35px;
margin-bottom: 0px;
margin-left: 0px;
}
#index_container {
background-color: #FFFFFF;
}
#sidebar {
padding: 25px;
background-color: #B2C8D9;
float: left;
width: 150px;
height: 100%;
}
#sidebar_main {
padding: 25px;
float: right;
}
#footer_right {
float: right;
}
#footer_left {
float: left;
}
#search {
margin: 0px;
padding: 0px;
float: right;
text-align: right;
width: 100px;
}
#footer_extra {
text-align: left;
background-color: #E6E6E6;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
color: #666666;
padding-bottom: 75px;
clear: both;
background-image: url(images/bg-shadow-footer.gif);
background-repeat: repeat-x;
height: 100%;
}
#footer_extra_left {
float: left;
width: 280px;
}
#footer_extra_right {
margin-right: 30px;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #666666;
line-height: 20px;
padding-top: 20px;
margin-left: 30px;
}
#footer_extra_right ul {
margin-left: 11px;
padding-left: 0px;
}
#footer_extra_right li {
display: list-item;
list-style-type: disc;
list-style-position: outside;
}
#footer {
position: absolute;
bottom: 0;
background-color: #E6E6E6;
font-size: 10px;
color: #666666;
padding-top: 10px;
padding-bottom: 20px;
text-align: center;
padding-right: 0px;
padding-left: 0px;
line-height: 20px;
margin: 0px;
width: 100%;
}
#footer li {
display: inline;
list-style-type: none;
padding-right: 3px;
}
#footer a:link {
color: #2F6B98;
text-decoration: underline;
}
#footer a:visited {
color: #2F6B98;
text-decoration: underline;
}
#footer a:hover {
color: #333333;
text-decoration: underline;
}
1) the nav bar rollovers and "current" states seem to have padding issues (i've tried resolving them, but i don't seem to have success across all browsers)
2) the footer at the bottom, which i have set to always be positioned at the bottom of the window, is off-set in IE7 to the right.
Again, both of these problems are non-existant in safari, firefox and ie 5.2; they are only an issue in IE 7 (actually the footer rendering insn't perfect in ie 5.2, but i'm not too worried about that).
Any suggestions would be greatly appreciated. Please see code below:
HTML:
<!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=ISO-8859-1" />
<!-- TemplateBeginEditable name="doctitle" -->
<title>Untitled Document</title>
<!-- TemplateEndEditable -->
<!-- TemplateBeginEditable name="head" -->
<!-- TemplateEndEditable -->
<script type="text/javascript" src="../highlight.js"></script>
<link href="../cccs_hawaii.css" rel="stylesheet" type="text/css" />
<script type="text/JavaScript">
<!--
function MM_openBrWindow(theURL,winName,features) { //v2.0
window.open(theURL,winName,features);
}
//-->
</script>
</head>
<body>
<div id="container">
<div id="header">
<div id="address">1164 Bishop Street, Suite 1614, Honolulu, Hawaii 96813 </div>
</div>
<div id="nav">
<ul>
<li><a href="../index.html">Home</a></li>
<li><a href="../who_we_are.html">Who We Are</a></li>
<li><a href="../how_we_help.html">How We Help</a></li>
<li><a href="../bankruptcy.html">Bankruptcy</a></li>
<li><a href="../credit_review.html">Credit Review</a></li>
<li><a href="../workshops.html">Workshops</a></li>
<li><a href="../forms.html">Forms</a></li>
<li><a href="../contact.html">Contact</a></li>
</ul>
<script type="text/javascript">setPage()</script>
</div>
<div id="main"><!-- TemplateBeginEditable name="main" -->Welcome to Consumer Credit Counseling Service of Hawaii. We are a non-profit community service agency providing debt management counseling and credit education to the families of Hawaii since 1969.
We understand that debt problems can mount quickly and be difficult to overcome without help. We’re here to help you regain control of your finances, understand your credit report, make a plan to become debt-free and restore peace of mind.
<!-- TemplateEndEditable -->
<div id="footer_extra"><!-- TemplateBeginEditable name="footer_extra" -->Content for id "footer_extra" Goes Here<!-- TemplateEndEditable --></div>
</div>
<div id="footer">
<ul>
<li>© 2004-2007 CCCS of Hawaii, All Rights Reserved.</li>
<li><a href="mailto:info@cccshawaii.org">info@cccshawaii.org</a> </li>
<li>Phone: 808.532.3225 </li>
<li>Toll-Free: 1.808.801.5999</li>
<li><p><span class="footer_details">CCCS of Hawaii is a proud member of <a href="#" onclick="MM_openBrWindow('http://www.nfcc.org','','toolbar=yes,location=yes,status=yes,menubar=yes,scrollbars=yes,resizable=yes,width =800,height=600')">National Foundation for Credit Counseling</a>, <a href="#" onclick="MM_openBrWindow('http://www.coanet.org','','toolbar=yes,location=yes,status=yes,menubar=yes,scrollbars=yes,resizable=yes,wid th=800,height=600')">Council on Accreditation</a> and <a href="#" onclick="MM_openBrWindow('http://www.hawaii.bbb.org','','toolbar=yes,location=yes,status=yes,menubar=yes,scrollbars=yes,resizable=yes ,width=800,height=600')">Better Business Bureau</a>.</span></p></li>
</ul>
</div>
</div>
</body>
</html>
CSS:
html, body {
background-color: #2F6B98;
margin: 0px;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #333333;
height: 100%;
padding: 0px;
}
* {
padding: 0;
margin: 0;
}
a:link {
color: #2F6B98;
text-decoration: underline;
}
a:visited {
color: #999999;
text-decoration: underline;
}
a:hover {
color: #666666;
text-decoration: underline;
}
h1 {
font-family: Arial, Helvetica, sans-serif;
font-size: 21px;
color: #2F6B98;
font-weight: lighter;
}
h2 {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
color: #333333;
}
h3 {
font-size: 16px;
font-weight: lighter;
color: #333333;
}
.indented_text {
margin-left: 10px;
}
.footer_details {
font-size: 10px;
}
.footer_index_right {
font-size: 12px;
color: #666666;
line-height: 18px;
}
.footer_index_right ul {
display: list-item;
list-style-type: disc;
}
.footer_index_right li {
list-style-type: disc;
display: list-item;
}
#container {
text-align: center;
margin: 0 auto;
width: 800px;
min-height: 100%;
height: 100%;
height: auto;
position: relative;
background-color: #E6E6E6;
}
* html #container {
height: 100%;
}
#container_footer {
text-align: center;
margin: 0 auto;
width: 800px;
min-height: 100%;
height: 100%;
height: auto;
position: relative;
background-color: #FFFFFF;
}
#header {
height: 118px;
background-image: url(images/header.gif);
background-repeat: no-repeat;
}
#address {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 11px;
font-style: italic;
color: #2F6B98;
text-align: left;
margin-left: 260px;
padding-top: 78px;
}
#nav {
font-family: Arial, Helvetica, sans-serif;
color: #FFFFFF;
font-size: 12px;
text-align: left;
margin: 0px;
padding: 0px;
height: 28px;
width: 100%;
background-color: #2F6B98;
}
#nav ul {
margin: 0px;
padding-top: 6px;
}
#nav ul li {
display: inline;
list-style-type: none;
padding: 0px;
}
#nav li a {
color: #FFFFFF;
text-decoration: none;
padding-top: 10px;
padding-right: 12px;
padding-bottom: 8px;
padding-left: 12px;
margin: 0px;
}
#nav li a:hover {
background-color: #265380;
background-image: url(images/bg-shadow.gif);
background-repeat: repeat-x;
margin: 0px;
}
#nav li a.current {
background-image: url(images/bg-shadow.gif);
background-repeat: repeat-x;
padding-top: 10px;
padding-bottom: 8px;
background-color: #265380;
}
#main {
font-size: 12px;
line-height: 20px;
color: #333333;
font-family: Arial, Helvetica, sans-serif;
background-color: #FFFFFF;
text-align: left;
margin: 0px;
padding: 0px;
top: 0px;
width: 100%;
overflow: auto;
height: 100%;
}
#main_interior {
margin-right: 0px;
margin-top: 0px;
overflow: auto;
margin-left: 0px;
margin-bottom: 0px;
width: 635px;
text-align: justify;
padding-right: 0px;
padding-top: 30px;
padding-bottom: 25px;
padding-left: 50px;
}
#col1 {
float: left;
width: 190px;
padding-top: 0px;
padding-bottom: 0px;
padding-left: 0px;
border-right-width: 1px;
border-right-style: dotted;
border-right-color: #2F6B98;
text-align: left;
height: 260px;
}
#col2 {
margin-right: 225px;
margin-left: 225px;
padding: 0px;
text-align: left;
}
#col3 {
float: right;
width: 190px;
padding-top: 0px;
text-align: left;
height: 260px;
border-left-width: 1px;
border-left-style: dotted;
border-left-color: #2F6B98;
padding-left: 35px;
}
#forms {
border-top-width: 1px;
border-bottom-width: 1px;
border-top-style: dotted;
border-bottom-style: dotted;
border-top-color: #999999;
padding-top: 12px;
padding-bottom: 12px;
border-bottom-color: #999999;
}
#header_interior {
font-size: 20px;
color: #2F6B98;
margin-bottom: 50px;
}
#index_photo {
width: 280px;
float: left;
}
#index_text {
float: right;
width: 465px;
text-align: left;
background-color: #FFFFFF;
padding: 0px;
margin-top: 30px;
margin-right: 35px;
margin-bottom: 0px;
margin-left: 0px;
}
#index_container {
background-color: #FFFFFF;
}
#sidebar {
padding: 25px;
background-color: #B2C8D9;
float: left;
width: 150px;
height: 100%;
}
#sidebar_main {
padding: 25px;
float: right;
}
#footer_right {
float: right;
}
#footer_left {
float: left;
}
#search {
margin: 0px;
padding: 0px;
float: right;
text-align: right;
width: 100px;
}
#footer_extra {
text-align: left;
background-color: #E6E6E6;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
color: #666666;
padding-bottom: 75px;
clear: both;
background-image: url(images/bg-shadow-footer.gif);
background-repeat: repeat-x;
height: 100%;
}
#footer_extra_left {
float: left;
width: 280px;
}
#footer_extra_right {
margin-right: 30px;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #666666;
line-height: 20px;
padding-top: 20px;
margin-left: 30px;
}
#footer_extra_right ul {
margin-left: 11px;
padding-left: 0px;
}
#footer_extra_right li {
display: list-item;
list-style-type: disc;
list-style-position: outside;
}
#footer {
position: absolute;
bottom: 0;
background-color: #E6E6E6;
font-size: 10px;
color: #666666;
padding-top: 10px;
padding-bottom: 20px;
text-align: center;
padding-right: 0px;
padding-left: 0px;
line-height: 20px;
margin: 0px;
width: 100%;
}
#footer li {
display: inline;
list-style-type: none;
padding-right: 3px;
}
#footer a:link {
color: #2F6B98;
text-decoration: underline;
}
#footer a:visited {
color: #2F6B98;
text-decoration: underline;
}
#footer a:hover {
color: #333333;
text-decoration: underline;
}