How does one make an image on top of everything?

[jakeatkins via WebmasterKB.com]

I'm trying to make an image that will cover all page content that scrolls
under it stay at the top of the browser window, all within one frame, even
while scrolling,. I've tried various combinations of float, position:fixed,
absolute,relative, etc. and can't seem to figure it out. The image always
stays "tacked" to the specific top left corner, and doesn't move with the
scrolling window... any sample code please?

I'm trying to make the apperance of text fading out of the top while
scrolling, by using a gradual transparent image always at the top of the
window. (I also want to do this at the bottom, but that might be harder).

Thanks!

 

[Gwin]

I'm trying to make an image that will cover all page content that
scrolls under it stay at the top of the browser window, all within
one frame, even while scrolling,. I've tried various combinations of
float, position:fixed, absolute,relative, etc. and can't seem to
figure it out. The image always stays "tacked" to the specific top
left corner, and doesn't move with the scrolling window... any sample
code please?

I'm trying to make the apperance of text fading out of the top while
scrolling, by using a gradual transparent image always at the top of
the window. (I also want to do this at the bottom, but that might be
harder).

Thanks!

style it in the css
z-index:"value"

 

[jakeatkins via WebmasterKB.com]

I'm trying to make an image that will cover all page content that
scrolls under it stay at the top of the browser window, all within

[quoted text clipped - 10 lines]

Thanks!

style it in the css
z-index:"value"

Awesome, I notice using position:fixed doesn't work in IE6, but it does in
safari. Any smart way of doing the same thing but for the bottom of the page,
no matter what the size of browser window, having it stick on the bottom?
Here's the code I used for the top:

<img src="smred.gif" border="0"
style="position:fixed;
left:0px;
top:0px;
z-index:2;">

 

[Gwin]

I'm trying to make an image that will cover all page content that
scrolls under it stay at the top of the browser window, all within

[quoted text clipped - 10 lines]

Thanks!

style it in the css
z-index:"value"

Awesome, I notice using position:fixed doesn't work in IE6, but it
does in safari. Any smart way of doing the same thing but for the
bottom of the page, no matter what the size of browser window, having
it stick on the bottom? Here's the code I used for the top:

<img src="smred.gif" border="0"
style="position:fixed;
left:0px;
top:0px;
z-index:2;">

nope
ie7 will
ie6 won't and there's really no workaround i know of

try this
html {height:100%; min-height: 100%;widith: 100%;}
body {height: 100%; min-height: 100%; widith: 100%; text-align: center;}

div#footer {height:100%; min-height:100%; width:100%; bottom:0;
padding-bottom:2%; position:absolute; left:0;}

 

[Ed Mullen]

I'm trying to make an image that will cover all page content that
scrolls under it stay at the top of the browser window, all within
[quoted text clipped - 10 lines]
Thanks!
style it in the css
z-index:"value"

Awesome, I notice using position:fixed doesn't work in IE6, but it
does in safari. Any smart way of doing the same thing but for the
bottom of the page, no matter what the size of browser window, having
it stick on the bottom? Here's the code I used for the top:

<img src="smred.gif" border="0"
style="position:fixed;
left:0px;
top:0px;
z-index:2;">

nope
ie7 will
ie6 won't and there's really no workaround i know of

try this
html {height:100%; min-height: 100%;widith: 100%;}
body {height: 100%; min-height: 100%; widith: 100%; text-align: center;}

div#footer {height:100%; min-height:100%; width:100%; bottom:0;
padding-bottom:2%; position:absolute; left:0;}

About the only one can do is sniff out the UA and serve up a separate
style sheet for IE6 and tailor the presentation to account for IE6 not
respecting fixed positioning of the header.

--
Ed Mullen
http://edmullen.net
http://mozilla.edmullen.net
http://abington.edmullen.net
If 7-11 stores are open 24 hours/7-days a week, why do they have locks
on the front door?

 

[Gwin]

Gwin wrote:
I'm trying to make an image that will cover all page content that
scrolls under it stay at the top of the browser window, all within
[quoted text clipped - 10 lines]
Thanks!
style it in the css
z-index:"value"

Awesome, I notice using position:fixed doesn't work in IE6, but it
does in safari. Any smart way of doing the same thing but for the
bottom of the page, no matter what the size of browser window,
having it stick on the bottom? Here's the code I used for the top:

<img src="smred.gif" border="0"
style="position:fixed;
left:0px;
top:0px;
z-index:2;">

nope
ie7 will
ie6 won't and there's really no workaround i know of

try this
html {height:100%; min-height: 100%;widith: 100%;}
body {height: 100%; min-height: 100%; widith: 100%; text-align:
center;} div#footer {height:100%; min-height:100%; width:100%; bottom:0;
padding-bottom:2%; position:absolute; left:0;}

About the only one can do is sniff out the UA and serve up a separate
style sheet for IE6 and tailor the presentation to account for IE6 not
respecting fixed positioning of the header.

<!--[if IE 6]><link rel="stylesheet" type="text/css" href="IE6styles.css"
/><![endif]-->

 

[jakeatkins via WebmasterKB.com]

[quoted text clipped - 27 lines]

style sheet for IE6 and tailor the presentation to account for IE6 not
respecting fixed positioning of the header.

<!--[if IE 6]><link rel="stylesheet" type="text/css" href="IE6styles.css"
/><![endif]-->

How can I test for ANY IE browser, then have a different style.css file. I
seem to be having problems with a horizontal scrollbar. I have the code:

html { overflow-x: hidden; overflow:scroll; }

in the style sheet. this works well in IE, but for FF and Safari, it inserts
a blank horizontal scrollbar. If I remove the overflow:scroll; then IE
browsers won't scroll with the mousewheel, only by dragging the scrollbar.
So I'd like to test for IE browser, then go to the code above, otherwise,
leave out the overflow:scroll;

What's the simplest way of doing this?

 

[Gwin]

I'm trying to make an image that will cover all page content
that scrolls under it stay at the top of the browser window,
all within

[quoted text clipped - 27 lines]

style sheet for IE6 and tailor the presentation to account for IE6
not respecting fixed positioning of the header.

<!--[if IE 6]><link rel="stylesheet" type="text/css"
href="IE6styles.css" /><![endif]-->

How can I test for ANY IE browser, then have a different style.css
file. I seem to be having problems with a horizontal scrollbar. I
have the code:

html { overflow-x: hidden; overflow:scroll; }

in the style sheet. this works well in IE, but for FF and Safari, it
inserts a blank horizontal scrollbar. If I remove the
overflow:scroll; then IE browsers won't scroll with the mousewheel,
only by dragging the scrollbar. So I'd like to test for IE browser,
then go to the code above, otherwise, leave out the overflow:scroll;

What's the simplest way of doing this?

overkill on useragent sniffing
why are you having to deal with a horizontal scrollbar anyhoo?
won't fit fluid?

 

[jakeatkins via WebmasterKB.com]

[quoted text clipped - 19 lines]

What's the simplest way of doing this?

overkill on useragent sniffing
why are you having to deal with a horizontal scrollbar anyhoo?
won't fit fluid?

I don't know why I should be having to deal with it either. IE won't fit it
fluid without the html styles.css. It keeps adding a horizontal scrollbar
with a small amount of moving for no reason. Check out
www.scribalmusings.com in various browsers! Currently the style.css is set
to:

html { overflow-x:hidden; overflow:scroll;}

IE likes this, but now others don't. Any help is greatly appreciated, it's
driving me nuts!

 

[John Hosking]

Gwin wrote:

<!--[if IE 6]><link rel="stylesheet" type="text/css" href="IE6styles.css"
/><![endif]-->

How can I test for ANY IE browser, then have a different style.css file.

<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="IEstyles.css" />
<![endif]-->

See, among others, http://www.quirksmode.org/css/condcom.html
Or http://www.positioniseverything.net/articles/cc-plus.html
Or even http://msdn2.microsoft.com/en-us/library/ms537512.aspx

html { overflow-x: hidden; overflow:scroll; }

Why not just html { overflow-x:scroll; } ?

Or even html { } ?

What's the simplest way of doing this?

See above.

 

[Gwin]

I'm trying to make an image that will cover all page content
that scrolls under it stay at the top of the browser window,

[quoted text clipped - 19 lines]

What's the simplest way of doing this?

overkill on useragent sniffing
why are you having to deal with a horizontal scrollbar anyhoo?
won't fit fluid?

I don't know why I should be having to deal with it either. IE won't
fit it fluid without the html styles.css. It keeps adding a
horizontal scrollbar with a small amount of moving for no reason.
Check out www.scribalmusings.com in various browsers! Currently the
style.css is set to:

html { overflow-x:hidden; overflow:scroll;}

IE likes this, but now others don't. Any help is greatly
appreciated, it's driving me nuts!

that's an iframe?

 

[Ben C]

I'm trying to make an image that will cover all page content
that scrolls under it stay at the top of the browser window,

[quoted text clipped - 19 lines]

What's the simplest way of doing this?

overkill on useragent sniffing
why are you having to deal with a horizontal scrollbar anyhoo?
won't fit fluid?

I don't know why I should be having to deal with it either. IE won't fit it
fluid without the html styles.css. It keeps adding a horizontal scrollbar
with a small amount of moving for no reason. Check out
www.scribalmusings.com in various browsers! Currently the style.css is set
to:

html { overflow-x:hidden; overflow:scroll;}

IE likes this, but now others don't. Any help is greatly appreciated, it's
driving me nuts!

overflow-x is a non-standard IE property (suggested for CSS3 I think).

 

[jakeatkins via WebmasterKB.com]

Or even html { } ?

Beautiful, I have no idea what this actually does, but it makes Safari,
Firefox, and IE 7 look good (I hope IE 6 too, I can't test that where I am
right now). Thanks tons!

 

[Neredbojias]

Well bust mah britches and call me cheeky, on Fri, 27 Jul 2007 21:16:40
GMT jakeatkins via WebmasterKB.com scribed:

Beautiful, I have no idea what this actually does, but it makes
Safari, Firefox, and IE 7 look good (I hope IE 6 too, I can't test
that where I am right now). Thanks tons!

The real Big Jake would be mortified.

 

[jakeatkins via WebmasterKB.com]

The real Big Jake would be mortified.

Well, maybe someone wants to explain why a blank style html{ } does anything
at all?

 

[Neredbojias]

Well bust mah britches and call me cheeky, on Mon, 30 Jul 2007 17:07:14
GMT jakeatkins via WebmasterKB.com scribed:

Well, maybe someone wants to explain why a blank style html{ } does
anything at all?

Well, I can't, but my name is Neredbojias and the clan is known for its
inexplicability.

(Probably just one of the many ie "vagueries", but other browsers have
bugs, too. Without trying it myself, though, it's like a visitor here
asking a question without providing a url.)