No proper solution for IE clickability over background image

Question

I have done everything I could to make a decent web page validated with W3C validator etc and tried to make a responsive design and did all i could to enhance SEO onsite and off site. But all my efforts go down the drain with stupid IE ! I am using IE 8 now. How I wish internet bans IE for its various vagrancies !

My problem is I am not able to get a solution for clicking on elements laid over a div background image. Whether I use background color or not. If I use -ms-filter with opacity, the div disappears !

Somebody please give a proper solution ! I have tried posting the issue in another question. I just got one suggestion that did not work. Hence I am trying again.

My code

HTML

<div id="header">
<h1 style='float:left;margin-left:20px;color:white;font-family:verdana'>Landshoppe</h1>

                <div id="smshare">
                        <img src="share.png" width="20" height="20" alt="Share on Social Media">
                            <div id="smp"></div>
                </div>
        <div style="clear:both"></div>

            <div class="header-small-image">
                <img src="images/bldg1.jpg" width="180" height='170' alt="Landshoppe"><br>
                <div  style="font-size:bold;text-align:center;margin:1px;width:100%">Landshoppe</div>
                <div style="clear:both"></div>
            </div>


        <div class="opaq">

                <a href="blogs" title="Search Property On landshoppe">BLOGS</a>
                        <a href="homeloans" title="Search Property On landshoppe">LOANS</a>
                        <a href="search-properties" title="Search Property On landshoppe">SEARCH PROPERTY</a>
                        <a href="post-listing" title="Free listing on Landshoppe">FREE LISTING</a>
                </div>


                        <?php include('searchbox.php');?>

        <div style="clear:both"></div>

 </div>

CSS

#header{background:url('images/Thane2.jpg') no-repeat;background-   size:cover;-webkit-background-size:cover;-moz-background-size:cover;-o-   background-size:cover;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/Thane2.jpg  ',sizingMethod='scale') no-repeat;-ms-        filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/Thane2.jpg',sizingMethod='scale') no-repeat;height:350px;border:1px solid black;margin-bottom:30px;}
#header h2{font-size:35px;color:white;text-align:center}
#searchbox{text-align:center;padding:5px;width:60%;margin:0px auto;margin- top:20px;z-index:5}
#searchbox input[type=text]{width:80%;padding:10px;font-size:25px;border-    radius:1px;float:right;height:30px;margin-right:2px;border-radius:5px}
#searchbox input[type=submit]{float:right;
background: url("images/searchicon2.jpg") no-repeat;background-size:cover;-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/searchicon2.jpg',sizingMethod='scale') no-repeat;-ms-filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/searchicon2.jpg',sizingMethod='scale') no-repeat;
width:55px;
height:51px;
border:none;border:1px solid whitesmoke;
cursor:pointer;
padding:0px;
border-radius:0px;-webkit-border-radius:0px;-moz-border-radius:0px;-0-border-radius:0px;;

 }

My site is www.landshoppe.com

Do you want to be able to click through the overlaying background image? css pointer-events: none; for that div should work, as mentioned here: http://stackoverflow.com/questions/4822234/make-overlay-background-click-through-able — Arathi Sreekumar, Aug 01 '16 at 09:54
@Arathi, I have a background-image in a div. Then, in the div I have clickable elements which are not clickable. I am updating the question with the code.. — user3526204, Aug 01 '16 at 10:08
Unless your elements are having an z-index or an overlay preventing them from being clicked, I don't see how a parent containers background should affect a child elements clickability. Though I cant make out which elements you are referring to from your code either. — Arathi Sreekumar, Aug 01 '16 at 11:30
If you see my page at http://www.landshoppe.com , you will see in the header area there are four menu links (blogs,loans, search property and free listing) on the left vertically, one search box in the middle and an image of the right. The right and left ones are floated. I am not able to click on either the menu links on the left or the search box in the middle. I have added the image in my question. — user3526204, Aug 01 '16 at 12:14

score 0 · Answer 1 · answered Aug 01 '16 at 13:08

0

Your header element has pointer-events: none; set in the css.

#header {
    ...
    pointer-events: none;  //remove this line
}

Remove pointer-events: none; from header and then click events will work within it.

Also this issue isn't IE specific. Didn't work for me in Chrome either. pointer-event: none makes that element and its child elements not clickable, and clicks to fall through to the underlying element.

answered Aug 01 '16 at 13:08

Arathi Sreekumar

2,544
1
17
28

The pointer events was put there as an experiment becoz somebody had suggested as a remedy ....I have removed it. But still no go ! IE refuses to give in ! – user3526204 Aug 01 '16 at 14:58
It works for me in ie11, and when emulating ie8 in ie11 as well. Try clearing your cache in IE. – Arathi Sreekumar Aug 01 '16 at 15:09
There are javascript errors when going to those pages however. – Arathi Sreekumar Aug 01 '16 at 15:24
I have cleared my cache....still same...were you able to click on the links and search input field ? I tried testing on a site netrenderer but it doesn't work on 8 and the higher versions are rendering my mobile CSS version ! Anyway, thanks for the efforts Arathi. I guess since it is working at your end, I will need to figure out whats wrong at this end... – user3526204 Aug 01 '16 at 15:26
Yes, It was going to the pages for the links and search is also working. But I tried on IE Edge, with IE8 document mode set through emulation. Don't know if that makes a difference. – Arathi Sreekumar Aug 01 '16 at 15:29
Hmm....am not good at this front end....am a bit more of a php guy..(that too all this is self taught). So i may have made some mess up some where in the code ..unless this is an inherent IE issue... – user3526204 Aug 01 '16 at 15:32
The pointer: none should have been the issue. Can't see anything else that is going wrong and its working for me here, means your live site works. If the issue is local, it might be environmental. Well, good luck solving it. – Arathi Sreekumar Aug 01 '16 at 15:40
For me even the live site doesn't seem to work ! :( Anyway thanks again :) – user3526204 Aug 01 '16 at 16:01
I got the solution. Do check my answer. – user3526204 Aug 02 '16 at 09:28

score 0 · Answer 2 · answered Aug 02 '16 at 09:23

0

@Arathi, I found a solution by putting all the events inside the div into another within this div and making its position:absolute. Now it works ! Though I have some issue in mobile responsive design. Guess I will tackle that as next level :)

answered Aug 02 '16 at 09:23

user3526204

509
5
22

No proper solution for IE clickability over background image

2 Answers2