473,473 Members | 1,923 Online

Sign in
Join

Home Posts Topics Members FAQ

IE scrollbars overlap content.

3 New Member

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 :

Expand|Select|Wrap|Line Numbers

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

Sep 24 '08 #1

Subscribe Reply

2

5504

397

Recognized Expert Contributor

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

Sep 25 '08 #2

3

New Member

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.

Sep 26 '08 #3

Sign in to post your reply or Sign up for a free account.

Similar topics

PyQt(Qt): unexpected scrollbars in QCanvasView

by: Konrad Koller | last post by:

For a card playing game I constructed a layout of 49 playing cards (size of each: x=71, y=96) which are arranged in a 7X7 matrix side by side. Accordingly the pysical size of the Canvas is x=71*7,...

how to hide scrollbars in netscape?

by: adrien | last post by:

Hi, (also posted in netscape.public.mozilla.browser) i use netscape 7 and want to hide the scrollbars of the window when something happens. I tried this: window.scrollbars.visible=false...

IE6, xhtml, scrollbars and you

by: Nobody | last post by:

Okay, you are all so smart in here. Answer me this: IE6 in standards mode doesn't seem to hide scrollbars on the body element (overflow:hide) Ain't this a quandary. I have it in my head that I...

Dynamically showing and hiding browser supplied scrollbars

by: jvb | last post by:

I hope this is the correct place to ask this question. If not, would some kind person tell me where I should? In IE, one can use the javascript code, "document.body.scroll='yes/no'" to dynamically...

how to make the scrollbars always shown?

by: celeluck | last post by:

Is there any way to make them always shown? The VScroll and HScroll seem not working at all. Any one knows why?

Query size of scrollbars

by: felix | last post by:

Hi, I've a UserControl with the property AutoScroll = true. Thus, when child-controls overlap the visible area, the scrollbars are shown. How do I query the size or width of the scrollbars? In...

Unnecessary scrollbars

by: Ernst Elzas | last post by:

Hello, If these questions have been asked numerous times before, please excuse me, I have not managed to find the information I needed. I'm making a webpage (for now it will only be in two...

no scrollbars in div (firefox)

by: juergen.riemer | last post by:

Hi, following code does not render scrollbars in firefox 1.5.x. Bug? Workaround other than to innerHTML an absolute positioned element after loading? <html> <body> <div...

IE7 Scrollbars render inside content area

by: houghm | last post by:

Hello, I'm having a problem and I wonder if anyone can help? I have a div on which I have specified {overflow-y:auto; overflow-x:hidden;}. This div contains a table with a varying number of...

Positioning, Overlap, and greater than 100% height/width

by: Christopera | last post by:

Hello, I have built a site that uses two divs, one verticle, and one horizontal as graphic style for the ite. The problem I am having is that if the browser is resized very small the divs are...

by: marktang | last post by:

ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...

Changing the language in Windows 10

by: Hystou | last post by:

Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...

Problem With Comparison Operator <=> in G++

by: Oralloy | last post by:

Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...

Maximizing Business Potential: The Nexus of Website Design and Digital Marketing

by: jinu1996 | last post by:

In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...

The easy way to turn off automatic updates for Windows 10/11

by: Hystou | last post by:

Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...

Access Europe - Using VBA to create a class based on a table - Wed 1 May

by: isladogs | last post by:

The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new...

Couldn’t get equations in html when convert word .docx file to html file in C#.

by: conductexam | last post by:

I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and...

Windows Forms - .Net 8.0

by: adsilva | last post by:

A Windows Forms form does not have the event Unload, like VB6. What one acts like?

transfer the data from one system to another through ip address

by: 6302768590 | last post by:

Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated ...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.

BYTES.COM © 2024
About Bytes
Terms Of Use
Privacy Policy
Sitemap

Advertise on Bytes
How to Post and Respond on Bytes
How to Promote and Link on Bytes
How to increase your Ranking on Bytes
Become a Recognized Expert on Bytes
Feedback Welcomed! Contact Us