ie7 haslayout: -1 even with zoom: 1

Question

I have anchors with text in them set to 0 opacity and positioned absolutely above images. I want them to partially show on hover with 0.6 opacity with a background color.

In IE 7, the background is non-clickable. I have to hover where the text should be for it to show. The background color does fill the whole anchor which has a fixed width and height.

I tried zoom: 1, but IE7 still says haslayout: -1

a {
    color: #FFF;
    width: 250px;
    height: 113px;
    padding: 30px 15px;
    position: absolute;
    top: 0px;
    left: 0px;
    text-decoration: none;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    -moz-opacity: 0;
    -khtml-opacity: 0;
    opacity: 0;
}

It seems as if the whole anchor is clickable once the text has been hovered over. If my mouse leaves the anchor and hovers over just its background, it won't work.

Could you make a http://jsfiddle.net/ reproduction of the problem? — thirtydot, Aug 15 '11 at 20:44
Nevermind. I solved the problem by giving the anchor a background color initially. — gavsiu, Aug 15 '11 at 20:48

score 1 · Answer 1 · answered Aug 15 '11 at 20:50

1

There is missing

  display: block;

If you do not want to make it block, then width and height makes no sense.

in your code. You can also try to add

 z-index: 10;

answered Aug 15 '11 at 20:50

mkk

7,583
7
46
62

It's already solved. I can't answer my own question for a few more hours and it won't let me delete my question. – gavsiu Aug 15 '11 at 22:26

score 0 · Accepted Answer · answered Aug 18 '11 at 20:05

0

Nevermind. Solved it. Anchor needed background color for background to be clickable.

answered Aug 18 '11 at 20:05

gavsiu

757
5
9
27

ie7 haslayout: -1 even with zoom: 1

2 Answers2