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:
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).
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:
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.