IE scrollbars overlap content.

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • mynameisyohann
    New Member
    • Jul 2008
    • 3
    #1

    IE scrollbars overlap content.

    Hi guys,

    I have a problem that seems to be around for quite some time, but I haven't seen a proper answer anywhere yet.

    See the following :

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<body>
<div id="container" style="overflow:auto;width:100px;height:100px;position:relative">
	<div id="A" style="width:50%;height:150px;background-color:red;">A</div>
	<div id="B" style="position:absolute;left:50%;top:0px;width:50%;height:150px;background:gray">B</div>
</div>

</body>
</html>
    On Firefox, A and B are displayed with the same width, which is 50% of the the div "container" width minus the vertical scrollbar width.

    On IE, the width of A seems to be bigger because part of B is overlapped by the scrollbar. In effect, the width of A and B is 50% of the div container and doesn't take the scrollbar width in account.

    Is there any way to make IE behave like firefox ?

    Thanks,

    Yohann
    Last edited by eWish; Sep 27 '08, 04:27 AM. Reason: Fixed code tags
    Tags: None
    • David Laakso
      Recognized Expert Contributor
      • Aug 2008
      • 397
      #2
      The markup and css you have is not valid. While it will work when valid in FF/3, it will not work in other compliant browsers, or IE/6 and IE/7. No matter what you do.

      Providing I understand what you are attempting, a different construct will work cross-browser. This example has been cursory checked in the latest versions of Opera, FF, Camino, Safari, and WebKit on Mac OS X 10.4.11. And in XP IE/7.0 and IE/6.0 on a PC. I do not have FF/2x on either machine to check it in at present. The "trick,," so to speak, in addition to a different construct, is to remember the width of the gray box includes the width of the scroll bar-- it's a 40% red / 60% gray relationship (I think).

      HTH

        Comment

        • mynameisyohann
          New Member
          • Jul 2008
          • 3
          #3
          thanks David. But as you pointed the gray box is in fact wider than the red one, which doesn't solve my application's problem.

          Also, in my application, #a and #b may or may not be with a bigger height than their container. If they are smaller, both divs should still be dividing the container 50/50 and no scroll bar should be displayed (as FF does it).

          Thanks for trying anyway, I really appreciated the effort.

            Comment

            Previous template Next
            Working...