footer working in some browsers but not all

pkcidstudio · #1 (**permalink**) 08-23-06, 01:15 PM

my footer is working correctly on a mac in firefox and safarii. but it is not working on pc or opera. any thoughts? here is my css for the footer.

Code:

#footer{
	width:850px;
	height:50px;
	background-color:#CCCCCC;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	color:#990000;
	font-size:10px;
	bottom: 1px;
	position:absolute;
	vertical-align:bottom;
}

and the div that it lies in

Code:

  <div id="footer">
    <p>
      <?php require ("inc/createdBy.php"); ?>
    </p>
  </div>

and the site that you can view what i am talking about.
http://www.midwayaquaticsclub.com/
so on macs in firefox and safarii it is resing at the bottom. but as you will see in others it lies in the middle of the page.
any help is good help or tutorials or articles about this topic. i am sure i am missing one thing.

jfulton · #2 (**permalink**) 08-23-06, 03:59 PM

Did you remove your code? I don't see anything in your source with an id of "footer."

pkcidstudio · #3 (**permalink**) 08-23-06, 04:09 PM

no i am not sure why it doesnt display it. here is the code though

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Midway Aquatics Swim Club</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="description" content="Midway Aquatics Swim Club" />
<meta name="copyright" content="pkcIDstudio05" />
<meta name="keywords" content="Swim Club" />
<LINK REL=stylesheet type="text/css" href="design.css">
<link rel="icon" href="images/icon.gif" type="image/gif" />
</head>
<body>
<div id="contents">
  <div id="header">
    <div align="center"><img src="images/header.jpg" width="476" height="91" alt="header" /> </div>
  </div>
  <div id="sponsers">
    <p>Sponsers</p>
    <br>
    <div align="center">
      <p><a href="http://www.midwayaquaticsclub.com/"><img src="images/sponsers/mwasc.jpg" width="173" height="76" alt="Midway Aquatics Swim Club" border="0" /></a></p>
      <br />
      <p><a href="http://www.kiefer.com/Kiefer/assets/html/homepage.asp?URLCheck=1" target="_blank"><img src="images/sponsers/kiefer.gif" width="200" height="69" alt="Kiefer Swim Club" border="0" /></a></p>
      <br />
      <p><a href="http://www.tyr.com/Merchant2/merchant.mvc" target="_blank"><img src="images/sponsers/tyr.gif" width="120" height="44" alt="TYR" border="0" /></a></p>
      <br />
      <p><a href="http://www.usaswimming.org/usasweb/DesktopDefault.aspx" target="_blank"><img src="images/sponsers/usaSwimming.gif" width="132" height="121" alt="USA Swimming" border="0" /></a></p>
      <br />
      <p><a href="http://www.ucls.uchicago.edu/" target="_blank"><img src="images/sponsers/uoc.gif" width="201" height="172" alt="UofC Lab Schools" border="0" /></a></p>
    </div>
  </div>
  <div id="mainContainer">
    <div align="left"> <img src="images/0806mainNav.jpg" alt="main nav" width="624" height="527" border="0" usemap="#Map" />
      <map name="Map" id="Map">
        <area shape="rect" coords="312,3,376,36" href="meetInfo/meetInfo.php" />
        <area shape="rect" coords="163,27,232,63" href="missionPhilosophy/missionPhilosophy.php" />
        <area shape="rect" coords="453,27,525,62" href="groupDiscriptions/groupDiscriptions.php" />
        <area shape="rect" coords="103,101,166,138" href="timeStandards/timeStandards.php" />
        <area shape="rect" coords="513,103,578,138" href="practiceSchedules/practiceSchedules.php" />
        <area shape="rect" coords="83,205,148,241" href="coaches/coaches.php" />
        <area shape="rect" coords="529,205,601,241" href="registrationInfo/registrationInfo.php" />
        <area shape="rect" coords="103,307,165,343" href="upcomingEvents/upcomingEvents.php" />
        <area shape="rect" coords="510,307,574,343" href="photos/photos.php" />
        <area shape="rect" coords="303,403,366,441" href="records/records.php" />
      </map>
    </div>
  </div>
  <div id="footer">
    <p>
      <?php require ("inc/createdBy.php"); ?>
    </p>
  </div>
</div>
</body>
</html>

jfulton · #4 (**permalink**) 08-23-06, 06:07 PM

Ah, it's working now...

try changing

Code:

	bottom: 0px;

to:

Code:

	top: 800px;

pkcidstudio · #5 (**permalink**) 08-24-06, 09:55 AM

perfect, now will that need to change if my site gets longer though? thankx for the help. any idea if why explorer is finicky like that?
thankx - fulton

jfulton · #6 (**permalink**) 08-24-06, 10:04 AM

Yes, since you're using absolute positioning, you'll need to change the value if the content gets longer. I'm not 100% sure why explorer was doing that...I got it to do it in firefox as well. I think if you use absolute positioning on an element that is a direct child of the body, then it what is initially displayed on the screen as the coordinates (I think all of the rest is considered overflow?) so if you use bottom:0; then it will be aligned at the bottom of what you initially see. That could be way off, but that's what it seems like is going on.

You might want to try redoing the layout using relative positioning or floats so you don't have to adjust the footer manually.

pkcidstudio · #7 (**permalink**) 08-25-06, 09:39 AM

Quote:

Originally Posted by jfulton

You might want to try redoing the layout using relative positioning or floats so you don't have to adjust the footer manually.

thankx for the advise. i will continue to work with it.