Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win


Scrollbar cut off in IE but not FF - URGENT

Posted on 2006-07-14
Medium Priority
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.

http://www.filefactory.com/?5ffb14 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
Independent Software Vendors: 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

http://jessey.net/simon/articles/007.html (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="http://www.getfirefox.com">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 2000 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

Hire Technology Freelancers with Gigs

Work with freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely, and get projects done right.

Question has a verified solution.

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

Creating a CSS block that only applies to printing By default, all of your CSS applies to every possible view of your page - whether on screen, printed, landscape, touch-screen, or whatever.  You can, however, add CSS that only applies under certai…
CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).
Suggested Courses

618 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