www.webdeveloper.com
Results 1 to 10 of 10

Thread: Page layout with no scroll. Problem on IE.

  1. #1
    Join Date
    Jul 2009
    Posts
    7

    Page layout with no scroll. Problem on IE.

    So i have a page which layout "fits" to screen, so that users do not have to scroll to view the content in the middle. It has a header, a container/body area (with its own internal scrollbar) and a footer that supposedly sticks to the bottom.

    The problem: for IE when many toolbars are installed, the footer goes missing, and since the noscroll is on, the users can't scroll down to see it.

    Screenshot of IE's problem in cutting off footer when toolbars installed here.

    Screenshot of what it should look like in IE here.

    What is the best way to work on a site's CSS such that it really calculates the screen space that a user's browser has (according to how much toolbars installed etc) and place the different DIVs neatly, and not force the footer out of the page when screen space is limited (for example, when different number of toolbars are present)? Would like to learn how to best position elements to accomodate to different browsers (and all the tricky toolbars).

    The site is here: http://ams-holding.com.sg/

    Note:
    - if you view the page in firefox, you'll get redirected to index-ff.html which roughly has the same code.
    - also critique on any thing you feel is not right. the code is extremely messy. :/

    Thanks!

  2. #2
    Join Date
    Jul 2009
    Posts
    91
    I don't quite see how toolbars would affect it. Are you saying that your layout has a fixed size? If so what about users with different resolutions or widescreen monitors?

    Unless I've missed something you need to start again with learning CSS. Your site is not loading for me so I can't check.

  3. #3
    Join Date
    Jul 2009
    Posts
    7
    Hmm, i am saying that the layout is supposed to show all at a go without a need to scroll, yet when viewed on browsers with many toolbars installed, the bottom just gets cut off. So i guess its because the height of the middle is fixed, which results in the bottom not showing when it exceeds the "immediate landing"? I will look into that. But the toolbar does interfere with the layout now if you look at the first screenshot, so i am guessing the height is fixed, that is why.

    Maybe i should rephrase my question. For a site to achieve what i described, how do we work with the positioning to make sure it works for different resolution or widescreens? Use a percentage for height?

    Thanks DaiLaughing, I've started out with CSS for not a very long time. I didn't design the site, but i'm trying to fix this problem. The site still loads for me, anyway. (:

  4. #4
    Join Date
    Jul 2009
    Posts
    91
    I'm not the greatest at CSS but yes you need to look at percentages. Also position:relative and absolute and maybe floating and clearing.

    The problem si that there is not much room for the page to shrink because of those images. I'd just turn scrolling on and let the user scroll down for the bottom bar (or you could show the bottom bar always at the bottom (using &#37 but have a scrollbar on the central div. I hope that helps a bit.

  5. #5
    Join Date
    Jul 2009
    Posts
    7
    I would turn on the scrolling but then the site isn't mine.

    Both the header and bottom bar are always the same, and should have a fixed height, right? I cannot figure out how to work around them to make a percentage height for the central div. (I hope this isn't a very juvenile question, but i have absolutely no idea how to do that really.)

    Thanks, that definitely helped. I am going to read up some more. (:

  6. #6
    Join Date
    Jul 2009
    Posts
    7
    Have just found a site with some explanations for the footer positioning. In case anyone's interested:
    http://www.xs4all.nl/~peterned/examples/csslayout1.html

    My question is, how do we "tell" the central div with the content to take up maximum space available? and also make the top and bottom margin of this div the same from the header and footer respectively.

    Thanks.
    Last edited by alphabetical; 07-21-2009 at 05:15 AM. Reason: additional info

  7. #7
    Join Date
    Jul 2009
    Posts
    91
    Make the central div and the body 100% height. Then set top and bottom margins for the central div to clear it from the top and bottom elements. I did rush this so that might not work!

  8. #8
    Join Date
    Jul 2009
    Posts
    7
    Do you mean take the central div out of the container? Hmm. Let me try it.

  9. #9
    Join Date
    Jul 2009
    Posts
    7
    http://www3.ns.sympatico.ca/d.elliot...al_center.html

    For anyone interested, i managed to find something similar to what i was intending to achieve.

    Header and footer fixed, check.
    Height of content area based on screen resolution, check (somewhat).
    Scrollbar when content exceeds, check.

    Found this via Google, maybe 10 pages in or so.

    In addition to that. One confusion that i managed to clear of why my div "pane2" (the scrollable area in the central div) couldn't be made a percentage height, was because its parent did not have a height specified. One of the many things i'm slowly learning about CSS.

    Cheers!
    Last edited by alphabetical; 07-22-2009 at 04:05 PM.

  10. #10
    Join Date
    Jul 2009
    Posts
    7
    http://www3.ns.sympatico.ca/d.elliot...al_center.html

    So according to the site i provided above i have modified the page's structure, and still i cannot figure out a way to make the central div in percentage. Look at the third box on the site (the blue box), it has a percentage height, so i was thinking it could help be used in my case, since i want a flexible height too, according to the screen available.

    container is wrapper
    logo, header, footer are #head-float, #foot-float
    .content is just like the floater class.
    left is supposed to work like vertical3 but i don't know how to give it a percentage height.

    Below is my CSS with only the necessary bits:

    Code:
    .clear{clear:both;}
    
    html, body {
    margin:0;
    padding:0;
    height:100%;  /* for 100% height layout in all browsers*/
    
    font-family:arial,sans-serif;
    font-size:small;
    }
    
    #container {
    	position:relative; /* needed for footer positioning*/
    	margin:0 auto; /* center, not in IE5 */
    	width:930px;
    	height:auto !important; /* real browsers */
    	height:100%; /* IE6: treaded as min-height*/
    	min-height:100%; /* real browsers */
    	overflow:hidden;	
    }
    
    /* header start*/
    #logo {
    	background-image:url(images/logo.png);
    	background-repeat:no-repeat;
    	width:930px;
    	height:88px;
    	top:0px;
    	float:left;
    	margin-top:10px;
    	position: absolute;	
    }
    
    #header {
    	background-image:url(images/h5.png);
    	background-repeat:no-repeat;
    	width:930px;
    	height:172px;
    	top: 98px;
    	float:left;
    	position: absolute;	
    }
    
    /* header end*/
    /* main content area start*/
    .content {
    	float:left;
    	padding:0px; /* bottom padding for footer */	
    	margin-right:0px;
    	position:relative;
    	top:286px;
    	width:720px;	
    }
    #left {	
    	height:330px;
    	float:left;
    	overflow:hidden;
    	padding-right:10px;
    }
    #pane2{
    	width: 710px;
    	position: relative;
    	height:90%;
    	overflow:auto;
    	margin-bottom:13px;
    }
    
    .content2 {
    	float:left;
    	padding:0px; /* bottom padding for footer */
    	padding-left:8px;
    	position:relative;
    	top:280px;
    	overflow:hidden;	
    	width:198px;
    }
    
    #rightmenu div {
    	float: left;
    	padding-top:10px;
    }
    
    /* main content area end*/
    
    /* footer  start*/
    #footer {		
    	background:transparent url(images/footer.png) no-repeat scroll left top;
    	font-size:11px;
    	font-family:Tahoma,sans-serif;
    	position:absolute;
    	width:100%;
    	height: 78px;
    	bottom:0;	 /*stick to bottom */	
    }
    Below is the structure of my HTML, also with the necessary bits only:
    HTML Code:
    <body SCROLL=NO>
        <div id="container">
            <!-- page content -->
            <div class="content">            
                <div id="left">                
                        <div id="pane2">
                            <div id="result"></div>
                        </div>
                </div>
            </div>
            
            <!-- menu -->
            <div class="content2">
                <div id="rightmenu" style="overflow: hidden;">                
                </div>
            </div>
            <div style="clear: both;"/>
    
            <!-- logo + banner graphics section-->
            <div id="logo"></div>        
            <div id="header"></div>
             
            <!-- footer -->
            <div id="footer"></div>
        </div>
    </body>
    </html>
    How do i set the height for content, and pane2 so that it is like the percentage height achieved on the site i gave?

    Thanks for any help in advance!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles