Solved

CSS and Netscape

Posted on 2004-09-11
3
374 Views
Last Modified: 2008-03-06
My CSS looks good in IE6 but not in Netscape. In Netscape, my footer is floating in the middle of my page and not at the bottom.  Here's the URL:

helen.b-transfers.com

I already have a line that is supposed to clear my footer, but it is not working.

Here's the code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Language" content="en-us">
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title></title>
<style type="text/css">

body
{
     margin:0;
     padding:0;
     font:13px arial, verdana, sans-serif;
}

#container
{
     min-width: 700px;
     max-width: 1200px;
     width: expression((this.parentNode.clientWidth > 1200)?1200+"px":(this.parentNode.clientWidth <= 700 + 0)?700+"px":"auto")
}


#header
{
       background:#ffffff url('background-picturejpg.jpg');
     text-align:center;
     /* no width needed */
     height:147px

}

#header img
{
     margin:0 auto;
     display:block;
}


#leftcol
{
     float:left;
     width:33%;
}

#centercol
{
     float:left;
     width:33%;
     text-align:center;
}

#rightcol
{
     float:left;
     width:33%;
}

.spacer
{
     padding:10px 20px;
}

#leftcol p, #rightcol p
{
     text-align:justify;
}


#footer
{
     background:#ffffff url('footer-wide-gif.gif');
     text-align:center;
     /* no width needed */
     height:24px

}

#footer img2
{
     margin:0 auto;
     display:block;
}




img
{
     border:none;
}

img2
{
    border;none;
   
}

a:link, a:visited, a:hover, a:active
{
     text-decoration:none;
}</style>
</head>

<body>

<div id="container">

<div id="header" style="width: 100%; height: 147px">
     <map name="FPMap0">
            <area href="index.html" shape="rect" coords="366, 131, 417, 146">
            <area href="contact.html" shape="rect" coords="427, 131, 491, 146">
            </map>
     <img border="0" src="header/header-with-pallet-small-jpb.jpg" width="750" height="147" usemap="#FPMap0"></div>

<div id="leftcol" style="width: 33%; height: 283px">
     <div class="spacer">
      <p align="justify">
                  <b>
                  <font face="Arial" size="3" color="#EF7556">Welcome
                  to Helen's home page. </font> </b> </p>
      <p align="justify" style="margin-top: -1px; margin-bottom: -1px"><b>
      <font face="Arial" color="#EF7556">-- The Arts --</font><font face="Arial" color="#000066"> </font>
      </b></p>
      <p align="justify" style="margin-top: -1px; margin-bottom: -1px">
      <font face="Arial" color="#000066">This page reflects Helen's love for the
      arts.</font></p>
      <p align="justify" style="margin-top: -1px; margin-bottom: -1px">&nbsp;</p>
      <p align="justify" style="text-align: left; margin-top: -1px; margin-bottom: -1px">
      <font face="Arial"><b><font color="#EF7556">-- Painting -- </font></b>
      </font></p>
      <p align="justify" style="margin-top: -1px; margin-bottom: -1px">
      <font face="Arial" color="#000066">Her present focus is on writing and painting. Acrylics is
      her favorite water color to work with. Mountain scenes, sky, water, and
      rocks are her favorite scenes to paint. She painted both covers for her
      books. She loves giving pictures to her family</font></p>
      <p align="justify" style="margin-top: -1px; margin-bottom: -1px">&nbsp;</p>
      <p align="justify" style="text-align: left; margin-top: -1px; margin-bottom: -1px">
      <font color="#EF7556" face="Arial"><b>-- Writing</b> -- </font>
      </p>
      <p align="justify" style="margin-top: -1px; margin-bottom: -1px">
      <font face="Arial" color="#000066">She is the author of two books, which will be online by
      the end of this year. The books are called &quot;Journey into the Lights&quot; about
      her personal ongoing journey. &quot;Bear Face / Toward the Setting Sun&quot;, a true
      frontier story in the historical setting of 1865 to 1920. They will be in
      book stores sometime early in 2005.</font></p>
      <p align="justify" style="margin-top: -1px; margin-bottom: -1px">&nbsp;</p>
      <p align="justify" style="margin-top: -1px; margin-bottom: -1px"><b>
      <font face="Arial" color="#EF7556">-- Achievements --</font></b></p>
      <p align="justify" style="margin-top: -1px; margin-bottom: -1px">
      <font face="Arial" color="#000066">She has been published in her Church periodicals in four
      languages. She has been published in four large newspapers and several small
      ones, plus Idaho Farm Bureau, TV guide, and an article in a book by Eunice
      Wallice, &quot;They Made Wyoming Their own&quot;. This book is published by Ashida
      Press, and is in the BSU library.</font></p>
      <p align="justify" style="margin-top: -1px; margin-bottom: -1px">&nbsp;</p>
      <p align="justify" style="margin-top: -1px; margin-bottom: -1px">
      &nbsp;</p>
      <p align="justify">&nbsp;</p>
      <p align="justify">&nbsp;</p>
      <p align="justify">&nbsp;</p>
                  </div>
</div>

<div id="centercol" style="width: 33%; height: 195px">
     <div class="spacer">
                  <p align="justify" style="margin-top: -1px; margin-bottom: -1px">
                  <font face="Arial"><b><font color="#008080">&nbsp;</font></b></font></p>
                  <p align="justify" style="margin-top: -1px; margin-bottom: -1px">
                  <font face="Arial"><b><font color="#EF7556">-- Music -- </font></b>
                  </font> </p>
                  <p align="justify" style="margin-top: -1px; margin-bottom: -1px">
                  <font face="Arial" color="#000066">She was part of a band, &quot;The Nannies&quot; playing for
                  rodeos, conventions, dances, clubs, fairs, parades, politician
                  events, etc. They traveled to Washington, Oregon, Idaho, Colorado,
                  Montana, Wyoming, and Idaho, taking their family with them. She
                  wrote two songs that were published by her daughter,&nbsp; Betty Nanney Hillman, &quot;It's Time To Go&quot; and &quot;Lonely Side of Love.&quot;</font></p>
                  <p align="justify" style="margin-top: -1px; margin-bottom: -1px">
                  &nbsp;</p>
                  <p align="justify" style="margin-top: -1px; margin-bottom: -1px">
                  <font face="Arial"><b><font color="#EF7556">-- Love -- </font></b>
                  </font> </p>
                  <p align="justify" style="margin-top: -1px; margin-bottom: -1px">
                  <font face="Arial"><font color="#000066">Her first Love is God and His son Jesus. Second
                  is her family, which includes extended family. Third is this country
                  and her privilege to live here. Out of this passion, she has
                  designed some colorful &quot;God and Country stickers&quot; for doors,
                  mailboxes, car bumpers, windows, etc. They are featured online, to
                  see them click </font><a href="http://www.b-transfers.com/oreana">
                  <font color="#008080"><u>here</u></font></a></font></p>
                  <p align="justify" style="margin-top: -1px; margin-bottom: -1px">
                  &nbsp;</p>
                  <p align="justify" style="margin-top: -1px; margin-bottom: -1px">
                  <b><font face="Arial" color="#EF7556">-- Education -- </font></b> </p>
                  <p align="justify" style="margin-top: -1px; margin-bottom: -1px">
                  <font face="Arial" color="#000066">Helen attended Homedale High School, and
                  went for four years at Boise State University, majoring in art and addiction
                  counseling.</font></p>
                  <p align="justify" style="margin-top: -1px; margin-bottom: -1px">
                  &nbsp;</p>
                  <p align="justify" style="margin-top: -1px; margin-bottom: -1px">
                  <b><font color="#EF7556">-- <font face="Arial">Entertainment -- </font>
                  </font></b></p>
                  <p align="justify" style="margin-top: -1px; margin-bottom: -1px">
                  <font face="Arial" color="#000066">Her favorite movie is &quot;The Ten
                  Commandments&quot;, with her favorite actor, Charleton Heston and
                  her favorite actress is Goldie Hawn, in &quot;Man Overboard&quot;. She likes
                  family type movies, Fox news, public TV, discovery, etc. Religious
                  programs, the 700 club, Joyce Myers, Bennie Hinn, Shepherds Chapel,
                  and other selective, special spiritual teachers.</font></p>
                  <p style="text-align: left">
                  &nbsp;</p>
                  <p style="text-align: justify"><br>
                  &nbsp;<br>
&nbsp;</div>
</div>

<div id="rightcol" style="width: 33%; height: 245px">
     <div class="spacer">
     <div>
            <p style="margin-top: -1px; margin-bottom: -1px">&nbsp;</p>
            <p style="margin-top: -1px; margin-bottom: -1px"><b>
            <font color="#EF7556">-- Sports -- </font></b>
            <p style="margin-top: -1px; margin-bottom: -1px"><font color="#000066">She loves nearly all
            good, clean sports and sportsmanship, especially when her gand-children
            participate. Swimming and walking are her present ways to exercise.</font><p style="margin-top: -1px; margin-bottom: -1px">&nbsp;<p style="margin-top: -1px; margin-bottom: -1px">
            <b><font color="#EF7556">-- Family -- </font></b></div>
            <div>
                  <font color="#000066">Her family is the most important part of her life experiences. There
                  has been a lot of laughter, music, tears, hope, sorrow, mistakes,
                  achievements, and joy. It is a learning experience of unconditional
                  love. She would change nothing for the lessons learned . The lessons
                  are steps forward in her journey through life.</font></div>
            <p>&nbsp;</div>
</div>

<div style="clear:both; height:0; line-height:0; font-size:0;">&nbsp;</div>


<div id="footer" style="width: 100%; height: 24px">
     <p align="center">
            <img border="0" src="footer-jpg.jpg"></div>


</body>
</html>
0
Comment
Question by:weikelbob
3 Comments
 
LVL 5

Expert Comment

by:pmsyyz
ID: 12036709
Try adding a <br style="clear:both"> before <div id="footer">
0
 
LVL 7

Author Comment

by:weikelbob
ID: 12036719
is the <br style="clear:both"> different than what I already have? :

<div style="clear:both; height:0; line-height:0; font-size:0;">&nbsp;</div>
0
 
LVL 31

Accepted Solution

by:
seanpowell earned 125 total points
ID: 12040507
Hi Bob - just remove the heights from your main column div's - you should never need these unless it's a really unique situation, okay? :-)

<div id="leftcol" style="width: 33%;">
</div>

<div id="centercol" style="width: 33%;">
</div>

<div id="rightcol" style="width: 33%;">
</div>

Thanks,
Sean
0

Featured Post

What Security Threats Are You Missing?

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
Image Orientation On Website 6 44
aligning image inside table cell 4 27
Custom CSS for Bootstrap Nav Bar 3 33
Phone Dialer 5 38
"I want to put my photos online, but I don't want them stolen.  What settings should I use?" When You Put Photos Online First and foremost, any digital file published on the WWW can be copied, stored, modified, retransmitted, etc.  Remember Naps…
When writing CSS, there are a few simple rules that will make your life easier.    1. Using ‘* {box-sizing:border-box;}’. Using this will wrap all your elements in a nice little compact box-model that will give you the width you want, like so... …
In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…

746 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now