Opened 13 years ago

Closed 13 years ago

#1296 closed defect (invalid)

Tooltip in Firefox not using default CSS

Reported by: marc Owned by: bill
Priority: high Milestone: 0.9
Component: Widgets Version: 0.3
Keywords: Cc: marc.saliba@…
Blocked By: Blocking:

Description

I have a customized version of the default dojoTooltip style in my stylesheet. In IE, I have no problem. The attributes are picked up fine. Firefox doesn't seem to pick them up though and the text appears with no borders or background.

If I specify within the table attribute it works but then in IE, it displays one table within the other - the table properties AND the default Tooltip properties.

I'll attach pictures of the same tooltip in both IE and Firefox.

Attachments (2)

menu_ie.bmp (119.0 KB) - added by marc 13 years ago.
The Tooltip correctly displaying in IE
menu_firefox.bmp (107.3 KB) - added by marc 13 years ago.
The same Tooltip in Firefox

Download all attachments as: .zip

Change History (6)

Changed 13 years ago by marc

Attachment: menu_ie.bmp added

The Tooltip correctly displaying in IE

Changed 13 years ago by marc

Attachment: menu_firefox.bmp added

The same Tooltip in Firefox

comment:1 Changed 13 years ago by dylan

Milestone: 0.5
Priority: highestnormal
severity: criticalnormal

comment:2 Changed 13 years ago by bill

Cc: marc.saliba@… added

Please attach a testcase. (And also see http://manual.dojotoolkit.org/WikiHome/DojoDotBook/Book45 for instructions on customizing widget look and feel)

comment:3 Changed 13 years ago by marc

Here is the code snippet in the jsp file which points to the stylesheet (style.css):

<td class="Topnav pad1" colspan="2">
   <img id="theImage" 
        src="<root>/button.gif" 
        width="137" 
        height="20" 
        vspace="0" 
        border="0"
        onMouseOver="this.src='<root>/buttonClicked.gif'"
        onMouseOut="this.src='<root>/button.gif'">
   </img>
   <div dojoType="Tooltip" 
	connectId="theImage"
	id="myMenu"
	href="<root>/file.jsp" 
	cacheContent="false"
	executeScripts="true"
	hideDelay="1000"
	templateCssPath="<root>/style.css">
   </div> 
   <script>djConfig.searchIds.push("myMenu");</script>
</td>

...and here is the over-riding class description for the Tooltip within style.css:

.dojoTooltip {
   border-top: solid #EFEBDE 2px;
   border-left: solid #EFEBDE 2px;
   border-bottom: solid #736D63 2px;
   border-right: solid #736D63 2px;
   background: #A6BBCC;
   color: black;
   position: absolute;
   font-size: xx-small;
   font-style: italic;
   text-decoration: none;
   z-index: 10;
   padding: 5px 5px 5px 5px;
   display: block;
}

comment:4 Changed 13 years ago by bill

Resolution: invalid
Status: newclosed

Your CSS definition doesn't necessarily override the default dojo one. Please follow the instructions in the link I gave above to give your rule precedence (in this case make the pattern "body .dojoTooltip".) and I think it will work for you.

Note: See TracTickets for help on using tickets.