FF & Chrome vs MS Edge button mouseover issue
Posted: Fri Jun 24, 2016 7:07 am
Hi All.
I am not very well informed as to the plethora of differences of how browsers render elements, so i could use a little help with this one.
On this page: http://www.modh.co.za there are two "buttons", but they are just regular links with styling. In Firefox and Chrome the mouseover event triggers (ie the colour change and pointer change) correctly, but in MS Edge it only activates on a small area of the button.
Button code:
CSS:
Is there anything obvious, or do i need to delve deeper?
I am not very well informed as to the plethora of differences of how browsers render elements, so i could use a little help with this one.
On this page: http://www.modh.co.za there are two "buttons", but they are just regular links with styling. In Firefox and Chrome the mouseover event triggers (ie the colour change and pointer change) correctly, but in MS Edge it only activates on a small area of the button.
Button code:
Code: Select all
<div class="child">
<h1>MODH DESIGN</h1>
<a href="http://www.modh.co.za/arch" class="button">
<i aria-hidden="true" class="fa fa-lg fa-home"></i> ModH Architecture
</a>
<a href="http://www.modh.co.za/web" class="button">
<i aria-hidden="true" class="fa fa-lg fa-desktop"></i> ModH Websites
</a>
</div>
Code: Select all
.landing a {
display: inline;
font-family: Helvetica,"Open Sans",sans-serif;
font-size: 16px;
pointer-events: auto !important;
text-decoration: none;
}
.button {
background: #000 none repeat scroll 0 0;
border-radius: 10px;
color: #fff;
margin-right: 40px;
padding: 30px;
text-align: center;
}