#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2010
    Posts
    4
    Rep Power
    0

    Keep footer at bottom of page in Firefox 3.6.6


    Hello everyone

    I have a problem with keeping a footer at the bottom of a page. It hovers over other elements in Firefox 3.6.6

    Also I'd like to have the footer at the right side and not centered. If I define "right" however, part of it disappears in IE.

    The style sheet is no from me.

    I would appreciate, if someone were kind enough to have a look and help me. Thanks in advance for any input

    Eva

    Here it is:

    /***********************************************/
    /* 3col_leftNav.css */
    /* Use with template 3col_leftNav.html */
    /***********************************************/

    /***********************************************/
    /* HTML tag styles */
    /***********************************************/

    body{
    background-image: url(../../Lokale%20Einstellungen/Temporary%20Internet%20Files/Lokale%20Einstellungen/Temporary%20Internet%20Files/Content.IE5/4WPRVLBA/head6.png);
    background-repeat: no-repeat;
    background-position: left top;
    font: 13px Verdana, Arial, Helvetica, sans-serif;
    /* size: 100%; */
    color: #333333;
    line-height: 1.3;
    margin: 0px;
    padding: 0px;
    }


    img{
    border: 0;
    }

    a{
    color: #006699;
    text-decoration: none;
    }

    a:link{
    color: #006699;
    text-decoration: none;
    }

    a:visited{
    color: #006699;
    text-decoration: none;
    }

    a:hover{
    color: #006699;
    text-decoration: underline;
    font-weight: bold;
    }

    h1{
    font-family: Verdana,Arial,sans-serif;
    font-size: 114%;
    color: black;
    margin: 0px;
    padding: 0px;
    }

    h2{
    font-family: Verdana,Arial,sans-serif;
    font-size: 100%;
    color: black;
    margin: 0px;
    padding: 0px;
    }

    h3{
    font-family: Verdana,Arial,sans-serif;
    font-size: 100%;
    color: black;
    margin: 0px;
    padding: 0px;
    }

    h4{
    font-family: Verdana,Arial,sans-serif;
    font-size: 100%;
    font-weight: normal;
    color: #333333;
    margin: 0px;
    padding: 0px;
    }

    h5{
    font-family: Verdana,Arial,sans-serif;
    font-size: 100%;
    color: #334d55;
    margin: 0px;
    padding: 0px;
    }

    ul{
    list-style-type: square;
    }

    ul ul{
    list-style-type: disc;
    }

    ul ul ul{
    list-style-type: none;
    }

    label{
    font-family: Arial,sans-serif;
    font-size: 100%;
    font-weight: bold;
    color: #334d55;
    }

    table{
    padding: 5 px;
    }

    /***********************************************/
    /* Layout Divs */
    /***********************************************/

    #masterhead{
    padding: 30px 0px 0px 0px;
    /* border-bottom: 1px solid #cccccc; */
    width: 950px;
    }

    #navBar{
    float: left;
    width: 195px;
    margin: 0px;
    /* 19.08.2008 padding-top: -5px;*/
    padding-top: -5px;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
    /* background-color: #e4f2f9; */
    /* 19.08.2008 border-right: 1px solid #cccccc; */
    }

    #headlines{
    position: absolute;
    left: 690px;
    top: 135px;
    font-size: 85%!important;
    /* font-size: 90%; */
    /* float:right; */
    width: 230px;
    margin-top: -30px;
    /* border-left: 1px solid #cccccc; */
    /* border-bottom: 1px solid #cccccc;*/
    /* padding-right: 10px; */
    }

    #headlines h3{
    margin-top: 3px;
    margin-bottom: 3px;
    margin-left: 10px;
    padding-top: 1px;
    padding-bottom: 1px;
    font-weight: 900;
    }

    #content{
    float: left;
    padding-left: 24px;
    width: 460px;
    font-size: 107%;
    line-height: 1.4;
    /* position: absolute;
    top: 184px;
    left: 210px; */
    }

    #content h1,h2 {
    margin: 0px;
    padding-top: 2px;
    padding-right: 2px;
    padding-bottom: 2px;
    padding-left: 0px;
    font-size: 130%;
    font-color: black;
    }

    #content h3 {
    margin: 0px;
    padding-top: 2px;
    padding-right: 2px;
    padding-bottom: 2px;
    padding-left: 0px;
    font-size: 120%;
    font-height: 90%;
    font-weight: 900;
    }


    /***********************************************/
    /* Components */
    /***********************************************/

    #siteName{
    margin: 0;
    padding-top: 0px;
    padding-right: 0;
    padding-bottom: 0;
    padding-left: 200px;
    /* font-size: x-large; */
    color: #FF9900;
    }


    /************* #globalNav styles **************/

    #globalNav{
    /* border-bottom: 1px solid #CCC; */
    color: #006699;
    text-align: center;
    /* font-weight: bold; */
    margin-top: 40px;
    padding-top: 10px;
    padding-right: 0px;
    padding-bottom: 5px;
    padding-left: 10px;
    /* 19.08.2008 border-top: 1px solid #cccccc; */
    }

    #globalNav img{
    display: block;
    }

    #globalNav a {
    /* font-size: 120%; */
    padding: 0 4px 0 0;
    }

    /*************** #pageName styles **************/

    /*
    #pageName{
    margin: 0px;
    padding-top: 30px;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 20px;
    }
    */

    /************* #breadCrumb styles *************/

    #breadCrumb{
    font-size: 80%;
    padding: 2px 0px 0 10px;
    }


    /************** .feature styles ***************/

    .feature{
    padding: 2px 2px 10px 10px;
    font-size: 80%;
    }

    .feature h3{
    padding: 30px 0px 5px 0px;
    text-align: center;
    color: #006699;
    }

    .feature img{
    float: left;
    padding: 10px 10px 0px 0px;
    }


    /************** .story styles *****************/

    .story{
    clear: both;
    font-size: 80%;
    padding-top: -40px;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
    }

    .story p{
    padding: 0px 0px 10px 0px;
    }


    /************* #siteInfo styles ***************/

    #siteInfo{
    font-size: 75%;
    color: #cccccc;
    padding: 10px 10px 10px 10px;
    text-align: right;
    border-top: 0px none #cccccc;
    /* border-right: 1px solid #cccccc;
    border-bottom: 1px solid #cccccc;
    border-left: 1px solid #cccccc; */

    }

    #siteInfo img{
    padding: 4px 4px 4px 10px;
    vertical-align: middle;
    }


    /************* #search styles ***************/

    #search{
    padding: 5px 0px 5px 10px;
    border-bottom: 1px solid #cccccc;
    font-size: 90%;
    }

    #search form{
    margin: 0px;
    padding: 0px;
    }

    #search label{
    display: block;
    margin: 0px;
    padding: 0px;
    }


    /*********** #navBar link styles ***********/

    #navBar ul a:link, #navBar ul a:visited {display: block;}
    #navBar ul {list-style: none; margin: 0; padding: 0;}

    /* hack to fix IE/Win's broken rendering of block-level anchors in lists */
    #navBar li {border-bottom: 1px solid #EEE;}

    /* fix for browsers that don't need the hack */
    html>body #navBar li {border-bottom: none;}


    /*********** #sectionLinks styles ***********/

    #sectionLinks{
    position: relative;
    margin: 0px;
    padding: 0px;
    /* border-bottom: 1px solid #006699; */
    font-size: 90%;
    }

    #sectionLinks h3{
    padding: 10px 0px 2px 10px;
    }

    #sectionLinks a {
    display: block;
    /* border-top: 1px solid #006699; */
    padding: 2px 0px 2px 10px;
    }

    #sectionLinks a:hover{
    /* background-color: #dddddd;*/
    }


    .navigate {
    overflow: hidden;
    width: 204px;
    padding-bottom: 1px;
    }

    /**Navigation Menu **/
    .navigate ul, .navigate li {
    list-style: none;
    margin: 0px 0px!important;
    padding: 0px 0px!important;
    line-height: 1.5em;
    }


    /**erste Navigationseben**/
    .navigate li.current span, .navigate li a, .navigate li a:link, .navigate li a:visited, .navigate li a:hover, .navigate li a:focus, .navigate li a:active {
    display: block;
    border: 0;
    border-bottom: 1px solid #86c2e3;
    border-top: 1px solid #fff;
    border-right: 1px solid #86c2e3;
    width: 100%;
    text-decoration: none;
    margin: 0;
    padding: 5px 5px 5px 15px;
    font-size: 1.0em;
    font-weight: bold;
    }

    .navigate[class] li.current span, .navigate[class] li a, .navigate[class] li a:link, .navigate[class] li a:visited, .navigate[class] li a:hover, .navigate[class] li a:focus, .navigate[class] li a:active {
    width: auto;
    }

    .navigate li a, .navigate li a:link, .navigate li a:visited, .navigate li a:hover, .navigate li a:focus, .navigate li a:active {
    background: url(../../Lokale%20Einstellungen/Temporary%20Internet%20Files/Lokale%20Einstellungen/Temporary%20Internet%20Files/Content.IE5/4WPRVLBA/navi_0_0.png) #e4f2f9 no-repeat 0px 0px;
    padding: 5px 5px 5px 15px;
    color: #000;
    font-weight: bold;
    }

    .navigate li a:hover, .navigate li a:focus, .navigate li a:active {
    background: url(../../Lokale%20Einstellungen/Temporary%20Internet%20Files/Lokale%20Einstellungen/Temporary%20Internet%20Files/Content.IE5/4WPRVLBA/navi_0_1.png) #e4f2f9 no-repeat 0px 0px;
    }

    .navigate li.current span, .navigate li.current a, .navigate li.current a:link, .navigate li.current a:visited, .navigate li.current a:hover, .navigate li.current a:focus, .navigate li.current a:active {
    background: url(../../Lokale%20Einstellungen/Temporary%20Internet%20Files/Lokale%20Einstellungen/Temporary%20Internet%20Files/Content.IE5/4WPRVLBA/navi_root_current.png) #EFE9D3 no-repeat 0px 0px;
    color: #000;
    }

    .navigate li.current a.current, .navigate li.current a.current:link, .navigate li.current a.current:visited, .navigate li.current a.current:hover, .navigate li.current a.current:focus, .navigate li.current a.current:active {
    background: url(../../Lokale%20Einstellungen/Temporary%20Internet%20Files/Lokale%20Einstellungen/Temporary%20Internet%20Files/Content.IE5/4WPRVLBA/navi_root_current.png) #EFE9D3 no-repeat 0px 0px;
    color: #000;
    }


    /*********** .relatedLinks styles ***********/

    .relatedLinks{
    position: relative;
    margin: 0px;
    padding: 0px 0px 10px 10px;
    font-size: 90%;
    }

    .relatedLinks h3{
    padding: 10px 0px 2px 0px;
    }

    .relatedLinks a:link,
    .relatedLinks a:visited {
    display: block;
    }

    /************** #advert styles **************/

    #advert{
    padding: 30px 0px 10px;
    }

    #advert img{
    display: block;
    }


    /************** #headlines styles **************/

    #headlines{
    margin: 0px;
    padding: 10px 0px 20px 10px;
    }

    #headlines p{
    padding: 5px 0px 5px 0px;
    }

    /**Footer**/
    #footer {
    clear: both;
    position: relative;
    border-top: 4px solid #CCECF4;
    font-size: 11px;
    padding: 4px 4px 8px 10px;
    margin-top: 4px;
    bottom:0;
    zoom: 1;
    }

    #footer .left {
    float: left;
    width: 700px;
    bottom:0;
    }

    #footer .right {
    float: right;
    width: 150px;
    text-align: right;
    margin-top: -2.3em;
    zoom: 1;
    position: relative;
    z-index: 0;
    bottom:0;
    }

    #footer p {
    color: #000 !important;
    padding: 0;
    margin: 0;
    bottom:0;
    }

    #footer a, #footer a:link, #footer a:visited, #footer a:hover, #footer a:focus, #footer a:active {
    color: #306479;
    text-decoration: none;
    font-weight: bold;
    }

    #footer a:hover, #footer a:focus {
    text-decoration: underline;
    }


    #navispalte {
    font: 1em Verdana, Geneva, Arial, Helvetica, sans-serif;
    width: 202px;
    float: left;
    }
  2. #2
  3. No Profile Picture
    Sencha Developer
    Devshed Novice (500 - 999 posts)

    Join Date
    Feb 2001
    Location
    STL
    Posts
    547
    Rep Power
    0
    If you want things positioned absolutely then use position: absolute and then the left, top, right, bottom properties.

    Code:
    #myClassTop {
        position: absolute;
        top: 0px;
    }
    #myClassBottom {
        position: absolute;
        bottom: 50px;
    }
    -Mitchell Simoens
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2010
    Posts
    4
    Rep Power
    0
    Thank you so much. It worked with bottom, but not with left. In IE I can only see part of it, as part of the footer slided to the left outside the page. I keep trying

    Thanks again!

    Eva
  6. #4
  7. No Profile Picture
    Sencha Developer
    Devshed Novice (500 - 999 posts)

    Join Date
    Feb 2001
    Location
    STL
    Posts
    547
    Rep Power
    0
    So your title of the post was worrying only about Firefox 3.6.6 but now you are worrying about IE...

    Either case, they should work the same.
    -Mitchell Simoens
  8. #5
  9. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2010
    Posts
    4
    Rep Power
    0
    You are right Shame on me ...

    Donno why it doesn't work. The CSS looks pretty messy to me, but it will take some time until I get the hang of it.
  10. #6
  11. No Profile Picture
    Sencha Developer
    Devshed Novice (500 - 999 posts)

    Join Date
    Feb 2001
    Location
    STL
    Posts
    547
    Rep Power
    0
    Yes it does and without some HTML markup or a test page link it's kind of hard to imagine what your doing. Also you should post any code within the CODE tags
    -Mitchell Simoens
  12. #7
  13. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2010
    Posts
    4
    Rep Power
    0
    Okay.
    I tried to post a link first, but it wasn't possible. Guess I could've done something like:
    gawo-ev.de/cms/

IMN logo majestic logo threadwatch logo seochat tools logo