So, you want to create a expandable box, where if the user hovers the top part you show the whole thing, right?
Easy peasy, just set the hidden text display to none, outer_div:hover > div to block and you are all set, right?


I see why you could think that it works. Just because it makes sense, doesn't mean it works.
Don't forget a whole lot of people uses Internet Explorer, and IE will never allow you to have it that easy...

As usual for IE, we must do some css hacks.
Specially 2 things:
1 - to fix the hover around the title text, not only the characters, set the background to something other than transparent.
2 - to be able to hover over the expanded part and not get it hidden, set the height to 100%, but not only to the hover, or it will hide even the title when it is not being hovered

it should look like this:

this css is considering:

your text here

show this message when hovered
there you go, and I just couldn't not make this comment: I HATE INTERNET EXPLORER!


Just talk to them

Today I was having a cors(cross-origin resource sharing) problem.
You see, having a cross domain ajax call can be very important sometimes, but this is blocked for security reasons.
So finally I found out about this guys: http://enable-cors.org/
and their enable cors project.

Ok, this should be perfect, but... how will I change the headers of the response I am getting?
simple: Just talk to them.

Yes, as simple as that, I just sent them an email explaining what was happening and why I wanted that changed. In less than 1 hour, it was done.

Sometimes we overthink about solutions that won't involve the other side, when it should be a matter of a few minutes.

Anyway, thanks profundcom, your support was very helpful.

Ah, this is what is supposed to be in the header:
Access-Control-Allow-Origin: *

in asp.net:
Response.AppendHeader("Access-Control-Allow-Origin", "*");

That's it for now, hope it helps to solve your problems as well.