Long DIV element within short DIV element issue + DOCTYPE in IE7

Question

need your help please. Facing this issue first time and need your expertise.

The code is

<div style="overflow:hidden;cursor:pointer;width:100%">
    <div id="ScrBar" style="position:relative;width:16000px">
        This is the text alksdjflask d;alskdj fl;aksjd f;laksdjf l;kasjdf ... -----> long line

    </div>
</div>

This is IE7-related! Can not test on other versions of IE. In Chrome and FF works ok.

if I do not put DOCTYPE at the beginning of the html file, the first DIV ends at the right end of the screen, and inner DIV is "cut" at this point. No horizontal scroll bar.

If I put DOCTYPE (no matter transitional or strict), then outer DIV gets full width of the inner DIV. Window has long long horizontal scroll bar.

Well, I can not understand what is the problem (in terms of technical terms rather than what I see on the screen) before even going to research how to fix it.

Thank you!

Edit: further testing showed that with IE8 and local copy of the file it displays as expected, but with IE8 and file uploaded to the server (apache) it does not display as expected with long horizontal scroll bar!

http://stackoverflow.com/editing-help – Matt Ball Mar 02 '13 at 18:05 — Matt Ball, Mar 02 '13 at 18:05

score 0 · Answer 1 · edited May 23 '17 at 11:49

0

Omitting a DOCTYPE causes the browser to enter quirks mode. http://webdesign.about.com/cs/doctype/a/aaquirksmode.htm

You should always include at least the HTML5 doctype.

edited May 23 '17 at 11:49

Community

1
1

answered Mar 02 '13 at 18:06

Matt Ball

354,903
100
647
710

That's great idea, but I actually _get_ problems when put this tag in. How to have this DOCTYPE stuff in and have desired behavior of having outer DIV ending at the right border of the browser window? – Anonymous Mar 02 '13 at 18:14
Can't help you there, sorry. All I know is that IE 7's box model is horribly broken and I avoid IE like the plague. – Matt Ball Mar 02 '13 at 18:21
Ok, if you have newer version of IE can you put this code above (having very long line of text) to the browser and see if it exhibits the same behavior with and without DOCTYPE? – Anonymous Mar 02 '13 at 18:40
I found one machine with IE8, and it seems to behave as expected with DOCTYPE present! So seems Matt is right and it is a bug of IE7! – Anonymous Mar 02 '13 at 18:46
I don't have _any_ version of IE, sorry. – Matt Ball Mar 02 '13 at 18:49

score 0 · Answer 2 · edited May 23 '17 at 12:27

Please see this answer by Neils. And like Matt and others mentioned you should always use a doctype.

"It is a well-known bug in IE6 and IE7. To solve it, you need to add position:relative to the container. Since in your case body is the container, I'd suggest you add a div directly under the body and give it position:relative. It should solve your problem."

IE6 + IE7 CSS problem with overflow: hidden; - position: relative; combo

Long DIV element within short DIV element issue + DOCTYPE in IE7

2 Answers2