[css-d] footer floating up

2005-06-07 Thread Eric Vann 
I took a brief look at your site. I think I know the cause of your
problem. I use Adobe GoLive so will try and explain the problem in the
terms used by those familiar with that product.

Normally your footer is the last DIV inside the container you have chosen
to enclose the contents of your page. In order to get it to appear below
everything else all you need to do is have it CLEAR any other DIVs that
may have entered the text stream above it.

In this instance you have given the footer DIV a specific position as
shown here:

/* footer */
#footer {
font-family:Arial, Helvetica, sans-serif;
color:#33;
font-size:0.8em;
border-top-width: 1px;
border-top-style: dotted;
border-top-color: #33;
padding: 5px 0px 10px 5px;
position:absolute;
bottom:0px;
left:145px;
width:690px;
}

The moment you use the left and bottom positioning designations your DIV
is no longer moving with the rest of the text stream. This is how I would
have written that style:

#footer   {
color: #33;
font-size: 0.8em;
font-family: Arial, Helvetica, sans-serif;
padding: 5px 0 10px 150px;
position: absolute;
width: 690px;
clear: both;
border-top: 1px dotted #33
}

I had to adjust the left padding to push the text back under the right
column.

 -- 
+-+
| Eric Geoffrey Vann, Webmaster Glenbard Township HS District #87 |
| VOICE:  630.942.7722 596 Crescent Boulevard |
| EMAIL:  [EMAIL PROTECTED]Glen Ellyn, IL 60137-4297 |
| WEB:http://www.glenbard.net/|
+-+
"It is our choices that show what we truly are, far more than our
abilities"
  ~ Dumbledore, Harry Potter and the Chamber of Secrets

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

RE: [css-d] footer floating up -- FIXED

2005-06-07 Thread Stephanie Bridges 

> Stephanie Bridges wrote:
> 
>> The behavior only occurs in Firefox (I'm using 1.0.4). I could
>> reproduce it in IE for a while, but the addition of the  at the
>> end of the content seems to have gotten rid of it there.
>> Once it drops down, it stays there.
>> To see it again, clear the browser cache and visit the page again.
>> [...] 
>> 
>
http://www.econ.iastate.edu/programs/undergrad/agbiz/LearningCommunity/socia
l.asp
> 

Thanks much to Bruno -- this is now working.  He pointed out that I need to
specify *both* the height and width of the images so the browser can figure
out where to put the text.

I think I fell victim to my quest to keep presentation separate from content
(that and a case of non-functional brain cells) -- I specified height and
width both in the html and now the footer is staying where it belongs.

~~~
Stephanie Bridges
Economics Department -- Iowa State University
80B Heady Hall, Ames, IA  50011
ph: 515.294.8732 ~~ fax: 515.294.0221
[EMAIL PROTECTED]


__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

RE: [css-d] footer floating up

2005-06-06 Thread Stephanie Bridges 
On Friday, June 03, 2005 6:19 PM, Bruno Fassino  
wrote:


> Stephanie Bridges wrote:
> 
>> The behavior only occurs in Firefox (I'm using 1.0.4). I could
>> reproduce it in IE for a while, but the addition of the  at the
>> end of the content seems to have gotten rid of it there.
>> Once it drops down, it stays there.
>> To see it again, clear the browser cache and visit the page again.
>> [...] 
>> 
>
http://www.econ.iastate.edu/programs/undergrad/agbiz/LearningCommunity/socia
l.asp
> 
> I could reproduce something similar (both in FF and in IE),
> not sure if it is exactly what you are seeing.  My guess is the
> following: The content is initially displayed without the images
> (before they are completely received by the browser.)  The browser
> doesn't yet know the size of the images, so can't reserve
> space for them, and the page is temporary shorter. The footer
> is placed at the end of that content.
> As soon as the images are fully received they are displayed,
> the text is reflowed around them, the page becomes longer,
> and the footer should be moved down accordingly.  This
> doesn't always happen. In some cases the footer stay higher.
> If this is really the cause, you can solve the problem
> specifying the size of your images in the HTML (or, maybe, in the
> CSS.) 
> 
> hth,
> Bruno

Thanks for the excellent suggestion, however it doesn't seem to be working
(I have tried both specifying the height in the CSS and in the HTML). It
makes good sense, just wish it worked.

I posted a screenshot at
http://sbridges2.econ.iastate.edu/~sbridges/screenshot.jpg that shows what I
see in FF.  FWIW, I can no longer reproduce it in IE, Opera or Mozilla 1.8b2
(buildID 2005051905) on WinXP.  It looks like the screenshot in both Firefox
and Mozilla on Linux, so maybe it is somethat that got fixed with the newer
moz builds.

I think at some point I need to revisit my layout in general.

~~~
Stephanie Bridges
Economics Department -- Iowa State University
80B Heady Hall, Ames, IA  50011
ph: 515.294.8732 ~~ fax: 515.294.0221
[EMAIL PROTECTED]


__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] footer floating up

2005-06-03 Thread Michael Rainey 
Just off the top of my head, try clearing the 'container' div if you 
haven't already done so.


--

Michael Rainey
*Email*: [EMAIL PROTECTED]
*Blog:* http://headcase.dyndns.org/

/*'If we are going to teach creation science as an alternative to 
evolution, then we should also teach the stork theory as an alternative 
to biological reproduction.'* - Judith Hayes/

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

RE: [css-d] footer floating up

2005-06-03 Thread Bruno Fassino 
Stephanie Bridges wrote:

> The behavior only occurs in Firefox (I'm using 1.0.4). I could
> reproduce it in IE for a while, but the addition of the
>  at the end of the content seems to have gotten rid of it there.
> Once it drops down, it stays there.
> To see it again, clear the browser cache and visit the page again.
[...]
>
http://www.econ.iastate.edu/programs/undergrad/agbiz/LearningCommunity/socia
l.asp

I could reproduce something similar (both in FF and in IE), not sure if it
is exactly what you are seeing.  My guess is the following:
The content is initially displayed without the images (before they are
completely received by the browser.)  The browser doesn't yet know the size
of the images, so can't reserve space for them, and the page is temporary
shorter. The footer is placed at the end of that content.
As soon as the images are fully received they are displayed, the text is
reflowed around them, the page becomes longer, and the footer should be
moved down accordingly.  This doesn't always happen. In some cases the
footer stay higher.
If this is really the cause, you can solve the problem specifying the size
of your images in the HTML (or, maybe, in the CSS.)

hth,
Bruno

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] footer floating up

2005-06-03 Thread dwain 

Stephanie Bridges wrote:


I can only get the behavior to reproduce in Firefox.  I have changed the
code on the social page [1] to contain each of the paragraphs with a
right-floated image to be wrapped inside a div with class clearfix, but
still no luck.


the floating footer on the isu index page is at the bottom now in ff 
1.0.4 w2k sp4; and i didn't even have to refresh the page to make it go 
to the bottom, it came up that way.


dwain


--
Dwain Alford
http://www.alforddesigngroup.com
web hosting: http://www.1and1.com/?k_id=7653741
http://www.spreadfirefox.com/?q=affiliates&id=0&t=1/

"The artist may use any form which his expression demands;
for his inner impulse must find suitable expression."
Wassily Kandinsky, "Concerning The Spiritual In Art"


---
avast! Antivirus: Outbound message clean.
Virus Database (VPS): 0522-6, 06/01/2005
Tested on: 6/3/2005 3:42:25 PM
avast! - copyright (c) 1988-2005 ALWIL Software.
http://www.avast.com



__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

RE: [css-d] footer floating up

2005-06-03 Thread Stephanie Bridges 
 
Dwain Alford wrote:
> 
> Stephanie Bridges wrote:
> 
> > The behavior only occurs in Firefox (I'm using 1.0.4). I could 
> > reproduce it in IE for a while, but the addition of the  at the 
> > end of the content seems to have gotten rid of it there.  
> Once it drops down, it stays there.
> > To see it again, clear the browser cache and visit the page again.
> 
> could it be that your clearfix rules are incomplete?  you seem to be
> missing: .clearfix {display: block;} in the hide from mac section.
> 
> try that and see if that doesn't help.
> 
> dwain
> 

Thanks for pointing that out -- I copied the wrong section.  But, that
doesn't make any difference -- one of the pages didn't even have that class
anywhere on the page, I was using a  with a class that had a clear:
both.  

I can only get the behavior to reproduce in Firefox.  I have changed the
code on the social page [1] to contain each of the paragraphs with a
right-floated image to be wrapped inside a div with class clearfix, but
still no luck.


[1]
http://www.econ.iastate.edu/programs/undergrad/agbiz/LearningCommunity/socia
l.asp

~~~
Stephanie Bridges
Economics Department -- Iowa State University
80B Heady Hall, Ames, IA  50011
ph: 515.294.8732 ~~ fax: 515.294.0221
[EMAIL PROTECTED]
 

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] footer floating up

2005-06-03 Thread dwain 

Stephanie Bridges wrote:


The behavior only occurs in Firefox (I'm using 1.0.4). I could reproduce it
in IE for a while, but the addition of the  at the end of the content
seems to have gotten rid of it there.  Once it drops down, it stays there.
To see it again, clear the browser cache and visit the page again.


could it be that your clearfix rules are incomplete?  you seem to be 
missing: .clearfix {display: block;} in the hide from mac section.


try that and see if that doesn't help.

dwain

--
Dwain Alford
http://www.alforddesigngroup.com
web hosting: http://www.1and1.com/?k_id=7653741
http://www.spreadfirefox.com/?q=affiliates&id=0&t=1/

"The artist may use any form which his expression demands;
for his inner impulse must find suitable expression."
Wassily Kandinsky, "Concerning The Spiritual In Art"


---
avast! Antivirus: Outbound message clean.
Virus Database (VPS): 0522-6, 06/01/2005
Tested on: 6/3/2005 11:09:41 AM
avast! - copyright (c) 1988-2005 ALWIL Software.
http://www.avast.com



__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] footer floating up

2005-06-03 Thread Stephanie Bridges 
Hello all,

I hope someone can point me in the right direction here, I am having a most
vexing problem with my footer on a few pages.

See
http://www.econ.iastate.edu/programs/undergrad/agbiz/LearningCommunity/socia
l.asp for an example -- CSS is at http://www.econ.iastate.edu/econMain.css.
Pages and CSS both validate.

The footer is supposed to be at either the bottom of the content or the
bottom of the browser viewport if the content is shorter than the viewport.
Normally I have no problems with this.  However, in the above page (and in
the Peer Mentor link as well) the footer will show up somewhere above the
end of the content.  Refreshing the pages drops the footer down to its
proper location.  I have tried various combination of clearing without luck.


The behavior only occurs in Firefox (I'm using 1.0.4). I could reproduce it
in IE for a while, but the addition of the  at the end of the content
seems to have gotten rid of it there.  Once it drops down, it stays there.
To see it again, clear the browser cache and visit the page again.
 
~~~
Stephanie Bridges
Economics Department -- Iowa State University
80B Heady Hall, Ames, IA  50011
ph: 515.294.8732 ~~ fax: 515.294.0221
[EMAIL PROTECTED]
 

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/