3 Row Layout

simrud · August 1st, 2005, 10:38 AM

I'm trying to get out of using tables, and being new to layouts completely based on CSS I'm having a lot of trouble with this particular design.

All I'm trying to do is have a header area about 100px high and spanning the width of the page no matter how wide it is, with a centered content. Kind of like a frame really.

Then I'm trying to have a footer about 28px high on the bottom, once again fixed there like a frame and spanning the width of the page with centered content.

In between the content needs to go.

The issue I'm having is that Explorer just doesnât want to render anything I tired correctly, while every other browser out there seems to be just fine.

It is important for me that only the middle scrolls, and that you can see the entire scrollbar at any moment, including the very top and the very bottom. I have gotten it to work w/out showing the full scroll bar, but the code is really messy and is driving me insane.

Has anybody done something like this before, or do they know a website that has this layout implemented in a flexible way?

Thanks in advance for your help.

richard.york · August 1st, 2005, 10:46 AM

Link to the code would be nice.

I assume you're using fixed positioning.

Try out Dean Edwards' IE7 JavaScript, which implements fixed positioning in Explorer among other things.

http://dean.edwards.name/ie7

Get the source from SourceForge
https://sourceforge.net/project/show...roup_id=109983

Place the files in the root directory of your web server. e.g. http://www.example.com/ie7

Then add these lines between the <head> and </head> tags.

Code:

<!--[if lt IE 7]>
<script src="/ie7/ie7-standard-p.js" type="text/javascript"></script>
<![endif]-->

Now you have a CSS2 capable Explorer via JavaScript. See Dean's website for other things that it supports.

HTH!

Regards,
Rich

--
[http://www.smilingsouls.net]
Mail_IMAP: A PHP/C-Client/PEAR solution for webmail
Author: Beginning CSS: Cascading Style Sheets For Web Design

simrud · August 1st, 2005, 03:28 PM

Thanks for the super fast reply, I would have posted the link, but I have not even gone out and got a domain name for this, yet. Just playing around with CSS, actually picked your book up and came across the forum thing in the beginning. Nice book by the way, def. worth the reasonable price, a nice break from the 50 bucks a bloated book from the how I can stretch out this computer book so it turns into a really bad reference manual text series lol.

Thatâs pretty awesome that you could just get a patch up on the server to make IE manageable. I was seriously considering laying off CSS to position stuff solely with it because IE 7 doesnât come out for like another 2 years.

Once again thanks a lot for the help.

richard.york · August 1st, 2005, 06:47 PM

No problem, glad to help out!

Just a head's up. Be careful of where you place your fixed positioned elements in Explorer. Fixed positioning is supposed to happen relative to the viewport, which makes fixed positioning an ideal replacement for frames. Technically speaking it shouldn't matter where a fixed position element appears in a document, because positioning is always supposed to be relative to the viewport. This doesn't actually work out so well in the real world. The reality is the best place to place these is between the <body> and </body> tags- not nested within any other elements. Dean's script is a hack, it just applies absolute positioning when it detects the presence of the position: fixed; declaration, and updates the position dynamically via javascript onscroll events. It becomes unpredictable and buggy when applying positiong: fixed; to an element nested with others. I had to figure this out the hard way, so I thought I'd pass that along.

IE7 is pretty amazing. Goes to show that even with a four year old, outdated browser, you can still make use of the latest standards- with the right JavaScript.

Regards,
Rich

--
[http://www.smilingsouls.net]
Mail_IMAP: A PHP/C-Client/PEAR solution for webmail
Author: Beginning CSS: Cascading Style Sheets For Web Design