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

    Join Date
    Jun 2002
    Posts
    78
    Rep Power
    12

    CSS Problem in NS7


    I don't have any idea what this page looks like in older browsers, but i know that it looks and works fine in IE 6 but the footer element does not appear correctly in NS7. Can someone help me out here?


    Main Page
    PHP Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <
    html>
        <
    head>
            <
    title>Inside Autism - </title>
            <!-- 
    Meta Tags         -->
            <
    meta name="keywords" content="autism, research, doctors, news, events, links, forums, message, board, community" />
            <
    meta name="description" content="A portal for parents of autistic children. Information is Power." />
            <
    meta name="author" content="Jordan Arentsen - Bliss Development Inc." />
            <
    meta name="authorware" content="Homesite 5.1" />
            <!-- 
    Linked Styles    -->
            <
    link rel="stylesheet" href="frontend/css/layout.css" />
            <
    link rel="stylesheet" href="frontend/css/elements.css" />
        </
    head>
        <
    body>
            <
    div id="content">
                <
    div class="header">
                    <
    div class="image">
                    
                    </
    div>
                </
    div>
                <
    div class="nav">
                    <
    div class="image">
                    
                    </
    div>            
                </
    div>
                <
    div class="main">
                
    Hello
                
    </div>
                <
    div class="footer">
                &
    copy2002 Inside Autism Org.
                </
    div>
            </
    div>
        </
    body>
    </
    html
    Layout.css
    PHP Code:
    /* Defaults */
    body {
        
    margin0;
        
    padding0;
        }

    /* Content */

    #content {
        
    positionabsolute;
        
    width710px;
        
    heightauto;
        
    left50%;
        
    margin-left: -355px;
        
    margin-top20px;
        
    borderblack 1px solid;
        }
    .
    header {
        
    width100%;
        
    background#c0c0c0;
        
    heightauto;
        }
    .
    nav {
        
    width100%;
        
    background#0033cc;
        
    heightauto;
        }
    .
    main {
        
    width100%;
        
    heightauto;
        }
    .
    footer {
        
    width100%;
        
    height10px;
        
    background#c0c0c0;
        
    bottom0;
        
    margin0px;
        
    padding2px;
        } 
    elements.css
    PHP Code:
    /* Header Elements */
    .header .image {
        
    width    20px;
        
    height    100px;
        }

    /* Nav Elements */
    .nav .image {
        
    width    10px;
        
    height    30px;
        }
        
    /* Footer Elemements */
    .footer p {
        
    font-size    8pt;
        
    font-family    verdana,ms sans serif;
        } 
    It is probably my fault, but i cannot figure out where i went wrong.

    Bliss Dev
    --blissdev
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2002
    Location
    Inside the GNU/Hurd kernel
    Posts
    492
    Rep Power
    12
    It is your fault,not Mozilla's.Because you have this code:
    .footer {
    width: 100%;
    height: 10px;
    10px is not enough for the text,change it to something higher and it will work.
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2002
    Posts
    78
    Rep Power
    12
    I fixed that problem, but now i have a new problem. My footer is not all the way to the bottom in ns7. I've tried a few things and none have worked. I have posted the page at...

    http://insideautism.org/

    Here is the new css...


    /* Defaults */
    body {
    margin: 0;
    padding: 0;
    }

    /* Content */

    #content {
    position: absolute;
    width: 710px;
    height: auto;
    left: 50%;
    margin-left: -355px;
    margin-top: 20px;
    border: black 1px solid;
    }
    .header {
    width: 100%;
    background: #c0c0c0;
    height: auto;
    }
    .nav {
    width: 100%;
    background: #0033cc;
    height: auto;
    }
    .main {
    width: 100%;
    height: auto;
    padding: 10px;
    }
    .footer {
    width: 100%;
    height: auto;
    background: #c0c0c0;
    overflow: hidden;
    }

    /* Main Layout */
    .main .leftcol {

    }
    .main .rightcol {

    }


    how can i get rid of the space at the bottom.
    --blissdev
  6. #4
  7. |<.+#f@#+.&.|
    Devshed Loyal (3000 - 3499 posts)

    Join Date
    Mar 2002
    Location
    norway
    Posts
    3,009
    Rep Power
    1224
    this seems to work,
    checked it ie6, moz1.3a, opera7b

    .footer {
    position:relative;
    bottom:0px;
    width: 100%;
    height: 15px;
    background: #c0c0c0;
    overflow: hidden;
    }
  8. #5
  9. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2002
    Posts
    78
    Rep Power
    12
    Thanks Akh, i will try that.

    You are a genius. It works like a dream. Thanks man.
    Last edited by blissdev; December 15th, 2002 at 04:17 PM.
    --blissdev
  10. #6
  11. |<.+#f@#+.&.|
    Devshed Loyal (3000 - 3499 posts)

    Join Date
    Mar 2002
    Location
    norway
    Posts
    3,009
    Rep Power
    1224
    no problem
  12. #7
  13. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2002
    Posts
    78
    Rep Power
    12
    Another problem that i'm having, but is not browser specific. When my page becomes vertically larger than the browser window it seems that i cannot add space underneath it. Does anyone know how i would do this? I've tried so many things, but i am not an expert. Please help me!
    --blissdev

IMN logo majestic logo threadwatch logo seochat tools logo