Footer Positioning problem

Footer Positioning problem (Full Version)

All Forums >> [Web Development] >> Cascading Style Sheets

Message

Giomanach -> Footer Positioning problem (7/19/2004 16:19:50)

No it's not the same as Peters Problem, but i am having problems with footer positioning. Here's the stylesheet:

html, body { 
 margin: 0; 
 padding: 0; 
 text-align: center;
 background: #FFFFFF; 
 overflow-x: hidden;
}
#pagewidth { 
 width: 100%; 
 text-align: left; 
 min-width: 500px;
 margin-left: auto; 
 margin-right: auto; 
} 
#header { 
 height: 100px; 
 width: 100%; 
 background: #A5D38C; 
}
#miniheader { 
 height: 20px; 
 width: 100%; 
 background: #666666; 
}
#headershadow { 
 height: 20px; 
 width: 100%; 
 background: url(../images/drop.gif) repeat-x; 
}  
#leftcol {
 position: absolute;
 width: 180px; 
 top: 145px; 
 left: 5px;
}
#outer { 
 border:solid white 0px; 
 border-left-width: 180px;
 border-left-color: #FFFFFF;   	/* left column colour */ 
 border-left-style: solid; 
 border-right-width: 180px; 
 border-right-color: #FFFFFF;  	/* right column colour */ 
 border-right-style: solid; 
 background: #FFFFFF; 			/* center column colour */ 
 width: auto; 
 } 
#rightcol {
 position: absolute;
 width: 180px; 
 top: 145px; 
 right: 5px;
} 
#footer {
 position: relative;
 top: 10px;
 height: 50px; 
 width: 100%; 
 background: #A5D38C; 
 border-top: 1px solid #000000;
} 
#btt {
 position: relative;
 top: 10px;
 height: 20px; 
 width: 100%; 
 background: #FFFFFF;
} 
#inner {
 margin: 0;
 width: 100%;
}
#maincol { 
 position: absolute;
 top: 145px;
 left: 180px; 
 right: 185px;
 margin: 0 -8px 0 -2px; 
}
#outer>#inner {
 border-bottom: 1px solid #FFFFFF;
}
.clr {
 clear: both;
}
.content {
 padding: 5px;
 font-family: Verdana, Arial, Helvetica, sans-serif;
} 
#header .content {
 padding-bottom: 0;
}
#headerimage {
 padding-bottom: 5px;
 padding-top: 10px;
}
.footertext {
 font-family: Verdana, Arial, Helvetica, sans-serif;
 padding-left: 5px;
 padding-right: 5px;
 padding-top: 15px;
 font-size: 11px;
 font-weight: bold;
 color: #FFFFFF;
 text-align: center;
}
.btt {
 font-family: Verdana, Arial, Helvetica, sans-serif;
 padding: 5px;
 font-size: 11px;
 font-weight: bold;
 color: #999999;
 text-align: center;
}
.btt a {
 color: #999999;
 text-decoration: underline;
}
.btt a:hover {
 color: #A5D38C;
}

/* ###################### OVERALL SETTINGS ###################### */
td, tr, p, div {
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-size: 11px;
 color: #333333;
}
ul {
 margin: 0px 0px 0px 0px;
}
hr {
 background: #CCCCCC;
 height: 1px;
 width: 100%;
}
/* ############## PATHWAY AND BOTTOM BUTTON BAR ############## */
.pathway {
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-size: 11px;
 color: #CCCCCC;
}
a.pathway:link, a.pathway:visited {
 color: #8CA0B4;
 font-weight: normal;
}
a.pathway:hover {
 color: #F0F0F0;
 font-weight: normal;
}

/* ################### MAIN AND SUB MENU SYSTEM ################### */
a.mainlevel:link, a.mainlevel:visited {
 color: #808080;
 font-weight: normal;
}

a.mainlevel:hover {
 color: #A5D30C;
}

table.moduletable th {
 font-size        : 11px;
  font-weight      : bold;
  color            : #000000;
  text-align       : center;
  background-color : #F0F0F0;
  width            : 100%;
}

table.moduletable { 
margin: 0px 0px 0px 0px; 
width: 95%; 
border-left: solid 0px #000000; 
border-right: solid 0px #000000; 
border-top: solid 0px #000000; 
border-bottom: solid 0px #000000; 
} 

.poll {
  font-family      : Arial, Helvetica, sans-serif;
  font-size        : 10px;
  color            : #666666;
  line-height      : 14px;
}

/* ###################### SECTION LISTING SETTINGS ###################### */
.sectiontableheader {
  background-color : #CCCCCC;
  color            : #779707;
  font-weight      : bold;
}

.sectiontableentry1 {
  background-color : #F0F0F0;
}

.sectiontableentry2 {
  background-color : #E0E0E0;
}

/* ###################### SMALL FONT SETTINGS ###################### */
.small {
  font-family      : Verdana, Arial, Helvetica, sans-serif;
  font-size        : 10px;
  color            : #3366C0;
  text-decoration  : none;
  font-weight      : medium;
}

.smalldark {
  font-family      : Verdana, Arial, Helvetica, sans-serif;
  font-size        : 10px;
  color            : #000000;
  text-decoration  : none;
  font-weight      : normal;
}

/* ###################### CONTENT PAGE SETTINGS ###################### */
.contentpane {
  background       : #FFFFFF;
}

.contentpaneopen {
  background       : #FFFFFF;
}

.contentheading, .componentheading {
  font-family      : Verdana, Arial, Helvetica, sans-serif;
  font-size        : 11px;
  font-weight      : bold;
  color            : #A5D30C;
  text-align       : left;
}

.createdate {
  font-family      : Arial, Helvetica, sans-serif;
  font-size        : 10px;
  color            : #999999;
  text-align       : left;
}

/* ###################### FORMULAR SETTINGS ###################### */
.button {
  font-family      : Verdana, Arial, Helvetica, sans-serif;
  font-style       : normal;
  font-size        : 10px;
  font-weight      : bold;
  background-color : #F0F0F0;
  color            : #000000;
  border           : 1px solid #CCCCCC;
}

.inputbox {
  font-family      : Verdana, Arial, Helvetica, sans-serif;
  font-size        : 10px;
  color            : #000000;
  background-color : #F0F0F0;
  border           : 1px solid #CCCCCC;
}

/* ###################### LINKS ###################### */
a:link, a:visited {
  font-size        : 11px;
  color            : #808080;
  text-decoration  : none;
  font-family      : Verdana, Arial, Helvetica, sans-serif;
}

a:hover {
  color            : #A5D30C;
  text-decoration  : none;
}

a.category:link, a.category:visited {
  color            : #333333;
  font-weight      : bold;
}

a.category:hover {
  color            : #A5D30C;
}

#search{
   position: absolute;
   left: 75%;
   top: 75px;
}

#date{
  position: absolute;
  top: 105px;
  width: 100%;
  text-align: right;
  color: #FFFFFF;
}

Here's the page: http://giomanach.wm-talk.com

Images etc are just temporaries. I'm converting layout from Tables to DIV layers. Any ideas on the problem?

Dan

c1sissy -> RE: Footer Positioning problem (7/19/2004 16:37:16)
in your styles for footer put clear: both; this should take care of your problem.

Giomanach -> RE: Footer Positioning problem (7/19/2004 16:50:12)
Is that with relative or absolute positioning? Doesn't seem to work: #footer { position: relative; top: 0px; height: 50px; width: 100%; background: #A5D38C; border-top: 1px solid #000000; clear: both; } #btt { position: relative; top: 10px; height: 20px; width: 100%; background: #FFFFFF; clear: both; } Dan

c1sissy -> RE: Footer Positioning problem (7/19/2004 17:03:01)
remove relative and see what happens. I'm just curious, I'm not sure if this will work or not. also remove this <?xml version="1.0"?> And if you have not done so, validate. both xhtml and css then see what happens also, remove this as it doesn't seem to make any sense to have a cleared div at the bottom of your page, this could be throwing off the clear both part of the footer div.

Giomanach -> RE: Footer Positioning problem (7/19/2004 17:09:09)
Tried removing the positioning attribute before I cam back...it just chnaged the auto z-index. It dropped both DIV layers to the bottom. Will get back to you in the morning, I need sleep

c1sissy -> RE: Footer Positioning problem (7/19/2004 17:10:35)
I added a few things before your post came up, we posted same time, check my post before yours. Also, z index is for stacking things, I'm not sure you need the z index unless you are doing so. Read a few tutorials on z index so that you have a better understanding of it.

Giomanach -> RE: Footer Positioning problem (7/19/2004 17:16:37)
What I meant by auto z-index is when I have position: relative; in there, you can see the footer on top, when you remove it, it drops down to background level, not down the page Anyhoo....sleepy time Dan PS - must drop you a social call sometime soon[;)]

Donkey -> RE: Footer Positioning problem (7/19/2004 21:57:26)
Hey Dan, You do appear to have the same problem that I had, but I was applying the footer in the wrong place so same effect, different cause.[;)] I'm assuming that everything except the footer is in a container div (pagewidth?) I used that solution and it should work, try adding height:100%; to the container div. Your footer div is in the right position in your layout and it is relatively positioned which is also what I did (for IE - fixed for FF etc) I also had float: left; in the footer div and no top value. The only other thing which could be a problem is the position of your closing </divs> I haven't counted them in your html but as I understand it the footer div should be outside of the container div I notice that you have 3 lose </div>'s below the footer div, try moving one of those above it, that may do the trick.

Giomanach -> RE: Footer Positioning problem (7/20/2004 3:28:30)
Peter The Footer is within the main content DIV, therefore the extra closing tags are necessary. Don't blame me for the XHTML...that's Marks doing. I'm just doing the CSS.[;)] You see we're working on a project between us, more will be shown as the time comes, for now, let's get the CSS sorted. I'll have a play with the DIVs coding later. May just do the trick Cheers Dan

Donkey -> RE: Footer Positioning problem (7/20/2004 3:36:39)
quote: The Footer is within the main content DIV, It might be worth dropping it below the main content div, that works for me.

Giomanach -> RE: Footer Positioning problem (7/20/2004 6:49:45)
That didn't work either, but I now think me knows what the problem is. The top three divs have no positioning, they are just, "there", and the footer(s) are clinging to the bottom of them[&:] Time to assign id's again

c1sissy -> RE: Footer Positioning problem (7/20/2004 7:34:09)
I have to say that I think that donky is on the nose a bit also. Have your footer div as a seperate div. Put your content divs into a container, and have your header as a div. Float things, but don't give positions. Just float left and right and see what happens. If you have a center content div, just leave that as it is. I'm sure that you could go position relative, and add your pixel placement, but most likely you are going to need to use negative positioning if you do this. And read about removing the prolog. That is the most important thing right now.

Giomanach -> RE: Footer Positioning problem (7/20/2004 7:34:48)
This is strange. It refuses to move to the bottom of the DIVs. I have given all DIV layers positions etc, but still no luck. It now sits at the top of the page. I've even put the two footer layers in their own DIV, without positioning at the mo, that's my next task Dan <edit> Double Post! Have removed Prologue and still same problem. All but the footer has absolute positions, does float have the attribute of bottom?No it doesn't bozo Dan </edit>

c1sissy -> RE: Footer Positioning problem (7/20/2004 7:50:35)
Dont use absolute. And dan, please, read some tutorials. I'm serious about it. Look up absolute tutorials and float tutorials and relative tutorials. I think seriously that you don't understand positioning yet. You need a deep understanding of it. Use float and the try float with relative, remove the prolog and keep it off the page, don't add it again. do the divs like I suggested above.

Giomanach -> RE: Footer Positioning problem (7/20/2004 7:55:14)
Can I just make it clear. I didn't do the XHTML, I didn't put the prologue in, the culprit for that is markhawker. I now have all of the content DIVs floated, no positioning, footer is at the bottom of the page, but it's not in the correct layout....

Giomanach -> RE: Footer Positioning problem (7/20/2004 8:07:59)
Sorted, Didn't want to,. but I have used negative figures for relative positioning It works in IE6, but not the rest, I'll tweak it later for that, when i have the browsers in front of me, and not using browsercom.com Dan

c1sissy -> RE: Footer Positioning problem (7/20/2004 8:56:30)
quote: ORIGINAL: Giomanach Sorted, Didn't want to,. but I have used negative figures for relative positioning It works in IE6, but not the rest, I'll tweak it later for that, when i have the browsers in front of me, and not using browsercom.com Dan Dan, negative positioning is recomended for this. Trust me, I have read about it [;)] do the IE conditional statement. Now that you have it working in IE, copy and past the sheet you have now and work on tweaking it. Link the one style sheet with the IE conditional statment, and the one for the other browsers the normal way. I did post the IE conditional statment in here somewhere but if you can't find it let me know and I'll post it, or donkey will post it as he uses it all the time for his pages.

Giomanach -> RE: Footer Positioning problem (7/20/2004 9:02:01)
I'm sure I can find it Deb, may need a kick tho[;)] Can you give Mark a kick on the XHTML/prologue thingy, as you know, I tend to hand code in HTML, not XHTML. He's the prologue kiddy, not me[:D] I would ask M to, be he's AWL Cheers Dan <edit> Found it: http://www.frontpagewebmaster.com/m-194046/tm.htm I remember it 'cos we argued over it using JS or not lol </edit>

c1sissy -> RE: Footer Positioning problem (7/20/2004 9:23:19)
Dan, I use xhtml and I don't use the prolog. It causes problems for some reason. Do a search on the prolog. Even gorilla stated that its not needed a while back when I questioned him on it. I forget what it does, but I know you should not use it all the time and only in certain cases. In this case, I don't think you need it. As far as I know using the conditional statment is no different then using the voice thingie as a hack. You don't need javascript enabled as far as I know to have this work.

Giomanach -> RE: Footer Positioning problem (7/20/2004 9:28:14)
quote: I forget what it does, Forces IE into quirks mode[;)] I really should get back on track with learning XHTML properly, I read all of the w3schools tuts a while back and never took it any further lol. At least I learned something today - always listen to your Mom, she's always right[:D]

Page: [1]

0.09375