CSS Problem in NS7

Dev Shed Forums Sponsor:

December 14th, 2002, 08:37 PM

blissdev

Contributing User

Join Date: Jun 2002

Posts: 78

Time spent in forums: < 1 sec
Reputation Power: 11

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">

            © 2002 Inside Autism Org.

            </div>

        </div>

    </body>

</html>

Layout.css

PHP Code:


		
			
/* 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;

    }

.footer {

    width: 100%;

    height: 10px;

    background: #c0c0c0;

    bottom: 0;

    margin: 0px;

    padding: 2px;

    }

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

December 15th, 2002, 08:04 AM

Tuxie

Contributing User

Join Date: Apr 2002

Location: Inside the GNU/Hurd kernel

Posts: 492

Time spent in forums: 2 h 1 m
Reputation 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.

December 15th, 2002, 02:40 PM

blissdev

Contributing User

Join Date: Jun 2002

Posts: 78

Time spent in forums: < 1 sec
Reputation Power: 11

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.

December 15th, 2002, 03:50 PM

Akh

|<.+#f@#+.&.|

Join Date: Mar 2002

Location: norway

Posts: 3,009

Time spent in forums: 1 Month 4 Days 17 h 35 m 11 sec
Reputation Power: 1223

this seems to work,
checked it ie6, moz1.3a, opera7b

.footer {
position:relative;
bottom:0px;
width: 100%;
height: 15px;
background: #c0c0c0;
overflow: hidden;
}

December 15th, 2002, 04:12 PM

blissdev

Contributing User

Join Date: Jun 2002

Posts: 78

Time spent in forums: < 1 sec
Reputation Power: 11

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.

December 15th, 2002, 04:45 PM

Akh

|<.+#f@#+.&.|

Join Date: Mar 2002

Location: norway

Posts: 3,009

Time spent in forums: 1 Month 4 Days 17 h 35 m 11 sec
Reputation Power: 1223

no problem

December 16th, 2002, 07:31 PM

blissdev

Contributing User

Join Date: Jun 2002

Posts: 78

Time spent in forums: < 1 sec
Reputation Power: 11

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!

CSS Problem in NS7

Developer Shed Advertisers and Affiliates