CODEWITHSUNDEEP
htmlcssinternet-explorer-9
LCJ
LCJ

Reputation: 22652

IE9 Rendering Issue - White-space strips (horizontal lines)

I have very simple html as listed below. In Firefox and Chrome it is working fine.. It was working fine in IE8 also. But when I upgraded to IE9, it is displaying a white line inside the gray border.. What do we need to do to make it work similar to Chrome/Firefox.

Note: This issue occurs when reduced the zoom in the range 70%-85%.

Updated Reference

  1. White-space lines in Internet Explorer caused by elements that have layout

HTML

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />

    <style type="text/css">
        .TransactionHistoryborderForTitle {
            border: 3px solid #9B9B9B;
            clear: left;
            width: 976px;
            margin: 0px 0 0px 10px;
        }
    </style>

</head>
<body>
    <div id="body">
        <div class="pageContent">
            <div class="rightPart">
                <div class="TransactionHistoryborderForTitle">
                </div>
            </div>
        </div>
    </div>
</body>
</html>

Screenshot

enter image description here

Upvotes: 2

Views: 1066

Answers (1)

Abhitalks
Abhitalks

Reputation: 28387

The problem seems to have something to do with age old hasLayout problem of IE.

In fact, if you change this markup:

<div class="TransactionHistoryborderForTitle">
</div>

To:

<div class="TransactionHistoryborderForTitle" />

Then, you can see the problem clearly without even zooming.

Normally, this can be easily fixed by adding a zoom: 1;. But in this case, even that is not working.

A possible workaround could be to apply:

display: table-cell;

This will cause the div to behave like a td, and hence a layout like a table cell. I don't really know how exactly this works, but perhaps it allows for collapsing of white-space.

This article discusses the same issue: http://www.table2css.com/articles/white-space-lines-internet-explorer-caused-elements-have-layout

(note: the above link is not working right now)

This another article explains the haslayout overview and also which properties can trigger the haslayout:

http://www.satzansatz.de/cssd/onhavinglayout.html

Hope that helps.

Upvotes: 1

Related Questions