Question

I have names displayed vertically. Basically this is the structure of my html page.

<div>                                  <div/>
  <a>name<span>Details</span></a>          <a>name<span>Details</span></a>      
  <a>name<span>Details</span></a>         <a>name<span>Details</span></a>
</div>                                 </div>

So each “a” tag contains a name and span tag contains details about that name. The display attribute of the span tag is set to “none” to start and is changed to “block” when mouse is hovered over “a” tag content. The problem is the span tag content gets chopped off in IE8. Works fine in Firefox and chrome.

My CSS file:

#tooltip1 { position: relative; }
#tooltip1 a{text-decoration: none; color:#000000;} 
#tooltip1 a span { display: none; color: #FFFFFF; }    
#tooltip1 a:hover span { display: block; position: absolute; 
                         background-color: #aaa; color: #FFFFFF; 
                         padding: 5px; height: 10px; 
                         width:500px; } 

I have my mouse over “OMA” in this picture, and instead of showing “OMAHA NEBRASKA”, it only shows “OMAHA” What can I do for IE to show all the text? I have tried working with the “overflow” attribute but it didn’t work.

This is the link to jsfiddle which has all the codes if want to take a look
http://jsfiddle.net/7s4Np/10/

Answer 1

The problem was with the css of the class .container which was applied to the div tag. Although my question here doesn’t show the div applying .container class, it shows that in the jsfiddle link that I posted.

This is where the problem lied:

.container {width: 100px; float: left; overflow: hidden; padding: 10px;}

I deleted the “overflow: hidden” attribute and it worked like a charm.

In my previous attempt to solve this, I had applied “overflow: visible” to the child element(span tag). Isn’t the value(overflow: visible) in the child element supposed to over the value(overflow: hidden) defined in the parent element?

Anyway thank you all you guys for your time.