Scrollbar cut off in IE but not FF - URGENT

Posted on 2006-07-14
Last Modified: 2008-02-01
OK, so I'm building this website, and I'm doing it with CSS (as a learning thing and as good practice). So, I have it working, except for one thing: In IE only (not FF), the scrollbar is halfway cut off (like it was cut top to bottom) and one linebreak down the page (or so). Any ideas? I can post all files if needed. Thanks
Question by:windows_eXPert
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 3

Expert Comment

ID: 17108809
Please post the files.
Is the scrollbar that is being cut-off part of an element on the page?  (e.g. scrolling DIV or textbox)
Which window resolutions does the problem occur?

Author Comment

ID: 17110108
No, it's the standard page scrollbar (body). It's actually running off the edge of the window, as if IE believes that the window is ~5 px wider. What I know the problem is is the CSS menu I have on the left, but I don't know what I can do to fix it. Real browsers don't have the problem. is a link to the .zipped directory. The scrollbar is set to auto. You can add a bunch of <br/>s or just resize the window to reproduce the problem.

Expert Comment

ID: 17110729
the problem lies in IE6hack.css

their "hack" to have the menu "fill up" the screen is:
html {
    overflow: hidden;
body {
    height: 100%;
    width: 100%;
    overflow: auto;

this has the effect of hiding the normal browser scrollbars, resizing the body to fill the screen, and using the scrollbars from the body tag...  

honestly, without diving into the menu code too much, i'd suggest either:
1) taking out the ie6hack.css (comment it out in menudec.js) and dealing with the slightly different-looking page
2) find a different menu
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!


Author Comment

ID: 17110828
I was afraid of that...

Piece of #hit IE... I never really understood why people hated it so much before I started doing webdev, and CSS. At least the menus are navigable, although it would have been nice if I could have done it (the page I got it from) works fine in IE. Does it have to do with a conflict in the menu code?

It really pisses me off that I have to make something work in FireFox, and then go "hack" it to make it work in IE. At least it's possible. Oh well, now that alt browsers are gaining on them, it means that webdevs have to code for FF and like, and more are going to say "screw this, it doesn't look as good in IE, whatever". I'm going to put a big notice "This site will look better in <a href="">Firefox</a>". And Screw IE.

Anyways, that's pretty much what I had thought. If that page doesn't give you any insight, and nobody else comes up with a solution, you get the points at this time tomorrow.


Accepted Solution

mdg12 earned 500 total points
ID: 17111097
Try adding the following to your body style (written dynamically in menudec.js)
margin:0; padding:0


Expert Comment

ID: 17111988
This is how you fix it:

Get rid of ie6hack.css

Add this line to menu.css:

html, body {height: 100%;}

Author Comment

ID: 17112540
Hi guys - Thanks for the responses. I can't test them today, and I won't know for sure until Monday (I forgot to get the files from work). I will try it out though, and let you know by tomorrow.

Thanks again

Author Comment

ID: 17121393
Hey, mdq12, it worked! And I keep the same feel between browsers!



Featured Post

Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Responsive Font Size 6 60
Level out logo and increase size? 16 49
HTML question 2 33
Dropdown animation to normal dropdown 6 24
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…

738 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question