How does one make an image on top of everything?

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!

--
Message posted via WebmasterKB.com
http://www.webmasterkb.com/Uwe/Forums.aspx/html-dev/200707/1

Re: How does one make an image on top of everything?

jakeatkins via WebmasterKB.com 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
> 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"

Re: How does one make an image on top of everything?

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:

style="position:fixed;
left:0px;
top:0px;
z-index:2;">

--
Message posted via WebmasterKB.com
http://www.webmasterkb.com/Uwe/Forums.aspx/html-dev/200707/1

Re: How does one make an image on top of everything?

jakeatkins via WebmasterKB.com wrote:
> 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:
>
> > 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;}

Re: How does one make an image on top of everything?

Gwin wrote:
> jakeatkins via WebmasterKB.com wrote:
>> 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:
>>
>> >> 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?

Re: How does one make an image on top of everything?

Ed Mullen wrote:
> Gwin wrote:
>> jakeatkins via WebmasterKB.com wrote:
>>> 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:
>>>
>>> >>> 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.

Re: How does one make an image on top of everything?

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 - 27 lines]
>> style sheet for IE6 and tailor the presentation to account for IE6 not
>> respecting fixed positioning of the header.
>
>

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?

--
Message posted via WebmasterKB.com
http://www.webmasterkb.com/Uwe/Forums.aspx/html-dev/200707/1

Re: How does one make an image on top of everything?

jakeatkins via WebmasterKB.com wrote:
> 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 - 27 lines]
>>> style sheet for IE6 and tailor the presentation to account for IE6
>>> not respecting fixed positioning of the header.
>>
>>
>
> 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?

Re: How does one make an image on top of everything?

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,
>[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!

--
Message posted via WebmasterKB.com
http://www.webmasterkb.com/Uwe/Forums.aspx/html-dev/200707/1

Re: How does one make an image on top of everything?

jakeatkins via WebmasterKB.com wrote:
> Gwin wrote:

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



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.

--
John
Pondering the value of the UIP: http://blinkynet.net/comp/uip5.html

Re: How does one make an image on top of everything?

jakeatkins via WebmasterKB.com wrote:
> 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,
>> [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?

Re: How does one make an image on top of everything?

On 2007-07-27, jakeatkins via WebmasterKB.com wrote:
> 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,
>>[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).

Re: How does one make an image on top of everything?

John Hosking wrote:
>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!

--
Message posted via http://www.webmasterkb.com

Re: How does one make an image on top of everything?

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

> John Hosking wrote:
>>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!

The real Big Jake would be mortified.

--
Neredbojias
Half lies are worth twice as much as whole lies.

Re: How does one make an image on top of everything?

Neredbojias wrote:
>The real Big Jake would be mortified.

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

--
Message posted via WebmasterKB.com
http://www.webmasterkb.com/Uwe/Forums.aspx/html-dev/200707/1

Re: How does one make an image on top of everything?

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

> Neredbojias wrote:
>>The real Big Jake would be mortified.
>
> 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.)

--
Neredbojias
Half lies are worth twice as much as whole lies.