I have a ribbon at the top of the page which has some DIV inside:
<div id="headerRibbon">
<span id="socialIcons">
<a title="WMED Homepage" href="Default.aspx"><img src="theImages/wmlogo.png" width="219" height="47" alt="WMED Homepage" title="WMED Homepage" /></a>
</span>
<span id="socialIcons2">
<table cellpadding=0>
<tr>
<td id="socialIconTD"><a href="http://www.facebook.com/pages/"><img alt="LikeFacebook" title="LikeFacebook" src="theImages/facebook.png" class="fbClass" width="35" height="35" /></a></td>
<td id="socialIconTD"><a href="http://twitter.com/"><img alt="FollowTwitter" title="FollowTwitter" src="theImages/twitter.png" class="twClass" id="tw" width="35" height="35" /></a></td>
<td id="socialIconTD"><a href="http://www.linkedin.com/"><img alt="ConnectLinkedIn" title="ConnectLinkedIn" src="theImages/linkedin.png" class="liClass" id="li" width="35" height="35" /></a></td>
<td id="socialIconTD"><a href="http://www.youtube.com/user/"><img alt="WatchYouTube" title="WatchYoutube" src="theImages/youtube.png" class="ytClass" id="yt" width="35" height="35" /></a></td>
<td id="socialIconTD"><a href="http://pinterest.com/"><img alt="PinPinterest" title="Pin Pinterest" src="theImages/pinterest.png" class="ptClass" id="pt" width="35" height="35" /></a></td>
<td id="socialIconTD"><a href="https://plus.google.com/"><img alt="+1Google Plus" title="+1Google Plus" src="theImages/googleplus.png" class="gpClass" id="gp" width="35" height="35" /></a></td>
</tr>
</table>
</span>
<span id="tSearch">
<form method="post" action="http://www.google.com">
<input name="" type="text" size="40" placeholder="Search WMED" />
</form>
</span>
</div>
Which works great in IE11/FF/Chrome but not in IE8. In IE8, it seems there is an overlay which is on top of all the icons.
In IE11/FF/Chrome it shows like this, allowing me to click on the social icons and click on the logo on the left and also enter text in the search box:
In IE8 there is an overlay which causes the everything to be below and I am not able to click on any of the social icons/logo or enter any text into the search box:
Here is the CSS:
#headerRibbon {
position: fixed;
background: url('../theImages/bg_80_w.png');
height: 62px;
width: 100%;
z-index: 18;
display: none;
top: 0;
}
#socialIcons {
position: absolute;
top: 20%;
left: 40px;
z-index: 5;
}
#socialIcons2 {
position: absolute;
left: 40%;
z-index: 5;
height: 62px;
top: 20%;
}
#tSearch {
position: absolute;
z-index: -5;
right: 10px;
}
#tSearch input[type="text"] {
background: url(theImages/search-white.png) no-repeat 10px 6px #135C9D;
border: 0 none;
font: bold 12px Arial,Helvetica,Sans-serif;
color: #d7d7d7;
width:150px;
padding: 6px 15px 6px 35px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
text-shadow: 0 2px 2px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
-webkit-transition: all 0.7s ease 0s;
-moz-transition: all 0.7s ease 0s;
-o-transition: all 0.7s ease 0s;
transition: all 0.7s ease 0s;
}
#tSearch input[type="text"]:focus {
background: url(theImages/search-dark.png) no-repeat 10px 6px #187DD2;
color: #FFFFFF;
width: 175px;
-webkit-box-shadow: 0 1px 0 rgba(208, 208, 208, 0.8), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
-moz-box-shadow: 0 1px 0 rgba(208, 208, 208, 0.8), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
box-shadow: 0 1px 0 rgba(208, 208, 208, 0.8), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
text-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
}
If I remove the tSearch span, it shows up just fine.
How do I resolve it?
