Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New Coder
    Join Date
    Oct 2004
    Posts
    26
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Position: fixed design flaws

    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:
    http://resweek.tamu.edu/view/teal3/layout.html
    Code:
    <div id="left-border"></div>
    <div id="container">
    	<!-- masthead + content goes in here -->
    
    </div>
    <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
    </div>
    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:
    http://resweek.tamu.edu/view/teal3/layout2.html
    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!

    Tim

  • #2
    New Coder
    Join Date
    Oct 2004
    Posts
    26
    Thanks
    0
    Thanked 0 Times in 0 Posts
    *bump*


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •