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
Technology Partners: 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

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

When writing CSS, there are a few simple rules that will make your life easier.    1. Using ‘* {box-sizing:border-box;}’. Using this will wrap all your elements in a nice little compact box-model that will give you the width you want, like so... …
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 users will learn how to embed custom fonts into websites using @font-face in CSS Select a font: Ensure the EULA allows you to use @font-face: Download the font: Get the browser-compatible files you need: Edit your CSS       - Name …
In this tutorial viewers will learn how add a full-size background image to a webpage using CSS3. Create a new HTML document with an internal stylesheet.: In CSS, define the html element to have a background image. Use a high resolution image.: In t…

717 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