Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Scoll Lag in IE But Not in Chrome

  • This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #30389
    charleszipp
    Member

    Hey All,

    I have an interesting issue in a portal site i am building at the moment for my company. The site’s master page design consists of a basic top level header and a image of stacked books that fills the entire browser background. The idea i got from a article off of this site a while back. The background image basically an img tag that fills up the entire background via CSS. All the rest of the div’s sit on top of this image (using z-index). The background image is also fixed. The image is not repeat friendly so this is what I went with

    The issue i have is that when i preview the site in IE, i get a very obvious scroll lag. However, if i preview the same site in Chrome, i cant reproduce this problem. I understand that the scroll is probably related to using such a large image in the background (its only 220kb though). I was wondering if anyone has had this issue before and knew of a way to alleviate the scroll lag in IE.

    I am still pretty inexperienced with design and CSS.

    Thanks in advance for your help.

    Heres the CSS for the master page.


    #Background
    {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 10;
    vertical-align: middle;
    }
    #BackgroundImage
    {
    position:fixed;
    margin:0 auto;
    width: 100%;
    height: 100%;
    z-index: 0;
    }
    #Logo
    {
    border-width: thin;
    border-style: none none inset none;
    border-color: #C0C0C0;
    margin: 0 auto;
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 20;
    background-color: #06155E;
    font-size: 14pt;
    color: White;
    }
    #Logo a
    {
    color: White;
    }

    #LogoLeft
    {
    width:50%;
    float:left;
    margin:0 auto;
    vertical-align:top;
    }
    #LogoRight
    {
    width:50%;
    float:right;
    margin: 0 auto;
    vertical-align:top;
    text-align:right;
    }
    #LogoRightUserMenu
    {
    width: 95%;
    padding: 10px;
    }
    #Menu
    {
    position: relative;
    top: 102px;
    z-index: 30;
    }
    #MenuCanvas
    {

    }
    #MenuBody
    {
    position: relative;
    top: 60px;
    left: 0;
    color: Black;
    z-index: 100;
    width: 1000px;
    padding-left: 10px;
    padding-right: 10px;
    text-align: left;
    font-family: calibri;
    font-size: 16pt;
    font-weight: bold;
    }
    #MenuBody a
    {
    margin-right:20px;
    float:left;
    color: #06155E;
    }

    #Content
    {
    position:absolute;
    top: 160px;
    left: 0px;
    z-index: 30;
    }

    #ContentCanvas
    {
    border: 1px solid black;
    width: 1000px;
    height: auto;
    position: relative;
    top: 10px;
    left: -3px;
    background-color: #FFFFFF;
    }


    And the markup for the master page.

















    #78989
    noahgelman
    Participant

    Is this happening in all versions of IE?
    And by scroll lag you mean that you scroll with the mouse wheel or by dragging the bar on the right and the screen pauses before moving?
    And lastly, whats with the tables? If you’re targeting the divs inside, why do you need the tables? And tables are horribly inefficient and aren’t semantic at all.

    #79001
    charleszipp
    Member

    I dont have other versions of IE to test with other than 8. By scroll lag i mean when you scroll down via mouse wheel or scroll bar, you scroll and about half a second later the page moves. Its kind of similar to getting a very low FPS rate (frames per second) in a game or video. Where you would expect a smooth and responsive action to take place you get one thats kind of choppy.

    The tables are a temporary fix for another issue i was having. For the logo div, i have an image on the left and a user menu on the right (i.e. sign in/out, my account, etc). I wanted the image to align left and the user menu to align right. Without the tables, i couldnt get the user menu to align right if i remember correctly.

    For the tables in the Content div, the height would not stretch to cover everything that ends up getting placed inside the contentplaceholder at run time. Originally, the table was a div named ContentCanvas. I was intending for the ContentCanvas div to be the a white box where all the content sits. Basically the ContentCanvas div itself would load up about 20px in height with the rest of the content would flow over the box. At the time, the table was a quick work-around for the issue.

    Im still pretty new to working with CSS, so i figure these issues are likely a result of my inexperience so any advice is much appreciated.

    #79002
    virtual
    Participant

    If you have IE8 you can test IE7 within it. Just go to Tools – Developper Tools, a bit like Firebug, and once you have the developper window open, select browser mode where you can choose between IE7 and 8

    #79004
    charleszipp
    Member

    Thanks for the tip Virtual. I tested in IE7, same issue.

Viewing 5 posts - 1 through 5 (of 5 total)
  • The forum ‘CSS’ is closed to new topics and replies.