Webmaster-Talk.com > Coding Talk > HTML Forum > footer issues! - help please!

Reply
footer issues! - help please!
Old 04-11-2007, 07:06 PM footer issues! - help please!
Novice Talker

Posts: 8
Name: tiffany
Talkupation: tiffany_designs is on a distinguished road
I have this footer on the website pages and it shows up on most of them but it does not on a few of them, i think that the div "testfooter" may be hiding it but i'm not sure how to resolve this problem..

here is the code:
Code:
<div id="testfooter" style="position: absolute; left: 0px; top: 900px; margin-left: -22px;"><DIV id="footer"style="width: 884px;"> - <a href="sitemap.htm">SITE MAP</a> - <a href="about_us.htm">ABOUT US</a> - <a href="contact_us.htm">CONTACT US</a> - <a href="privacy_policy">PRIVACY POLICY</a> - <a href="advertise.htm">ADVERTISE ON CAIRNS UNLIMITED</a> - <a href="travelinsurance.htm">TRAVEL INSURANCE</a> - <a href="hire/index.htm">HOLIDAY EQUIPMENT HIRE</a> -</DIV>
<img src="images/foot.gif" width="920" height="19" border="0"></div>
& here is the portion of the CSS:
Code:
 
#testfooter { position: relative; top: 0px; left: 0px; margin-left: -26px; margin-right: -220px; width: 920px; height: 19px; overflow: visible; }
#footer { margin-left: 18px; width: 884px; background-color: #06A2B9; color: #ffffff; font: bold 11px tahoma; text-align: center; padding-top: 5px; z-index: 8; }
#footer a { color : #ffffff;}
#footer a:hover {color : #131756;}
tiffany_designs is offline
Reply With Quote
View Public Profile
 
When You Register, These Ads Go Away!
     
Old 04-11-2007, 07:25 PM Re: footer issues! - help please!
ADAM Web Design's Avatar
Canadastaninianite

Latest Blog Post:
A Strange Forum Policy: The Boutique Board
Posts: 5,945
Name: Adam for web page design, not program
Location: Toronto, Ontario, Canada
Talkupation: ADAM Web Design has a reputation beyond reputeADAM Web Design has a reputation beyond reputeADAM Web Design has a reputation beyond reputeADAM Web Design has a reputation beyond reputeADAM Web Design has a reputation beyond reputeADAM Web Design has a reputation beyond reputeADAM Web Design has a reputation beyond reputeADAM Web Design has a reputation beyond reputeADAM Web Design has a reputation beyond reputeADAM Web Design has a reputation beyond reputeADAM Web Design has a reputation beyond repute
First off, your absolute position in the HTML code itself will override your CSS settings.

Second, why are you using it? Absolute positioning removes the element in question from your document flow, and if your text + header is larger than 900 pixels high, you'll never see it.

Chances are all that you need is some sort of clearing <br /> (or div if br fails, as it does on occasion) before the footer, remove the absolute positioning and you'll be good to go.
ADAM Web Design is offline
Reply With Quote
View Public Profile Visit ADAM Web Design's homepage!
 
Old 04-11-2007, 09:48 PM Re: footer issues! - help please!
Novice Talker

Posts: 8
Name: tiffany
Talkupation: tiffany_designs is on a distinguished road
Quote:
Originally Posted by ADAM Web Design View Post
First off, your absolute position in the HTML code itself will override your CSS settings.

Second, why are you using it? Absolute positioning removes the element in question from your document flow, and if your text + header is larger than 900 pixels high, you'll never see it.

Chances are all that you need is some sort of clearing <br /> (or div if br fails, as it does on occasion) before the footer, remove the absolute positioning and you'll be good to go.
I accidently posted the footer code on another page, this is the one that i'm using on the page that it doesn't show up on:
Code:
 
<div id="testfooter"><img src="http://www.webmaster-talk.com/images/foot1.gif" width="920" border="0"><DIV id="footer"> - <a href="sitemap.htm">SITE MAP</a> - <a href="about_us.htm">ABOUT US</a> - <a href="contact_us.htm">CONTACT US</a> - <a href="privacy_policy.htm">PRIVACY POLICY</a> - <a href="advertise.htm">ADVERTISE ON CAIRNS UNLIMITED</a> - <a href="travelinsurance.htm">TRAVEL INSURANCE</a> - <a href="hire/index.htm">HOLIDAY EQUIPMENT HIRE</a> -</DIV>
<img src="http://www.webmaster-talk.com/images/foot.gif" width="920" height="19" border="0"></div>
and this is the complete css document:
Code:
 
body { background:#CCCC99 url('background5.gif') repeat-y fixed center 50%; margin:0px; padding:0px; text-align: center; z-index: 1 }
 
#content { position: relative; top: 0px; left: 0px; width: 943px; height: 50%; margin: 0px auto; text-align: justify; padding: 0px; color:#06A2B9; background-image: url('background4.gif'); background-attachment: not-fixed; background-repeat: no-repeat; font-style:normal; font-variant:normal; font-weight:normal; font-size:12px; font-family:arial; z-index: 2; overflow: visible; background-position-y:50%}
 
#testfooter { position: relative; top: 0px; left: 0px; margin-left: -26px; margin-right: -220px; width: 920px; height: 19px; overflow: visible; }
#footer { margin-left: 18px; width: 884px; background-color: #06A2B9; color: #ffffff; font: bold 11px tahoma; text-align: center; padding-top: 5px; z-index: 8; }
#footer a { color : #ffffff;}
#footer a:hover {color : #131756;}
#logo { /* cairnsunlimited logo */ position: absolute; top: 21px; left: 38px; z-index: 10; }
#titletext { /* title text */ position: absolute; top: 16px; left: 187px; width: 525px; font-family: 'Spumoni LP', Times, serif; font-size: 36px; font-weight: 300; color: #FFFFFF; text-align: right; z-index: 9; }
@font-face { font-family: 'Spumoni LP'; font-style: normal; font-weight: normal; src: url(SPUMONI0.eot); }
#intro { /* first introductory sentences */ position: absolute; top: 52px; left: 192px; width: 520px; color: #FFFFFF; font: bold 12px tahoma; text-align: justify; z-index: 9; padding-left: 2px; }
#tabs { position: absolute; top: 129px; left: 188px;}
#boxes { /* AROUND ALL BOXES*/ clear: left; position: absolute; left: 34px; top: 209px; width: 686px; z-index: 4; overflow: visible; }
#directions { /* directions */ clear: left; position: absolute; left: 35px; top: 172px; width: 686px; height: 31px; border: 1px solid #131756; background-color: #FFFFFF; font: 11px arial; color: #3300CC; z-index: 8; text-align: justify; padding: 1px 2px 0px 2px; }
#mediumfirst { /* first main paragraph */ clear: left; position: absolute; left: 35px; top: 205px; width: 686px; height: 432px; border: 1px solid orange; background-color: #FFFFFE; font: 12px arial; color: #000000; z-index: 8; text-align: justify; padding: 1px 2px 0px 2px; margin: 5px 5px 0px 0px; overflow: auto; }
#endlessfirst { /* endless first main paragraph tested on TRAVEL INSURANCE page */ position: absolute; left: 35px; top: 201px; width: 686px; border: 1px solid orange; border-bottom: 0px; background-color: #FFFFFE; font: normal 12px arial; color: #000000; z-index: 8; text-align: justify; padding: 1px 2px 0px 2px; margin: 5px 5px 0px 0px; overflow: visible; }
#endlesssecond { /*  second main paragraph- endless */ position: absolute; left: 35px; top: 644px; width: 686px; border-color: orange; border: 1px solid orange; background-color: #FFFFFE; font: 12px arial; color: #000000; z-index: 8; text-align: justify; padding: 1px 2px 0px 2px; margin: 5px 5px 0px 0px; overflow: visible;}
#third { /* third paragraph in central column- NON scrolling */ position: absolute; left: 35px; top: 890px; width: 876px; border: 1px solid #003C77; background-color: #FFFFFF; font: 12px arial; color: #000000; z-index: 8; text-align: justify; padding: 1px 2px 0px 2px; margin-top: 5px; }
#ad1 { /* advertising space above right column */ position: absolute; top: 22px; left: 726px; width: 185px;} 
#rightcolumn { /* images in right hand column */ position: absolute; top: 172px; left: 721px; width: 193px; background-color: transparent; padding: 0px 3px 10px 3px; z-index: 5; color: #FFFFFF; text-decoration: none; font: normal 12px arial; text-align: center; overflow: hidden; }
#box { /* FIRST BOX*/ width: 225px; height: 220px; border: 1px solid #FFFFFF; background-color: #FFFFFF; font: 12px arial; color: #000000; line-height: 15px; z-index: 8; text-align: justify; padding: 2px 1px 0px 2px; overflow: hidden; }
 
#orange { width: 154px; height: 21px; padding-top: 3px; color :#FFFFFF; line-height: 1.5em; text-decoration: none; vertical-align: bottom; text-align: center; z-index: 1000; background-image: url('http://cairnsunlimited.com/images/orange_2.gif');font-style:normal; font-variant:normal; font-weight:bold; font-size:11px; font-family:tahoma }
* { scrollbar-track-color: #CCCC99; scrollbar-face-color: #6CC0CD; scrollbar-arrow-color: #4276A6; scrollbar-base-color: #4276A6; }
blink { text-decoration: blink; }
H1 { /* test on internet cafe page */  font: bold 12px arial; color: #FFFFFF; background-color: #6CC0CD; text-align: center; padding: 0px 2px 1px 3px; text-transform: uppercase; text-decoration: none; margin-bottom: 2px; margin-top: 1px; }
H1 a:link { color: #FFFFFF; text-decoration: none; }
H1 a:visited { color: #FFFFFE; text-decoration: none; }
H1 a:hover { color: #131756; text-decoration: none; }
H2 { /* test on wineries page */ width: 322px; border: 1px solid #FFFFEE; background-color: #FFFFEE; font: normal 12px arial; color: #000000; z-index: 8; text-align: justify; display: block; padding-left: 2px;}
H3 {   /* block of text on cream background, tested on Cairns Beaches page */  color: #131756; font-size: 12px; font-weight: normal; text-align: justify; background-color: #ffffee; border: 1px solid orange; padding: 6px 4px 4px 4px; margin: 4px 0px 8px 0px; }
H4 {  /* SIMPLE border around text on plain background, tested on Cairns beaches page */  font: normal 12px arial; text-align: justify; border: 1px solid #003C77; padding: 3px; margin: 5px 0px 5px 0px;}
H5 {  /* SIMPLE border around text on WHITE background, tested on DANGERS page */  background-color: #FFFFEE; font: bold 12px arial; color: #003C77; text-align: justify; border: 1px outset #003C77; padding: 0px 4px 1px 4px; margin: 5px 0px 4px 0px; }
H6 {    width: 154px; height: 21px; padding-top: 3px; color: #FFFFFF; line-height: 1.5em; text-decoration: none; vertical-align: bottom; text-align: center; background-image: url('http://cairnsunlimited.com/images/buttons/orange_2.gif');font-style:normal; font-variant:normal; font-weight:bold; font-size:12px; font-family:tahoma}
H6 A { text-decoration: none; color: #ffffff; }
H6 A:hover { text-decoration: none; color: #9999FF; }
#rainbow { /*RAINBOW BORDER tested on gay page */ background-color: pink; border-width: 4px; border-color: orange; border-style: ridge; padding-left: 4px; padding-right: 4px; padding-bottom: 3px; padding-top: 2px; margin-bottom: 4px; margin-top: 5px; margin-left: 3px; margin-right: 3px;}
#friendly { /*GAY FRIENDLY BORDER tested on gay page */ background-color: #FFFFFF; border-width: 4px; border-color: orange; border-style: ridge; padding-left: 4px; padding-right: 4px; padding-bottom: 3px; padding-top: 2px; margin-bottom: 4px; margin-top: 5px; margin-left: 3px; margin-right: 3px;}
a:link { text-decoration: none; }
a:hover { text-decoration: none; }
a:visited { text-decoration: none; }
b { /* links? */ color: #015884; background-color: #FFFFFF; font-weight: bold; text-decoration: none; }
 
/* ----------------------------- SIDEBAR LINKS ---------------------------- */
 
 
#sidebar a {   color : #131756;
  text-decoration : none;
  text-align: left;
   }
#sidebar a:hover {
  color : #131756;
  background-color: yellow;
   }
/* ----------------------------- END SIDEBAR LINKS ---------------------------- */
#orange a:link { color : #FFFFFF;
   }
#orange a:visited { color : #FFFEEE;
   }
#orange a:hover { color : #131756;
   }
 
/* ----------------------------- RIGHT COLUMN LINKS ---------------------------- */
#rightcolumn ul li {
  list-style: none;
  margin-bottom : 5px;
  margin-top : 5px;
   }
#rightcolumn li a {  position: relative; left: -38px; top:0px;
  width: 180px;
  height: 21px;
  display : block;
  padding-top: 2px;
  color : #FFFFFF;
  line-height : 1.5em;
  font-weight : bold;
  text-decoration : none;
  vertical-align: bottom;
  text-align: center;
  background-image: url('http://cairnsunlimited.com/images/buttons/rightcolumn.png');font-style:normal; font-variant:normal; font-size:11px; font-family:tahoma; list-style-type:none
     }
#rightcolumn li a:hover {
  color : #131756;
   }
#rightcolumn a:hover {
  color : #131756;
   }
/* ----------------------------- END RIGHT COLUMN LINKS ---------------------------- */
/* ----------------------------- MENU BELOW ---------------------------- */
 #nav, #nav ul { /* all lists */
  position: absolute; top: 0px; left: 0px;
  margin: 130px 0px 0px 35px;
  padding: 0px;
  list-style: none;
  float : left;
  width : 145px;
  border: 0px;
  z-index: 12;
 }
 
 #nav li { /* all list items */
  position: relative; top: 0px; left: 0px;
  float : left;
  line-height : 1.5em;
  margin: -1px 0px 0px 0px;
  padding: 0px;
  width: 145px;
  border: 0px;
  z-index: 12;
 }
 
 #nav li ul { /* second-level lists */
     position: absolute;
  left: -979em; 
  background-color : #fffffe;
  margin-left : 145px;
  margin-top : -.30em;
  padding: 0px;
  z-index: 12;
 }
#nav li ul li { /* second-level list ITEMS */
  border: 1px solid orange;
  z-index: 12;
  padding: 0px;
 }
 
 #nav li ul ul { /* third-and-above-level lists */
  left: -979em;
  z-index: 12; 
 }
 #nav li a {
  width: 145px;
  display : block;
  color : #06A2B9;
  font-weight: normal;
  text-decoration : none;
  text-align: left;
 
 }
 
 #nav li ul a:hover { color : #ffffee; font-weight: bold; background-color: #06A2B9; }
 
 #nav li:hover ul ul, #nav li:hover ul ul ul, #nav li:hover ul ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul, #nav li.sfhover ul ul ul ul {
 left: -999em;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul, #nav li li li li.sfhover ul {
 left: auto;
}
 
 
/* ------------------------ MY STUFF ---------------------------- */
#nav li ul ul ul img { /* third (now fourth)-and-above-level IMAGES */
  left: -5px ;
  width: 300px ;
  background-color: #000000 ;
  border: 5px solid #FFFFFF ;
  z-index: 12 ;
 }
menu { text-align: left; }
/*---------------------------------- END OF MY STUFF ----------------------------------------------------------*/
/*---------------------------------- END OF MENU ----------------------------------------------------------*/
this is the link to the actual web page:
http://cairnsunlimited.com/links.htm

i tried the <br /> but it didn't do anything.
Last edited by tiffany_designs : 04-11-2007 at 09:56 PM.
tiffany_designs is offline
Reply With Quote
View Public Profile
 
Old 04-12-2007, 10:20 AM Re: footer issues! - help please!
ADAM Web Design's Avatar
Canadastaninianite

Latest Blog Post:
A Strange Forum Policy: The Boutique Board
Posts: 5,945
Name: Adam for web page design, not program
Location: Toronto, Ontario, Canada
Talkupation: ADAM Web Design has a reputation beyond reputeADAM Web Design has a reputation beyond reputeADAM Web Design has a reputation beyond reputeADAM Web Design has a reputation beyond reputeADAM Web Design has a reputation beyond reputeADAM Web Design has a reputation beyond reputeADAM Web Design has a reputation beyond reputeADAM Web Design has a reputation beyond reputeADAM Web Design has a reputation beyond reputeADAM Web Design has a reputation beyond reputeADAM Web Design has a reputation beyond repute
You didn't quite use it the way I meant for you to, but it's a moot point anyway.

Simply stated, you've got errors and a bunch of 'em. That's your problem. Your footer is quite possibly a side effect of one of these errors:

http://validator.w3.org/check?uri=http%3A%2F%2Fcairnsunlimited.com%2Flinks .htm
ADAM Web Design is offline
Reply With Quote
View Public Profile Visit ADAM Web Design's homepage!
 
Old 04-12-2007, 03:07 PM Re: footer issues! - help please!
LadynRed's Avatar
Super Moderator

Posts: 6,030
Location: Tennessee
Talkupation: LadynRed has a reputation beyond reputeLadynRed has a reputation beyond reputeLadynRed has a reputation beyond reputeLadynRed has a reputation beyond reputeLadynRed has a reputation beyond reputeLadynRed has a reputation beyond reputeLadynRed has a reputation beyond reputeLadynRed has a reputation beyond reputeLadynRed has a reputation beyond reputeLadynRed has a reputation beyond reputeLadynRed has a reputation beyond repute
Get rid of ALL of the position:absolute on the main parts of your layout and you'll not only have a better layout, but you'll have an easier time of solving your problem. Bottom line, there's simply no reason for absolutely positioning everything - not even your popup descriptions.

I would suggest the following:
http://css-discuss.incutio.com/?page=FloatLayouts
http://www.themaninblue.com/writing/...ve/2005/08/29/
http://psacake.com/web/jl.asp - pure css popups
http://www.positioniseverything.net/explorer.html

I would also ditch all that javascript, which you can do by using the pure CSS popups method and a fairly simple CSS List with on -hover behavior.
__________________
Web Goddess & Web Standards Evangelist :) - Tables Be Gone !!
"Using or working with IE is like having to wear a 1970's polyester suit with pantyhose and a girdle, to work everyday"
Carolina Corvette Club
LadynRed is offline
Reply With Quote
View Public Profile
 
Reply     « Reply to footer issues! - help please!
 
Previous Thread | Next Thread Webmaster-Talk.com > Coding Talk > HTML Forum > footer issues! - help please!

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
vB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are Off
Pingbacks are Off
Refbacks are Off


Webmaster Resources Marketplace:
Software Development Company | Webhosting.UK.com
Web Templates | Text Link Brokers | Stock Photos


   
RSS Feed  Feeds: RSS   JS   XML
RSS Feed  Feeds for this forum: RSS   JS   XML

 


Page generated in 0.14619 seconds with 13 queries