#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2008
    Posts
    14
    Rep Power
    0

    Exclamation Internet Explorer Scrollbar Issues


    Hi there.

    I am currently attempting to layout a design that will, in the future, become a live website. The website is located here.

    I have tested this site using the following browsers:
    Opera 9.5 [works fine]
    Firefox 2 [works fine]
    Firefox 3 [works fine]
    IE 7 [ISSUE OCCURS]
    IE 6 [ISSUE + ANOTHER ISSUE OCCURS]

    Both my (X)HTML (transitional) and CSS (level 2.1) validate according to w3c.

    You can view the source code of my (X)HTML and CSS below:

    [code=html4strict]
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

    <head>
    <meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
    <title>Function T .:. Home</title>
    <style type="text/css" media="all">@import "css/master.css";</style>
    </head>

    <body>

    <div id="entire-page">
    <div id="page-container">
    <div id="ghost"></div>
    <div id="header"></div>
    <div id="navigation">
    <div id="navigation2"></div>
    <div id="navigation1"></div>
    </div>
    <div id="content">
    Lorem ipsum debet tritani forensibus et nam, ex solet splendide mea, at cum menandri consetetur conclusionemque. Ocurreret persecuti eum at, intellegat temporibus cu sea. Tale modus mei cu, mucius offendit id mea, id consul urbanitas vis. Ius te alii deseruisse, at mea veri illum perfecto. Per iudico commodo blandit ea, mel eu illum sonet efficiantur, tota delenit splendide at qui.<br/><br/>

    No vel ridens labores percipitur. Ad eum homero percipitur. Sit stet vero ex. In nec volumus explicari.
    <br/>
    <br/>

    Pro puto tempor cu, vix in populo doming legendos, ut has regione suavitate. Nec ea movet omnium assentior, ius solum feugiat no, ut est quem putant mollis. Eu simul suscipiantur has, equidem ornatus ea vel. Cu noluisse placerat nec, nostrum probatus eloquentiam cu sed. Lorem di**** et pri, magna ubique no sed, in solum decore quidam pro.<br/><br/>

    Ad blandit antiopam pri. Meliore necessitatibus et quo. Qui fabellas torquatos an. Id vel tantas recusabo, ex eos natum simul mentitum. Ea nostrud takimata iudicabit vel. <br/><br/>

    Id sit minimum patrioque ullamcorper, vix prompta intellegat at. Mea vidisse admodum denique in, at eam graecis expetendis referrentur, ancillae prodesset ut eam. Meliore luptatum appellantur duo eu. Cu dicam invenire has, ex affert pertinacia vis, ut impetus mandamus sea. Pri nisl atomorum ex, nam te eripuit numquam docendi. <br/><br/>

    Est stet albucius maluisset id, et habeo graece molestie mel, adhuc nonumy eloquentiam ea vel. Ubique takimata persequeris ne his, pro an augue feugiat efficiendi, eu eam unum nominavi mediocritatem. Corpora disputando eloquentiam ex quo, cu prima choro salutandi his. Has eirmod regione accumsan eu. Cum ea wisi scripta, veritus assentior complectitur pro ea, mea cu aeterno vocibus eligendi. Ei eam maiorum perfecto. <br/><br/>

    Et eam eius nostro. In alienum definitiones nec, sed wisi mentitum incorrupte ea, ei per quando appetere. Eu dicta vitae ignota vel. Eu qui quot aperiri adipiscing, eu vim novum deleniti, quod kasd eu has. Copiosae incorrupte neglegentur mea cu, sit adolescens elaboraret constituam te, ea sea tamquam molestie definiebas. Rebum harum labore pro ex, ex soluta contentiones vix, no usu esse nominati mandamus. <br/><br/>

    Et pro aliquando expetendis theophrastus. Mei ne errem consequat, mei ut sonet singulis indoctum. Alia nihil civibus per ei. Ei sed mucius perfecto elaboraret, invidunt neglegentur ei mel, at vide tota quo. <br/><br/>

    Id placerat phaedrum per. Nec ut persius legimus conceptam, ius no ludus clita consul. At atomorum voluptatum cum, duo cibo putant reprimique ne. Ea mei hinc eros noluisse, ad sea ipsum di****, alii debet tamquam te nam. <br/><br/>

    Essent labores explicari cu duo. Ius causae copiosae an. Ex omnium diceret maluisset vim. Ad mel vivendo disputationi. Hendrerit democritum id cum, quodsi molestiae duo te. <br/><br/>

    </div>
    <div id="content-bottom"></div>
    <div id="footer">
    Home - Bio - Media - Contact - Reviews - Tutorials - Charts - Links <br/>
    All information Copyright 2008 Tom Winchester unless otherwise specified. All original artists <br/>
    and labels retain their full respective rights and royalties to all copyrighted material. Mixes are presented <br/>
    for promotional purposes only. Duplication of any material in part or in whole without the <br/>
    express written consent of Tom Winchester is strictly prohibited.
    </div>
    </div>

    </div>


    </body>
    </html>
    [/code]

    [code=css]
    html, body {
    margin: 0px;
    margin-bottom: 0px;
    padding: 0px;
    background-image: url(../images/bgpattern.gif);
    background-repeat: repeat;
    }

    #entire-page {
    width: 100%;
    height: 100%;
    }

    #page-container {
    margin: auto;
    width: 750px;
    }

    #ghost {
    height: 15px;
    }

    #header {
    height: 110px;
    background-image: url(../images/headers/header1.gif);
    background-repeat: no-repeat;
    }

    #navigation {
    margin: 0px;
    padding: 0px;
    height: 40px;
    }

    #navigation2 {
    float: right;
    margin: 0px;
    padding: 0px;
    width: 375px;
    height: 40px;
    background-image: url(../images/navbar2.gif);
    background-repeat: no-repeat;
    }

    #navigation1 {
    margin-right: 375px;
    padding: 0px;
    height: 40px;
    background-image: url(../images/navbar1.gif);
    background-repeat: no-repeat;
    }

    #content {
    background-image: url(../images/contentbg.gif);
    background-repeat: repeat-y;
    padding-top: 0px;
    padding-left: 10px;
    padding-right: 245px;
    padding-bottom: 0px;
    font-family: "Trebuchet MS", Verdana, Helvetica, Arial, Times;
    font-style: normal;
    font-size: 12px;
    color: #858585;

    }

    #content-bottom {
    height: 5px;
    background-image: url(../images/contentbgbottom.gif);
    background-repeat: no-repeat;
    }

    #footer {
    height: 80px;
    padding: 5px;
    text-align: center;
    font-family: "Trebuchet MS", Verdana, Helvetica, Arial, Times;
    font-style: normal;
    font-size: 11px;
    color: #cfcfcf;
    }
    [/CODE]

    My problem is this: in IE7, the sight does a couple of things strange:

    1) The site loads a bit slower than on the other browsers (not really a big issue...just seems to have something to do with the main problem), and 2) the vertical scrollbar is laggy to say the least. If you scroll up and down the page quickly it will have no idea where it is supposed to be at!

    On IE6, the browser creates an extra little (appx. 3px wide) space in between the two navigation bars. You can see the page's background pattern through this space. Further, the navigation bars are not pushed aside for this gap...the bg is merely visible ON TOP of the images.

    Please let me know if you have ANY idea as to what the issue may be. As far as I can see, my code is as simple as I can make it...so I have no idea what else to do.


    HELP!!!!

    THANKS!!!!

    -Tom Winchester-
  2. #2
  3. Classical Computing
    Devshed Novice (500 - 999 posts)

    Join Date
    May 2008
    Location
    Melbourne, Australia
    Posts
    891
    Rep Power
    106
    The 3px bug is common for IE. You could Google for more info. Try to post your url again, but this time with an internal gap or tow (you can't post proper links until you've got 5 posts.)
    Simple is beautiful.
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2008
    Posts
    14
    Rep Power
    0
    SORRY!!! Didn't know about the URL thing...

    Anyways, here is the URL for the site:

    http://www dot functiont dot net/2.0/index dot html

    Take out the spaces and replace dot with . and you've got it!

    THANKS!

    UPDATE: I also tested in Google Chrome and everything was perfect, so this seems to ONLY happen in IE6 and IE7, which is much more common than we'd like to admit I guess...

    THANKS!!!

    -Tom Winchester-
  6. #4
  7. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2008
    Posts
    14
    Rep Power
    0
    UPDATE:

    The issue that you referred to as the 3px Bug appears to be evident in IE5 as well. I don't have IE6 or IE5.5, so I can only go off of screen shots that I generate through VPNs, but the gap appears to actually be 5px, not 3.

    I don't know if this is ALSO documented...but I couldn't find anything when googling it. Anyways, like I said, I can LIVE with the 5px gap showing up if I have to...its the laggy scrollbar that worries me.

    THANKS!!!

    UPDATE:
    If I make the following change to#navigation1:
    Code:
    #navigation {
    	margin: 0px;
    	padding: 0px;
    	height: 40px;
    	background-color: white;
    }
    The gap IS only 3px wide. So I guess I DO have the 3px bug...yay!

    A simple workaround (in this specific context only) is to set the bg-color of the #navigation div to white. This covers up that gap (and the gap wasn't affecting anything layout-wise...it was merely a "ghost" image). However, this may prove to show up again sometime when I add the right column to the page...bleh...

    Still no update or fix for the scroll bar issue....

    -Tom Winchester-
  8. #5
  9. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2008
    Posts
    14
    Rep Power
    0
    UPDATE:

    The problem does indeed only seem to occur in versions of IE. I have tested in multiple other browsers, operating systems, and I have tested on more than 10 seperate computers.

    There seems to be no explanation for the strange behavior of the scroll-bar...(only in Internet Explorer). Unless any of us can figure this out, I am forced with a couple of options:

    a) Code a pop-up of some sort to alert any users that may be using Internet Explorer that they may experience some technical problems while at the site. I would recommend they switch to Firefox or Opera for optimum performance.

    b) Take apart the site and redesign it from scratch again (I've done this once and it didn't appear to help the issue. I would really prefer not to do this (nor do I think it would do much)

    Let me know what you guys think!!!!

    THANKS!!!!

    -Tom Winchester-
  10. #6
  11. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2008
    Posts
    14
    Rep Power
    0
    UPDATE:

    I added the (X)HTML source code to my original post in case the fact that it was missing was deterring people from looking into this issue...

    Still no word as to whether or not this is a known or fixable issue. I've literally been working on this layout for a week now, and I haven't even started adding content yet!!!!

    THANK YOU!!!!

    -Tom Winchester-
  12. #7
  13. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2008
    Posts
    14
    Rep Power
    0
    UPDATE: Since I haven't received any feedback here, I started to take things out until the issue got fixed.

    Although I did not solve the problem, I may have gotten a little bite more information. If I take out the doctype for the page, Internet Explorer's errors go away completely. No scrollbar error, no gaps, not slow loading...completely the way I intended the page to be rendered, except the page isn't centered. (ASIDE FROM THE FACT THAT NOT HAVING A DOCTYPE IS A SIN)

    So I THINK (someone want to verify?) that I can rule it down a bit. I believe that my doctype must be the culprit. It's not the CSS because the page works fine (except for centering) without a doctype.

    What is your recommendation?

    THANK YOU!!!!

    -Tom Winchester-
  14. #8
  15. Devshed Intermediate (1500 - 1999 posts)

    Join Date
    Jun 2001
    Location
    Right now? On my chair.
    Posts
    1,777
    Rep Power
    258
    Sorry I missed this thread. Please try not to post much as that makes me think someone has a hold on this thread.

    Doc types aren't neccessarily NEEDED to make some layouts (aka Google) however it is best to have one. Try switching from Transitional to Strict (or vice versa). Do you have any JavaScript or Flash on the page that could be making it laggy? Does Google show anything for this? Why not take out the DTD/disable JS/disable Flash?
    Use markup the semantic way. You wouldn't want your dog answering the phone for you, would you?
    HTML Validator || CSS Validator -- HTML / CSS Main forums. JavaScript and PHP...maybe
    Bones: HTML; Skin: CSS; Muscle: JavaScript; Brains: PHP; Memory: MySQL
  16. #9
  17. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2008
    Posts
    14
    Rep Power
    0
    Thanks for the reply, Groundscape! I have indeed tried just about every doctype that I have gotten my hands on, from html to xhtml to strict to transitional. I've tried copying and pasting the doctype from working websites into mine to see if that works...all to no success. I have probably tried around 25 or so doctypes (all that appear to work fine in other sites), with no greater success. As I mentioned earlier, the only success I've had [with the scrollbar-issue at least] has been to take away the doctype. This, however, is undesirable for future compliance with standards and such....

    ANYWAYS! There WILL definitely be some Javascript on the page, and potentially some flash, however I'm not planning on adding flash at this point in time. So I don't want to disable either of them, just in case they are used in the future...

    The only other thing I can think of is perhaps something in my first few CSS divs....perhaps this is the culprit?
    [code=css]
    html, body {
    margin: 0px;
    margin-bottom: 0px;
    padding: 0px;
    background-image: url(../images/bgpattern.gif);
    background-repeat: repeat;
    }

    #entire-page {
    width: 100%;
    height: 100%;
    }

    #page-container {
    margin: auto;
    width: 750px;
    [/code]

    I'm not sure if the highlighted statement actually DOES anything or not....and if it doesn't perhaps that could have something to do with the issue? I only say this because it is only when I VERTICALLY scroll the page that errors seem to occur. I will try and take out this statement for giggles and see what happens!

    THANK YOU!!!

    -Tom Winchester-
  18. #10
  19. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2008
    Posts
    14
    Rep Power
    0
    Alright. So I THINK that I've fixed it!

    The only problem is, I'm not exactly sure I know what the problem was, or how I managed to fix it...but here is my NEW css file's code (for documentation purposes):

    Code:
    html, body {
    	margin: 0px;
    	padding: 0px;
    	background: url(../images/bgpattern.gif);
    }
    
    #entire-page {
    }
    
    #page-container {
    	margin: auto;
    	width: 750px;
    }
    
    #ghost {
    	height: 15px;
    }
    
    #header {
    	height: 110px;
    	background-image: url(../images/headers/header1.gif);
    	background-repeat: no-repeat;
    }
    
    #navigation {
    	margin: 0px;
    	padding: 0px;
    	height: 40px;
    	background-color: white;
    }
    
    #navigation2 {
    	float: right;
    	margin: 0px;
    	padding: 0px;
    	width: 375px;
    	height: 40px;
    	background-image: url(../images/navbar2.gif);
    	background-repeat: no-repeat;
    }
    
    #navigation1 {
    	margin-right: 375px;
    	padding: 0px;
    	height: 40px;
    	background-color: white;
    	background-image: url(../images/navbar1.gif);
    	background-repeat: no-repeat;
    }
    
    #content {
    	background-image: url(../images/contentbg.gif);
    	background-repeat: repeat-y;
    	padding-top: 0px;
    	padding-left: 10px;
    	padding-right: 245px;
    	padding-bottom: 0px;
    	font-family: "Trebuchet MS", Verdana, Helvetica, Arial, Times;
    	font-style: normal;
    	font-size: 12px;
    	color: #858585;
    	
    }
    
    #content-bottom {
    	height: 5px;
    	background-image: url(../images/contentbgbottom.gif);
    	background-repeat: no-repeat;
    }
    
    #footer {
    	height: 80px;
    	padding: 5px;
    	text-align: center;
    	font-family: "Trebuchet MS", Verdana, Helvetica, Arial, Times;
    	font-style: normal;
    	font-size: 11px;
    	color: #cfcfcf;
    }
    You will notice that I took out ALL the #entire-page div's statements out, including Height: 100% and width: 100%. I went back and re-validated the code, refreshed in my browser and SHABAM!!!! The heavens parted and angels cried an immaculate chorus.

    Thank you for all your help guys. If nothing else, you kept me working on the issue as opposed to just making a pop-up to alert IE users. Thanks especially to Groundscape for attempting to solve this strange little error.

    Now, as I've never seen this before in another website (one of my projects or an external one), I have no idea if this could be considered a "bug" or just some dumb error on my part (probably the latter), so I don't think its any big deal or anything...

    THANKS AGAIN!!!!

    -Tom Winchester-
  20. #11
  21. Devshed Intermediate (1500 - 1999 posts)

    Join Date
    Jun 2001
    Location
    Right now? On my chair.
    Posts
    1,777
    Rep Power
    258
    "SHABAM"

    Priceless.

    Congrats.
    Use markup the semantic way. You wouldn't want your dog answering the phone for you, would you?
    HTML Validator || CSS Validator -- HTML / CSS Main forums. JavaScript and PHP...maybe
    Bones: HTML; Skin: CSS; Muscle: JavaScript; Brains: PHP; Memory: MySQL
  22. #12
  23. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2008
    Posts
    2
    Rep Power
    0
    Hi man,
    I have the exact same problem as you.
    My web site is:
    pickup-project . net
    /remove the space/

    In all browsers it runs very well, BUT in IE it runs very crappy.
    This is the code below:

    html, body
    {background: url(../images/back.gif); background-repeat: repeat;
    font: 12px verdana;}

    #allcont {width: 863px; background: url(../images/blackb.gif) repeat-y;}

    The problem is with the first line - because when I remove it the site runs smoothly. Can you help me rewrite it to not make IE to run slow. Pls contact me here or on ICQ - 8506616.

    Thanks in advance!
    - Zaks
  24. #13
  25. Classical Computing
    Devshed Novice (500 - 999 posts)

    Join Date
    May 2008
    Location
    Melbourne, Australia
    Posts
    891
    Rep Power
    106
    Hi zaks_bg

    Instead of

    [code
    background: url(../images/back.gif); background-repeat: repeat;
    [/code]try...

    Code:
    background: transparent url(../images/back.gif) repeat scroll 0 0;
    That's the proper way to describe the background properties.

    udachi
    Simple is beautiful.
  26. #14
  27. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2008
    Posts
    2
    Rep Power
    0
    I cant believe bur I fixed it alone by adding center and background color - i dont know which one of this actually fixed it - but Im happy and dont want to touch anything more.

    The code is now:

    Code:
    html, body 
    {background: url(../images/back.gif); repeat; center; background-color: white; font: 12px verdana;}
    Im not web programmer - but managed to fixed it somehow - Im so happy
    Thanks guys.

IMN logo majestic logo threadwatch logo seochat tools logo