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

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
  • 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
Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.


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 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

Networking for the Cloud Era

Join Microsoft and Riverbed for a discussion and demonstration of enhancements to SteelConnect:
-One-click orchestration and cloud connectivity in Azure environments
-Tight integration of SD-WAN and WAN optimization capabilities
-Scalability and resiliency equal to a data center

Question has a verified solution.

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

This is a how to build your own CSS3 slideshow and when I say CSS3 I mean just CSS with no javascript in sight! There a few examples online of how to do this but most just show you an example without any explanation, others make it more complicat…
So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
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 to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…

809 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