Menu
Bottom border moves down and down again in IE9 when hovering/unhovering the button:
<!DOCTYPE html>
<html>
<head>
<style>
.btn:hover {
box-shadow: 0 0 0 2px #b1b3b4;
}
</style>
<head>
<body>
<div style="overflow: auto; border: 1px solid black;">
<div style="width: 110%; height: 20px;">
Wide content causing horizontal scrolling....
</div>
<button class="btn">Hover Me</button>
</div>
</body>
</html>
Fiddle: http://jsfiddle.net/WW3bh/6353/
Is it a known IE9 issue? How do I work that around?
977
The border-bottom property is a shorthand property for (in the following order): border-bottom-width border-bottom-style border-bottom-color
So, adding a border to a box, is pretty simple when you use the border property. Let's start a first basic example by drawing a small square and adding a red border to it. I volontarly add some content to the div, with a small padding in it, it'll be necessary for the next of the article:
This is an illustration that in CSS, you have so many possibilities. Using border is simple and can answer the majority of your use cases but sometimes, there will be cases like the one above where you'll need something better and box-shadow could resolve your problems.
When the user hovers the button, there is an animation with kind of a shadow that goes through the button. Let’s see the example. In this example, you could see the button on the dark background, and when you hove the button, you can see the shiny line going through the button. Load button hover effect
Put display:block at the .btn:hover.
Guess that will fix it!
.btn:hover {
box-shadow: 0 0 0 2px #b1b3b4;
display:block;
}
Option 1:
Setting a height for the scrollable div seems to solve the problem:
Working Example 1
<div style="overflow: auto; border: 1px solid black; height:65px;">
<div style="width: 110%; height: 20px;">Wide content causing horizontal scrolling...</div>
<button class="btn">Hover Me</button>
</div>
Option 2:
Use overflow-x:scroll; rather than overflow:auto;:
Working Example 2
<div style="overflow-x: scroll; border: 1px solid black;">
<div style="width: 110%; height: 20px;">Wide content causing horizontal scrolling....</div>
<button class="btn">Hover Me</button>
</div>
Probably the best option as it allows the box-shadow to be visible in IE9.
Wrap the button in a div with class .btn rather than placing the class directly on the button.
Working Example 3
.btn {
display:inline;
}
.btn:hover {
display:inline-block;
border-radius:2px;
box-shadow: 0 0 0 2px #b1b3b4;
}
<div style="overflow: auto; border: 1px solid black;padding:2px;">
<div style="width: 110%; height: 20px;">Wide content causing horizontal scrolling...</div>
<div class="btn">
<button>Hover Me</button>
</div>
<div class="btn">
<button>Hover Me</button>
</div>
<div class="btn">
<button>Hover Me</button>
</div>
</div>
Option 4:
Just for laughs...
Working Example 4
<!--[if IE]>
<div id="noIE"><a href="http://www.mozilla.org/en-US/">Please download a Real Browser!</a>
<br><sub>Internet Explorer is hateful non-compliant browser that kicks puppies... </sub>
</div>
<![endif]-->
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
