seo Question posted in
Some basic information to get you started with this can be found here.

No proper solution for IE clickability over background image – SEO

enter image description hereI 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

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    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 :)


  2. 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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search