IE8 collapsing div if no background-color is set

This site is best viewed in a modern browser with JavaScript enabled.

IE8 collapsing div if no background-color is set

cc8277

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.

cc8277

I found a solution for my problem.
Inside the div I thought was the problem (container-chenar-navigare) there is another div (chenar-navigare) that contains three images with <a> tags wrapped around them.
The chenar-navigare div, was absolutely positioned with left, top, width and height values set. So was/is the container-chenar-navigare div.
I only changed the css definition for the chenar-navigare div. Here's what I changed:

position: relative;
padding-top: 8px;
padding-left: 193px;
width: auto;
height: 100%;

I couldn't use margin: 0 auto to center chenar-navigare because the three images where all displayed inline and that made them go left. So I used padding-top and padding-left to position it where it should stay. I used padding and not margin because the space it leaves it's considered inside the div and it reacts to the onmouseover event, as I needed it to do.

Hope this helps someone else too.