By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
440,886 Members | 1,123 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 440,886 IT Pros & Developers. It's quick & easy.

Cross-Browser Element Bottom Position

P: n/a
I have no perfect cross-browser solution to position html element on
the bottom of the page.
I know that with Firefox I do it as:
position:fixed; bottom:0px;
However, IE does not understand that. Did anyone come across this
issue to share with me?
Thanks you

May 4 '07 #1
Share this Question
Share on Google+
5 Replies


P: n/a
vu******@gmail.com wrote:
I have no perfect cross-browser solution to position html element on
the bottom of the page.
I know that with Firefox I do it as:
position:fixed; bottom:0px;
However, IE does not understand that. Did anyone come across this
issue to share with me?
Yeah, Internet Explorer does not support that particular CSS declaration.

I imagine you could position the element taking into consideration its
height (and width if necessary), and the canvas height.

If the canvas is 600px tall, and your element is 100px tall, then
placement at 500px down (top: 500px;) would place it at the bottom.

http://jibbering.com/faq/#FAQ4_9

--
-Lost
Remove the extra words to reply by e-mail. Don't e-mail me. I am
kidding. No I am not.
May 4 '07 #2

P: n/a
On May 4, 10:08 am, -Lost <maventheextrawo...@techie.comwrote:
vunet...@gmail.com wrote:
I have no perfect cross-browser solution to position html element on
the bottom of the page.
I know that with Firefox I do it as:
position:fixed; bottom:0px;
However, IE does not understand that. Did anyone come across this
issue to share with me?

Yeah, Internet Explorer does not support that particular CSS declaration.

I imagine you could position the element taking into consideration its
height (and width if necessary), and the canvas height.

If the canvas is 600px tall, and your element is 100px tall, then
placement at 500px down (top: 500px;) would place it at the bottom.

http://jibbering.com/faq/#FAQ4_9

--
-Lost
Remove the extra words to reply by e-mail. Don't e-mail me. I am
kidding. No I am not.
yes, that could be a way to handle.
a great way to handle top positioning in IE is to use this in CSS:
top:expression(this.offsetParent.scrollTop)
position:absolute;
i wish i could have something easy as that for bottom positioning

May 4 '07 #3

P: n/a
On May 4, 8:34 am, vunet...@gmail.com wrote:
yes, that could be a way to handle.
a great way to handle top positioning in IE is to use this in CSS:
top:expression(this.offsetParent.scrollTop)
position:absolute;
i wish i could have something easy as that for bottom positioning
position:absolite;
top:expression(document.body.offsetHeight-this.offsetHeight)

May 4 '07 #4

P: n/a
On May 4, 2:26 pm, "scripts.contact" <scripts.cont...@gmail.com>
wrote:
On May 4, 8:34 am, vunet...@gmail.com wrote:
yes, that could be a way to handle.
a great way to handle top positioning in IE is to use this in CSS:
top:expression(this.offsetParent.scrollTop)
position:absolute;
i wish i could have something easy as that for bottom positioning

position:absolite;
top:expression(document.body.offsetHeight-this.offsetHeight)
does not work in my IE7.

but here is what I found for mozilla-based browsers:
body div#myDiv{
/* used by Opera 5+, Netscape6+/Mozilla, Konqueror, Safari, OmniWeb
4.5+, iCab, ICEbrowser */
position: fixed;
}

May 4 '07 #5

P: n/a
On May 4, 4:07 pm, vunet...@gmail.com wrote:
On May 4, 2:26 pm, "scripts.contact" <scripts.cont...@gmail.com>
wrote:
On May 4, 8:34 am, vunet...@gmail.com wrote:
yes, that could be a way to handle.
a great way to handle top positioning in IE is to use this in CSS:
top:expression(this.offsetParent.scrollTop)
position:absolute;
i wish i could have something easy as that for bottom positioning
position:absolite;
top:expression(document.body.offsetHeight-this.offsetHeight)

does not work in my IE7.

but here is what I found for mozilla-based browsers:
body div#myDiv{
/* used by Opera 5+, Netscape6+/Mozilla, Konqueror, Safari, OmniWeb
4.5+, iCab, ICEbrowser */
position: fixed;

}
<style type="text/css">
#fixme {
/* Netscape 4, IE 4.x-5.0/Win and other lesser browsers will use
this */
position: absolute; right: 20px; bottom: 10px;
}
body div#fixme {
/* used by Opera 5+, Netscape6+/Mozilla, Konqueror, Safari, OmniWeb
4.5+, iCab, ICEbrowser */
position: fixed;
}
</style>
<!--[if gte IE 5.5]>
<![if lt IE 7]>
<style type="text/css">
div#fixme {
/* IE5.5+/Win - this is more specific than the IE 5.0 version */
right: auto; bottom: auto;
left: expression( ( -20 - fixme.offsetWidth +
( document.documentElement.clientWidth ?
document.documentElement.clientWidth : document.body.clientWidth ) +
( ignoreMe2 = document.documentElement.scrollLeft ?
document.documentElement.scrollLeft : document.body.scrollLeft ) ) +
'px' );
top: expression( ( -10 - fixme.offsetHeight +
( document.documentElement.clientHeight ?
document.documentElement.clientHeight : document.body.clientHeight ) +
( ignoreMe = document.documentElement.scrollTop ?
document.documentElement.scrollTop : document.body.scrollTop ) ) +
'px' );
}
</style>
<![endif]>
<![endif]-->

May 4 '07 #6

This discussion thread is closed

Replies have been disabled for this discussion.