Home/ Questions/Q 3433492
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-18T07:34:50+00:00

I have a code snippet of a jQuery Dialog which renders differently in Firefox

  • 0

I have a code snippet of a jQuery Dialog which renders differently in Firefox and Chrome. I know it is a CSS issue and I was think the documentation specifies that the ui-dialog-content and ui-widget-content would be responsible but I am clearly misunderstanding something.

The example is:

<html>
<head>
 <link type="text/css" rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/redmond/jquery-ui.css" /> 
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js" type="text/javascript"></script>
 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.min.js"></script>
 <style>
  body {font-size: 8pt; font-weight: normal;}
  span {font-size: 8pt; font-weight: normal;}

  .ui-dialog-content {font-weight: normal; }
  .ui-widget-content {font-weight: normal;}
 </style>
</head>
<body>
 Sample text at 8pt...<br/>
 Line 1:<br/>
 Line 2:<br/>
 Line 3:<br/>
 <input type="button" value="show" onclick="$('#divTest').dialog()"/>
 <div id="divTest" style="width: 700px; height: 400px; display: none;" title="Test">
   Why is this text bold?<br/>
   Line 1:<br/>
   Line 2:<br/>
   Line 3:<br/>
 </div>
</body>
</html>

In Firefox I find the dialog’s content bold-faced which is unwanted. In Chrome I find the content normal-faced but the line spacing has been increased to about 2.

I have tried to over ride the UI content classes but to no avail. Can someone make a suggestion?

Thanks.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I found the answer by using Chrome’s developer tools and Firefox’s Firebug tool. jQuery UI themes override some of the settings. I was able to identify the CSS that was being overridden by studying the effective styling for each element after the jQuery UI dialog box was displayed.

    The CSS I used to correct the display of the dialog content text, and input and select fields is:

    .ui-widget input, .ui-widget select {font-family: arial; padding: 0px 0px;}
.ui-dialog-content {font-weight: normal; line-height: normal; font-family: arial; font-size: 8pt; }
.ui-widget-content {font-weight: normal; line-height: normal; font-family: arial; font-size: 8pt;}

    I hope this saves someone a few minutes.

    • 0