Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7

Thread: Footer CSS

  1. #1
    New to the CF scene
    Join Date
    Jul 2007
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Unhappy Footer CSS

    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

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Change this
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    to this
    Code:
    <!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.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #3
    New to the CF scene
    Join Date
    Jul 2007
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

    Quote Originally Posted by _Aerospace_Eng_ View Post
    <!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.

  • #4
    New to the CF scene
    Join Date
    Jul 2007
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #5
    New Coder
    Join Date
    Feb 2007
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Try running your index file through a validation service like http://validator.w3.org/.

  • #6
    Regular Coder BWiz's Avatar
    Join Date
    Mar 2006
    Location
    Sol System
    Posts
    471
    Thanks
    7
    Thanked 21 Times in 21 Posts
    Or posting code.
    BWiz :: Happy Coding!
    2006
    2007 2008 2009
    2010 2011
    Irrational numbers make no sense.

  • #7
    New to the CF scene
    Join Date
    Jul 2007
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by BWiz View Post
    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/ia...es/body_bg.gif) top center repeat-x; */
    background: transparent url(http://www.princetonol.com/groups/ia...es/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 + ";"
    + "filterrogidXImageTransform.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>


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •