...

View Full Version : Footer CSS



kenroar
07-25-2007, 05:14 AM
I have asked for help on several forums and they have been unable to help. I have incorporated some hacks and my footer still does not appear in IE7. It looks fine in Firefox. What am I doing wrong?

Index page
http://www.princetonol.com/groups/iad/index2.html

CSS
http://www.princetonol.com/groups/iad/css/common.css

IE Hack (from another forum)
http://www.princetonol.com/groups/iad/css/pngfix.js

_Aerospace_Eng_
07-25-2007, 09:41 AM
Change this

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
to this

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
And no your footer does not look that great in Firefox. You need to clear your floats. Its off to the right of the browser. I also suggest that you read the link in my sig titled "Why Tables for Layout is Stupid?" as not using tables can solve a lot of your problems.

kenroar
07-26-2007, 06:18 AM
I loved your tutorial on tables. I was one of the first to have a website on the internet and began hand coding HTML (Back in Mosaic days). I graduated to Dreamweaver a few years ago and have only now just begun to use CSS. As you can see, I am not proficient at CSS yet.

Much of the CSS I used on this page was gleaned from http://www.getonboardnow.org/. That page works on IE and Firefox. Obviously I've done something wrong because the footer isn't right.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">I also suggest that you read the link in my sig titled "Why Tables for Layout is Stupid?" as not using tables can solve a lot of your problems.

kenroar
07-29-2007, 03:03 AM
OK guys. What do I do now? Nothing is working. I even followed the directions on http://www.alistapart.com/articles/footers/ but that made my Flash animation at the top of the page disappear. I'm really needing to get this resolved.

pelinor
07-29-2007, 06:37 AM
Try running your index file through a validation service like http://validator.w3.org/.

BWiz
07-29-2007, 06:41 AM
Or posting code.

kenroar
07-31-2007, 09:47 PM
Or posting code.

I now have it showing up correctly in Safari, Firefox, and IE 7. It does not show up correctly in IE 6. Here is my code. Some of it I've begged and borrowed. I've removed non-pertinent code:

HTML -------------------------------------------------------

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><title>Incredible Art Department | Art Education</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="javascript" src="css/AC_RunActiveContent.js"></script>
<link href="css/common.css" media="screen" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="css/newheader.css">
</script><!--[if lt IE 7.]>
<script defer type="text/javascript" src="css/pngfix.js"></script>
<![endif]--><!--Preload BG-->

<script language="JavaScript">
var arImages=new Array();
function Preload() {
var temp = Preload.arguments;
for(x=0; x < temp.length-1; x++) {
arImages[x]=new Image();
arImages[x].src=Preload.arguments[x];
}
}
</script>
</style>

/////// * For some reason, when I remove the style code below, it does not show up correctly * ////////////

<style type="text/css">
body
{background-image: url("images/main_bg.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: top center}
</style>

</head><body onLoad="Preload('images/container_bg.jpg')" link="#b4904c" vlink="#000080">
<div id="content">
<div align="center"><table align="center"><tbody><tr><td>
/////* Flash animation */////
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div align="center">
<table align="center" cellpadding="0" cellspacing="0" width="810">
<tbody>
<tr>
<td rowspan="1">
<table align="center" width="720">
<tbody>
<tr>
<td colspan="4" rowspan="1" valign="top"><div align="center">
<table align="center" cellpadding="0" cellspacing="0" height="168" width="822">
<tbody>
<tr>
<td align="center">
///// * Drop-down menu stuff *////</td>
</tr>
<tr>
<td valign="top"><br>
<table align="center" border="0" cellpadding="10">
<tbody><tr>
<td align="center"><div align="center"><div id="parchment">
<div class="aditem_parchment">

/////* Google Adsence code */////

</div></div></div><br></td>
<td><div align="center">

/////* Google Adsence code */////

<br><img src="images/search_iad.gif" alt="Search IAD" width="87"></div></td>
</tr>
</tbody></table></td>
</tr>
</tbody>
</table></div></td>
</tr>
<tr>
<td height="180"><div align="center"><a href="lessons/lessons.html"><img src="images/jumping_jacks.gif" alt="Art Lessons- Early childhood, elementary, middle school, high school, college" usemap="#Map" border="0" height="178" width="175"></a></div></td>
<td><div align="center"><a href="links/artstuff.html"><img src="images/angel.gif" alt="Art Stuff- Thousand of art Links" border="0" height="171" width="150"></a></div></td>
<td><div align="center"><a href="lessons/middle/"><img src="images/horse_left.gif" alt="Resources- Visual arts, renaissance, art education, arts advocacy, curriculum" usemap="#Map2" border="0" height="171" width="150"></a></div></td>

<td rowspan="4" valign="top">
<div id="right_col">
<img src="images/divide_vertical.gif" style="float: left;" width="2"><div align="center"><div id="right_content"><div id="squareparchment"><div class="aditem_squareparchment">

/////* Google Adsence code */////

<br>
<br>
</div></div></div></div><br><div align="center">
<p>

/////* Links */////

</td>
</tr>
<tr>
<td height="210" width="200">

/////* Image map */////

</div></td>
</tr>
<tr>
<td height="204" valign="top">

/////* Image map */////

</td>
<td height="204" valign="top">

/////* Image map */////

</td>
</tr><tr>
<td height="154" valign="top"><div align="center">
<p><a href="peeves/petpeeves.html"><img src="images/weeds.gif" alt="Pet Peeves" align="top" border="0" height="154" width="175"></a></p>
<p><br>
</p>
</div></td>
<td align="center" valign="top"><br /><a href="news/artnews.html"><img alt="Art News" src="images/riderlesshorsert.gif" border="0" height="128" width="155"></a><br></td>
<td valign="top"><div align="center">
<a href="links/toolbox/supplies.html"><img src="images/oldman.gif" alt="Art Supplies" width="137" height="185" border="0" align="top"></a>
<p>&nbsp;</p>
</div></td>
</tr>
</tbody>
</table>
<br><br><br><br>
<br class="clear" />
<div id="footer" />
<div>
<span id="footer_left">
<table align="center"><tbody><tr><td>
<a href="contact/contact.html" target="_top">Contact Us</a> |
<a href="history/history.html" target="_top">History of IAD</a> | <a href="mailto:mmm@yahoo.com?Subject=IAD%20Contact-%20Ken">Ken Rohrer</a>
and <a href="mailto:mmmm@yahoo.com?Subject=IAD%20Contact-%20Judy">Judy Decker</a> | Copyright &copy; 2007</font></td></tr></tbody></table>
</span>
</div>
</div>
</td></tr></tbody></table></div>
</body></html>


CSS --------------------------------------------------------------


/////// css/common.css ////////////////

html, body {
margin: 0px;
padding: 0px;
}
body {
margin: 0px auto;
color: #FFCC66;
font-size: 11px;
font-family: "Arial", "Helvetica", "Verdana", sans-serif;
_background: #FFF url(http://www.princetonol.com/groups/iad/images/footer.jpg) bottom center no-repeat;
}
br.clear {
clear: both;
}
a img {
border: none;
}
img, div {
behavior: url(iepngfix.htc);
}
#container {
width: 100%;
/* background: transparent url(http://www.princetonol.com/groups/iad/images/body_bg.gif) top center repeat-x; */
background: transparent url(http://www.princetonol.com/groups/iad/images/main_bg.jpg) top center no-repeat;
}
#contentainer {
width: 1027px;
height: 100%;
padding: 0px 0px 100px 0px;
_padding-bottom: 0px;
background-color: transparent;
background-position: bottom left;
background-repeat: no-repeat;
}
/* Content */
#flash_nav {
width: 830px;
height: 255px;
}
/* Footer */
#footer {
width: 100%;
min-width: 800px;
margin: -84px 0px 0px 0px;
_margin: 0px;
background: transparent url(../images/footer.png) bottom center no-repeat;
_background: none;
padding: 0px;
text-align: left; /* Needed for IE*/
}
#footer div {
width: 940px;
height: 60px;
margin: 0px auto;
padding-top: 40px;
color: #FFFFCC;
font-size: 12px;
}
#footer a {
color: #FFCC66;
font-size: 12px;
margin-right: 10px;
}
#footer_left {
margin-left: 0px;
}
#footer_right {
margin-left: 0px;
}
#footer_right a img {
margin-bottom: -15px;
}
/* ADS */
#parchment {
width: 337px;
height: 100px;
background: url('http://www.princetonol.com/groups/iad/images/parchment.gif') no-repeat top;
vertical-align: top;
position: relative;
}
.aditem_parchment {
padding: 28px 0px 0px 0px;
}
#squareparchment {
width: 185px;
height: 168px;
background: url('http://www.princetonol.com/groups/iad/images/square_parchment.gif') no-repeat top;
vertical-align: top;
position: relative;
}
.aditem_squareparchment {
padding: 18px 30px 0px 0px;
}

//////////// css/pngfix.js ////////////////////////////////////////////

/*
Correctly handle PNG transparency in Win IE 5.5 & 6.
http://homepage.ntlworld.com/bobosola. Updated 18-Jan-2006.
Use in <HEAD> with DEFER keyword wrapped in conditional comments:
<!--[if lt IE 7]>
<script defer type="text/javascript" src="pngfix.js"></script>
<![endif]-->
*/
var arVersion = navigator.appVersion.split("MSIE")
var version = parseFloat(arVersion[1])
if ((version >= 5.5) && (document.body.filters))
{
for(var i=0; i<document.images.length; i++)
{
var img = document.images[i]
var imgName = img.src.toUpperCase()
if (imgName.substring(imgName.length-3, imgName.length) == "PNG")
{
var imgID = (img.id) ? "id='" + img.id + "' " : ""
var imgClass = (img.className) ? "class='" + img.className + "' " : ""
var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "
var imgStyle = "display:inline-block;" + img.style.cssText
if (img.align == "left") imgStyle = "float:left;" + imgStyle
if (img.align == "right") imgStyle = "float:right;" + imgStyle
if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle
var strNewHTML = "<span " + imgID + imgClass + imgTitle
+ " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
+ "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
+ "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>"
img.outerHTML = strNewHTML
i = i-1
}
}
}

////////// iepngfix.htc (in with the index file) //////////////////////////////
(Do I need this file?)

<public:component>
<public:attach event="onpropertychange" onevent="doFix()" />
<script type="text/javascript">
// IE5.5+ PNG Alpha Fix v1.0RC4
// (c) 2004-2005 Angus Turnbull http://www.twinhelix.com
// This is licensed under the CC-GNU LGPL, version 2.1 or later.
// For details, see: http://creativecommons.org/licenses/LGPL/2.1/
// This must be a path to a blank image. That's all the configuration you need.
if (typeof blankImg == 'undefined') var blankImg = 'blank.gif';
var f = 'DXImageTransform.Microsoft.AlphaImageLoader';
function filt(s, m)
{
if (filters[f])
{
filters[f].enabled = s ? true : false;
if (s) with (filters[f]) { src = s; sizingMethod = m }
}
else if (s) style.filter = 'progid:'+f+'(src="'+s+'",sizingMethod="'+m+'")';
}
function doFix()
{
// Assume IE7 is OK.
if (!/MSIE (5\.5|6\.)/.test(navigator.userAgent) ||
(event && !/(background|src)/.test(event.propertyName))) return;
var bgImg = currentStyle.backgroundImage || style.backgroundImage;
if (tagName == 'IMG')
{
if ((/\.png$/i).test(src))
{
if (currentStyle.width == 'auto' && currentStyle.height == 'auto')
style.width = offsetWidth + 'px';
filt(src, 'scale');
src = blankImg;
}
else if (src.indexOf(blankImg) < 0) filt();
}
else if (bgImg && bgImg != 'none')
{
if (bgImg.match(/^url[("']+(.*\.png)[)"']+$/i))
{
var s = RegExp.$1;
if (currentStyle.width == 'auto' && currentStyle.height == 'auto')
style.width = offsetWidth + 'px';
style.backgroundImage = 'none';
filt(s, 'crop');
// IE link fix.
for (var n = 0; n < childNodes.length; n++)
if (childNodes[n].style) childNodes[n].style.position = 'relative';
}
else filt();
}
}
doFix();
</script>
</public:component>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum