Hover ie changes height span

[terrorzone]

I have created 2 buttons (green and red at the right side on the homepage), http://www.adaptics.nl, with span tags. I’ve set a transparancy on the hover state, it works perfectly in chrome. But in ie it changes only once the height of the button. I don’t want to give the button a height because of the responsiveness of the button.
Does anyone know how I can fix this?

Thanks!

[Merri]

It looks like you’ve hit some bug that has been fixed in IE10. The bug appears in IE8 and IE9.

You can fix the bug by removing bottom margin from #contacticonen. You should also fix those ids to be classes, you must never have two of the same id on the same page. Id is intended to be unique.

[paulob]

What Merri said above :)

#mail img, #bel img{margin:0 20px 0 6px}

and fix those id’s.

The bottom margin pushes the parent container down when it shouldn’t and is actually caused by the proprietary IE opacity filter which takes over the element (much like haslayout of old) and clears the floated image and then taking into account it’s bottom margin.

Indeed if you had cleared the floats correctly then all other browsers would apply that bottom margin also!

Note that the filter causes IE9 problems also but IE9 doesn’t actually need the filter because it understands css3 opacity. Therefore when using proprietary IE filters it’s best apply them only for the browser versions that need them rather than giving it to all and breaking IE9 in the process.

[terrorzone]

Wow thanks for the quick replies! This works fine.
And thanks for the tips!

I will fix the id’s later.

[Author]

Posts