CODEWITHSUNDEEP
cssinternet-explorer-9right-to-left
Lea Cohen
Lea Cohen

Reputation: 8200

Background shows to the right of the border in IE9

I have a div with a background-color, and a 3 pixel white border.

When I set the html element to direction:rtl and overflow-y: scroll, I get a pixel of the background to the right of the border - only in IE9:

enter image description here

I'm pasting my code here, because on JsFiddle I can't replicate the bug.

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <style>
            html {
                overflow-y: scroll;
                direction:rtl;
            }
            .main {
              margin: 0 auto;
              width: 960px;
            }
            .sld-menu-item {
                height: 85px;
                border: 3px solid #fff; 
                background-color: #d25188;
            }
    </style>
</head>
<body>
    <div class="main" role="main">
        <div class="sld-menu-item sld-menu-item-2">
        </div>
    </div>
</body>

Has anyone run into this problem, and/or can someone suggest a solution? I can't give up the scroll and rtl rules...

Upvotes: 0

Views: 167

Answers (2)

Tal T
Tal T

Reputation: 11

I banged my head against the wall for several hours, at the end I solved it in a very strange way... Change the width of .main to 961px, it seems that Microsoft does not know how to find the "middle" of an even range.

Upvotes: 1

Bogdan Rybak
Bogdan Rybak

Reputation: 2117

I was only able to fix it by setting overflow: hidden on containing element and doing a negative margin hack:

.main {
    overflow: hidden;
}
.sld-menu-item {
    margin-right: -1px;
}

You might also want to set width of sld-menu-item to 961px then. Can probably put this in an IE9 conditional statement. I hope there's a better way of solving this though.

Upvotes: 1

Related Questions