Tool Messages not working in IE

HTML, CSS and anything else that deals with client side capabilities.

Moderator: General Moderators

Post Reply
Pavilion
Forum Contributor
Posts: 301
Joined: Thu Feb 23, 2012 6:51 am

Tool Messages not working in IE

Post by Pavilion »

Hello:

I'm trying to create some popup help/tool messages. They should just pop-up when the user hover's over the anchored button. Following is my CSS

Code: Select all

/* ################ styling for popup messages (tooltips) ######### */
.toolMsg
{
display:none;
color:#754f31;
font-size:18px;
padding:5px;
background-color: #F1EDD7;
margin-left:60px;
border-radius: 5px; 
border:1px solid #754f31;
position:absolute;
}
.anchor:hover + .toolMsg{
display:block !important;
z-index:10;
}
And following is a sample html button that uses the above css

Code: Select all

<td><button id='submitLogEdits' class="navBttnRight anchor">Submit</button><p class='toolMsg'>Submit Edits</p></td>
This works fantastic in Firefox. When a user hover's over the button, then the popup 'toolMsg' shows just as expected.

Then I went to test it in IE and the message is not hidden, even though css is set as follows:

Code: Select all

.toolMsg
{
display:none;
... }
Any thoughts as to why display:none is not working in IE???
Thanks in Advance - Pavilion
User avatar
mecha_godzilla
Forum Contributor
Posts: 375
Joined: Wed Apr 14, 2010 4:45 pm
Location: UK

Re: Tool Messages not working in IE

Post by mecha_godzilla »

Hi,

What happens in IE if you remove the !important declaration? Perhaps the .toolMsg class is automatically inheriting the "display:block" property in IE browsers and overriding the "display:none" property.

Alternatively, take a look at the example on the following site:

http://www.menucool.com/tooltip/css-tooltip

This works in all my old browsers, so should hopefully work in IE without any problems.

HTH,

Mecha Godzilla
Post Reply