Home/ Questions/Q 8429223
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-10T05:16:32+00:00

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

  • 0

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…

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0