frame moving up and down when browser resized

[masten]

hi chaps

I use frames in my site, and instead of the bottom frame being stuck to the frame above it like I want, it moves up and down when the browser is re-sized.

Is it possible to fix it so it doesn't move


thanks

Masten

[Vladdy]

Re: frame moving up and down when browser resized

Originally posted by masten
hi chaps

I use frames in my site,
<snip />

There is your problem, everything else is just a consequence

[me']

Instead, try:

div#footer { position: fixed; bottom: 0 }

With this for IE.

[masten]

vladdy: yeah I know professional hate frames but I dont know to do it any other way...

me': im not a professional coder so Im not with you...

how does:

div#footer { position: fixed; bottom: 0 }

help me...

how do I implement that in the code, what do I attatch it to, does it go in the frameset of the frame???

many thanks

Masten

[me']

Okay. Frames are bad: they're hard to bookmark, hard when you want to open a duplicate of that page, hard to navigate a lot of the time. Apart from that, a lot of the code you have to use is non-standard and it all ends up a mess. In several different documents.

So, instead, if we want a part of the page to stay in a fixed position, we first mark it up as a part of the page:

<div id="fixedbit">

content here

</div>

Note I've given it an ID to make it easy to identify. We then use something called CSS, which we should always use to tell the browser entirely how the page looks (all 'presenetational' tags in HTML like <font>, <b>, <i> are bad: imagine a machine that converts a page into braille. How would it react to <b>? It would have to do something to it that wouldn't be making it bold. That tag is a problem.) to make this div stay fixed. If you've never seen CSS before, check out the awesome tutorial over at w3schools. This is the CSS we use:

div#fixedbit { position: fixed; bottom: 0 }

What this says is, 'Any div with an id of 'fixedbit' (# is the 'ID selector'): it needs to be fixed in respect to the viewport (so it won't move with the scrollbar), and it's bottom edge needs to be 0 pixels away from the bottom edge of the containing object (in this case the screen)'.

Thus, it emulates frames.

We have on problem: the most popular browser, Microsoft Internet Explorer (or IE) doesn't support position: fixed;. We have to use a different method. This page described that method.

Now, you didn't have to be a professional coder to understand that after all

[masten]

me'

OK, I get the first bit,

I use:

<div id="fixedbit">

content here

</div>


and:

div#fixedbit { position: fixed; bottom: 0 }




but then the second bit about the fix for IE says use this:

body
{
overflow: hidden;
}
div.content
{
height: 100%;
overflow: auto;
}


so which do I use?

many thanks

Masten