Hello,
I've got an issue with a div, on a site i'm creating. It works as it should, or as I think it should in Firefox, Opera, Safari and Chrome on XP. The problem appears in IE8.
I googled and searched around forums but couldn't find anything.
I need this div to take the size of the div that contains it, because I created a function for the onmouseover event, that should make it appear through opacity change. Instead, it takes the size of the div that it has inside it.
However, if I set the background-color for that div to any color, it works as it should.
Here's the html:
<div id="container-chenar-navigare" onmouseover="arataNav(event);" onmouseout="javascript:ascundeNav(event);">
<div id="chenar-navigare">
<a name="adrStanga" href="javascript:incarcaImg('st');">
<img id="stanga" src="resurse/nav_stanga.png" alt="buton de navigare slideshow - stanga" />
</a>
<a id="adrStartStop" href="#">
<img id="startStop" src="resurse/nav_pauza.png" alt="buton de navigare slideshow - pauza" />
</a>
<a name="adrDreapta" href="javascript:incarcaImg('dr');">
<img id="dreapta" src="resurse/nav_dreapta.png" alt="buton de navigare slideshow - dreapta" />
</a>
</div>
</div>
and here's the css:
div#container-chenar-navigare {
position: absolute;
display: block;
left: 0px;
bottom: 0px;
width: 452px;
height: 37px;
overflow: visible;
-moz-opacity: 0;
opacity: 0;
filter: alpha(opacity=0);
-khtml-opacity: 0;
visibility: visible;
}
div#chenar-navigare {
position: absolute;
top: 8px;
left: 193px;
width: 68px;
height: 21px;
overflow: visible;
-moz-opacity: 0;
opacity: 0;
filter: alpha(opacity=0);
-khtml-opacity: 0;
visibility: visible;
}
#chenar-navigare img {
position: relative;
display: inline-block;
width: auto;
height: 21px;
margin: 0 6px 0 6px;
-moz-opacity: 0;
opacity: 0;
filter: alpha(opacity=0);
-khtml-opacity: 0;
visibility: visible;
overflow: hidden;
}
The div I'm talking about is the one with the ID: container-chenar-navigare.
You can see the issue I'm having at this address: http://tetchea.mediapixel.ro
Put the mouse over the bottom of the image and a transparent box with three buttons should appear in any browser other than IE8 (don't try it in IE7 or lower because I didn't adapt it for those versions yet).
Thanks in advance for any help.