Footer DIV Positioning Problem in Safari

Question

The website I am working on is giving me a huge headache!
Here's a link to a
sample
page
I have also attached the css. Things look okay in Firefox for
me... I'm on an iMac. The footer stays at the bottom of the page
and to the right as it should be. Safari on the other hand, places
the footer in a totally different location. I haven't checked it in
Internet Explorer OR on a PC yet, but I dread the problems I may be
faced with.
Any help would be appreciated as I am running out of
time.

Answer 1

Add clear: both; to your #footer css styles (see below)
#footer {
height: 50px;
text-align: right;
padding: 20px 100px 0px 0px;
color: #FFFFFF;
font: 11px/1.5em Georgia, "Times New Roman", Times, serif;
margin: 0px;
width: 980px;
position: relative;
float: left;
clear: both; /* ADD THIS */
OlDirty wrote:
> The website I am working on is giving me a huge
headache! Here's a link to a
>
http://php.wmsgroup.com/eofd6.org/administration.html
>
> I have also attached the css. Things look okay in
Firefox for me... I'm on an
> iMac. The footer stays at the bottom of the page and to
the right as it should
> be. Safari on the other hand, places the footer in a
totally different
> location. I haven't checked it in Internet Explorer OR
on a PC yet, but I dread
> the problems I may be faced with.
>
> Any help would be appreciated as I am running out of
time.
>
> /* Top Elements */
> * {
> margin: 0px;
> padding: 0px;
> }
> body {
> font: 12px/1.5em Arial, Helvetica, sans-serif;
> color: #FFFFFF;
> background: #000000;
> text-align: left;
> }
> p {
> padding-bottom: 12px;
> color: #000000;
> }
> ol { margin-left: 30px; }
>
> /* links */
> a, a:visited {
> color: #333333;
> background: inherit;
> text-decoration: underline;
> }
> a:hover {
> color: #333333;
> background: inherit;
> padding-bottom: 0;
> text-decoration: none;
> }
> a.gallery, a.gallery:visited {
> color: #FFFFFF;
> text-decoration: underline;
> }
> a.gallery:hover {
> color: #FFFFFF;
> text-decoration: none;
>
> /* headers */
> }
> #volunteer h1 {
> font: normal 18px Georgia, "Times New Roman", Times,
serif;
> color: #660000;
> padding-bottom: 10px;
> }
> #content h1 {
> font: normal 22px Georgia, "Times New Roman", Times,
serif;
> color: #650000;
> padding-bottom: 10px;
> }
> #gallery h1 {
> display: block;
> color: #FFFFFF;
> letter-spacing: -1px;
> padding-bottom: 10px;
> font: normal 20px Georgia, "Times New Roman", Times,
serif;
> }
> h2 {
> font: normal 18px Georgia, "Times New Roman", Times,
serif;
> padding-bottom: 4px;
> border-bottom: 1px dotted #650000;
> width: 300px;
>
> /* images */
> }
> .floatright {
> float: right;
> margin: 4px;
> border: 1px solid #CCCCCC;
> background: #EFEFEF;
> padding: 4px;
> }
> .floatleft {
> float: left;
> margin: 4px;
> border: 1px solid #CCCCCC;
> background: #EFEFEF;
> padding: 4px;
>
> /* form elements */
> }
> table {
> border-collapse: collapse;
> border: 1px solid #999999;
> margin-top: 3px;
> margin-bottom: 3px;
> }
>
> td, th {
> padding: 0.1em;
> border: 1px solid #CCCCCC;
> }
> form {
> margin:10px; padding: 0 5px;
> background: #F5F5F5;
> }
> label {
> display:block;
> font-weight:bold;
> margin:5px 0;
> }
> input {
> padding:2px;
> border:1px solid #eee;
> font: normal 1em Verdana, sans-serif;
> color:#777;
> }
> textarea {
> width:400px;
> padding:2px;
> font: normal 1em Verdana, sans-serif;
> border:1px solid #eee;
> height:100px;
> display:block;
> color:#000000;
> }
> input.button {
> font: bold 12px Arial, Sans-serif;
> height: 24px;
> margin: 0;
> padding: 2px 3px;
> color: #333;
> background: #e7e6e6 url(button.jpg) repeat-x;
> border: 1px solid #dadada;
> }
>
> /* search form */
> .searchform {
> background-color: transparent;
> border: none;
> margin: 0 5px 0 10px; padding: 5px 0 15px 0;
> width: 190px;
> }
> .searchform p { margin: 0; padding: 0; }
> .searchform input.textbox {
> width: 100px;
> color: #777;
> height: 18px;
> padding: 2px;
> border: 1px solid #E5E5E5;
> vertical-align: top;
> }
> .searchform input.button {
> width: 60px;
> height: 24px;
> padding: 2px 5px;
> vertical-align: top;
> }
>
> /********************************************
> LAYOUT
> ********************************************/
> #wrapper {
> margin: 20px auto 0px;
> width: 980px;
> position: relative;
>
> }
> #logo {
> float: left;
> height: 192px;
> width: 234px;
> position: relative;
> }
> #header {
> float: left;
> height: 192px;
> width: 745px;
> position: relative;
> }
> #content {
> width: 695px;
> background: #FFFFFF;
> color: #000000;
> float: right;
> position: relative;
> height: 100%;
> padding: 20px 30px 30px 20px;
> }
> #gallery {
> float: left;
> height: 200px;
> width: 116px;
> position: relative;
> background: url(images/photogallery.jpg) no-repeat;
> padding-top: 72px;
> padding-left: 12px;
> padding-right: 10px;
> }
> #training_photo {
> height: 197px;
> width: 234px;
> background: url(images/training_photo.jpg) no-repeat;
> position: relative;
> clear: left;
> float: left;
> }
> #volunteer {
> float: left;
> height: 170px;
> width: 214px;
> position: relative;
> background: url(images/volunteer.jpg) no-repeat;
> padding-top: 27px;
> padding-left: 20px;
> color: #333333;
> }
> #firetruck {
> float: left;
> height: 197px;
> width: 266px;
> position: relative;
> }
> #training {
> float: left;
> height: 197px;
> width: 245px;
> position: relative;
> }
>
> /* Navigation */
> #nav {
> float: left;
> height: 390px;
> width: 234px;
> background: #333333;
> position: relative;
> }
> #nav ul {
> float: left;
> list-style: none;
> width: 234px;
> padding: 0;
> height: 40px;
> display: inline;
> text-transform: uppercase;
> margin: 0 0 0 0px;
> }
> #nav ul li {
> display: inline;
> margin: 0;
> padding: 0;
> }
> #nav ul li a {
> display: block;
> float: left;
> width: 214px;
> color: #999999;
> text-transform: capitalize;
> text-decoration: none;
> font: normal 13px/38px Georgia, "Times New Roman",
Times, serif;
> margin: 0;
> padding-left: 20px;
> border-bottom: 1px solid #666666;
> }
> #nav ul li a:hover,
> #nav ul li a:active {
> color: #FFFFFF;
> }
> #nav ul li#current a {
> background: #DBDBDB url(nav-current.jpg) repeat-x;
>
> /* footer */
> }
> #footer {
> height: 50px;
> text-align: right;
> padding: 20px 100px 0px 0px;
> color: #FFFFFF;
> font: 11px/1.5em Georgia, "Times New Roman", Times,
serif;
> margin: 0px;
> width: 980px;
> position: relative;
> float: left;
>