Home/ Questions/Q 322683
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-12T08:57:41+00:00

Let me explain the problem: Various pages of my web application contain jQuery UI

  • 0

Let me explain the problem:

Various pages of my web application contain jQuery UI tabs which display a jqGrid on one of their tab pages. Each of these jqGrids has several buttons (Add, Edit, etc) in its Navigation bar. The issue is that when the user hovers over one of the buttons, the text for each button in the navbar moves approximately 1 pixel to the right and 1 pixel down.

This is only happening with jqGrids inside tab pages – buttons on other grids in the application work just fine (IE, the button text does not move when the user hovers over the button).

I have added code to the tab show() event to only initialize a jqGrid when the tab page is displayed for the first time, instead of just initializing the jqGrid in the ready event. But this does not seem to have any effect.

Any ideas?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Finally tracked this down to a syntax error in the HTML Document Type Definition. The DTD was missing its URI:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

    The browser uses a “quirks” mode to emulate rendering bugs in older browsers if the URI is omitted. Correcting the doctype to the below fixed the pixel shift:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

    Perhaps someone else will find this useful. This had been driving me crazy!

    • 0