CODEWITHSUNDEEP
htmlcssinternet-explorerweb
i2ijeya
i2ijeya

Reputation: 16430

Compatibility issue between IE7 and IE8

I have a CSS which will display the content only with vertical scroll bar and not the Horizontal scroll bar.

My CSS is,

div.rightSide {
display: inline;
float: right;
height: 234px;
margin: 5px 0;
overflow-y: auto;
position: relative;
vertical-align: middle;
visibility: inherit;
width: 300px;
z-index: 6;
}

It works as expected in IE8 and Mozilla 3.6, but when I test the same in IE7, vertical scroll bar is also getting displayed. So what should i want to do in order to overcome this issue?

EDIT

Adding my HTML code.

<body>
    <div>
        <div id="contentColumn">
            <div class="overviewPage">
                <div class="instructionContent" id="sample_id">
                    <div class="overviewBackground" style="z-index: 3;">
                        <p class="sidebar_body">
                            <img align="center" border="0" height="244"
                                src="../images/product/sample.jpg" width="752" />
                        </p>
                    </div>
                    <div class="rightSide">
                        <div class="unitOverview">
                            <p class="body">
                                <span class="bold">Unit 1 Overview</span>
                            </p>
                            <div class="sectionContents">
                                <div class="subhead_pri"> 
                                <!-- My title goes here -->
                                </div>
                                <div class="sectionBody" style="overflow:hidden;width:100%">
                                    <p class="body"> 
                                    <!-- My content Goes here -->
                                    </p>
                                </div>
                            </div>
                        </div>
                        <div class="vendor">ID: vendor1</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

Thanks, Jeya

Upvotes: 1

Views: 384

Answers (3)

root
root

Reputation: 2356

By default IE7 treats your container as if it had overflow: auto. You need to tell it otherwise. try adding overflow: hidden before overflow-y: auto, helped in my case.

Upvotes: 0

n8wrl
n8wrl

Reputation: 19765

Experiment with your content. overflow-y:auto means 'only show a vertical scrollbar if you have to.' Apparently IE7 thinks your content is tall enough that it needs the scrollbar.

Upvotes: 0

cgwebprojects
cgwebprojects

Reputation: 3482

Add overflow-x: hidden; to your css as well.

Upvotes: 1

Related Questions