CODEWITHSUNDEEP
htmlcssinternet-explorergoogle-chrome
Gaara
Gaara

Reputation: 2187

Difference in displaying inner div between IE and Chrome

I have this code that has one "outerDIV" that contains an "innerDIV". On chrome the "innerDIV" size is 491px, whereas on IE it is 425px (same as outerDIV). Hence, on Chrome I can see the first two children of "innerdiv": "My test string #1" and "test2". But for IE I can only see the first child.

I am not quite sure what the "right" behavior should be, as firefox does the same as IE. However I would like to have IE do the same as Chrome.

I have been experimenting with some css styles (mainly overflow and display), but still can't make it right: IE will expand its height instead of its width to make the elements fit.

Can you guys help me figure out a way to change the css so that IE will wraps the div elements inline? As a restriction though, I cannot change the width on the HTML. As a benefit, I am using a css that only loads for IE to patch these kind of IE inconsistencies. The same css will NOT load for chrome, so I don't need to worry about messing with chrome when changing the IE CSS. Thanks in advance!

<html>
    <head>
    <style type="text/css">

        <!--

            body {
                font-family: helvetica;
            }


            .myContainer {
                overflow: hidden;
                border: 1px solid rgba(0, 0, 0, .5);
                font-size: 14pt;
                height: 49px;
                line-height: 49px;
                overflow: hidden;
                display: block;
            }

            .myContainer > DIV {
                float: left;
                white-space: nowrap;
                display: block;
            }

            .myContainer .item:first-child {
                padding-left: 10px;
            }

            .myContainer .item {
                float: left;
                padding-right: 32px;
            }

        -->

    </style>

    </head>

        <body>

            <div id="outerDIV" class="myContainer" style="display: block; width: 425px;">
                <div id="innerDIV">
                    <div class="item">
                        --------My test string #1--------
                    </div>
                    <div class="item">
                        ------test2-------
                    </div>
                    <div class="item">
                        test
                    </div>
                </div>
            </div>


        </body>
</html>

Upvotes: 2

Views: 2731

Answers (3)

Gaara
Gaara

Reputation: 2187

I could not solve it purely with css. For IE, seems like the only way to fix this is to have the "innerDIV" element to have a width >= the sum of it's children offsetWidth. So I just added this to my JS code (special case for IE): 

var len = innerDiv.childNodes.length,
          innerDivWidth = 0,
          i;

 for(i = 0; i < len; i++){
    innerDiv += innerDiv.childNodes[i].offsetWidth;                                             
 }

 innerDiv.style.width = (innerDiv + 1) + 'px';  //Safety measure to make up for the decimal places. I guess we could write this line in a better way by rounding up, etc.

Upvotes: 0

Reflective
Reflective

Reputation: 3917

set the width of .item ... container overflow: hidden hides the items which are shown verticaly because the width is more than a 'line' of container can show. When using floating is good to have the width set. DOCTYPE is very important to be set too. I personaly use loose.dtd which gives good competability.

Upvotes: 0

Guffa
Guffa

Reputation: 700362

You need a doctype tag on your page, otherwise it will be rendered in quirks mode.

What that means exactly differs from browser to browser, but basically it tries to be compatible with very old browsers. In IE it triggers the non-standard box model, which would explain the differences in size.

Look at the W3C recommended list of doctype declarations for a doctype tag to use.

Upvotes: 3

Related Questions