View Full Version : Position: fixed design flaws

10-20-2004, 06:49 PM
I've spent the last few days converting a picture created in Fireworks into real xhtml+css code, and it's been roughly a nightmare. Before we go any farther:

<div id="left-border"></div>
<div id="container">
<!-- masthead + content goes in here -->

<div id="right-border-shadow"></div>
<div id="right-border"></div>
<div id="bottom-bar">
<span id="bottom-nav">
<a href="#">contact</a>
<!-- snip - more links -->
<a href="#">volunteer</a>
</span><br />
copyright &#xA9; 2004 resurrection week

Currently I am using 3 fixed divs to frame the content div in the middle. I found out after I invested some time into this layout that IE doesn't properly render position: fixed at all. So I looked up a fix and implemented that here:
If you look at it in Safari, Firefox, Opera (7), or Moz, it renders properly both ways. IE gets closer to what I want with the second version, but it's still way out of line and nothing I would actually use.

Some explanation: After doing some heavy reading about laying out pages with CSS, I decided to pull the bars on the left and right side and the footer out of the flow of the document, as they transcend the flow and "float on top". They are declared position: fixed to the edges of the browser so that they don't scroll. The middle div is declared with margins to push it out from under those fixed elements. in this way, the only thing that scrolls is the middle div, everything else stays put.
Here is my dilemma: Can I reasonably fix the issues in IE and stick with this design? On the other hand, can I do this same layout (bars on left and right + footer) with floated divs? If so, how would I do that? I realize that there are other visual errors I need to deal with, but they all seem to be largely dependent upon the overall layout, and as such I've waited to fix them.

A quick list of IE errors FYI:
1 - extra gaps on either side of masthead and below footer
2 - left navigation bar moved over to the right (???)
3 - the sidebars and footer do not stay put when vertically scrolled (!)
4 - alpha transparency on the masthead and footer required some hacks. This is where the right-border-shadow div came from. I am aiming to fix that next, but for right now it'll work.

Just to be clear, I am not requesting that someone come along and fix this all up for me. I am requesting commentary on best methods of page layouts of this flavor. Thank you in advance for any help!


10-21-2004, 06:42 AM