I'm in the process of developing a website and I'm facing some issues specifically with IE8 or later versions.
For reference, here is a temporary link to the site: .
1
The problems I am encountering are as follows: The login/register form displays a black rectangle instead of transparency.
Here is the CSS style causing the issue:
#LoginPart
{
background-image: url('../images/login_bg.png');
float: right;
width: 184px;
height: 25px;
margin-top: 10px;
margin-right: 100px;
text-align: center;
}
Aesthetically, the background looks somewhat unattractive.
2
The menu highlights don't appear as intended on IE8, even though they work fine on other browsers.
Below is the CSS code snippet:
<div id="Menu">
<ul id="Navigation">
<li><a href="#home"><div class="HighlightItem"></div><span>Home</span></a></li>
<li><a href="#vending"><div class="HighlightItem"></div><span>Vending machine</span></a></li>
<li><a href="#videos"><div class="HighlightItem"></div><span>Videos</span></a></li>
<li><a href="#about"><div class="HighlightItem"></div><span>About</span></a></li>
<li><a href="#contact"><div class="HighlightItem"></div><span>Contact</span></a></li>
</ul>
</div>
Navigation:
#Navigation
{
margin:0;
padding:0;
text-align:center;
list-style:none;
height: 50px;
}
.HighlightItem
{
width: 142px;
height: 50px;
position: absolute;
display: none;
background:none;
}
#Navigation span
{
position: relative;
text-align: center;
top: 40%;
font-size: small;
z-index: 5000;
font-weight: bold;
text-shadow: 1px 0px 0px #000;
}
The text inside the span element serves as the menu content. I set z-index: 5000 to ensure it hovers above the transparent div.
Additionally, here's the JQuery code used for animating the menu:
$('li>a').hover(function(){
$(this).children('div').stop();
$(this).children('div').css({opacity: 0});
$(this).children('div').css('background-image', 'url("../images/but_hov.png")');
$(this).children('div').css('background-repeat', 'no-repeat');
$(this).children('div').css('background-position', 'center center');
$(this).children('div').fadeTo(400, 1.0);
}, function(){
$(this).children('div').stop();
$(this).children('div').fadeTo(400, 0, function() {
$(this).children('div').css('background-image', 'none');
$(this).children('div').hide();
});
});
I would greatly appreciate any assistance in resolving these issues!