Question

I am facing a strange issue. I have a web application(developed in struts) and have 2 web pages, which are showing data in tabular format.

In the table, the header row has a background image so that the header would be distinguishable.

Now the issue is that the background image shows up in page A but does not show up in page B.

Some inputs :

1) The background is handled by CSS and same CSS class is used in both pages. Here is the class :

#reportArea table tr.tr-row-7 {
  background: url(../images/red-bg.png) repeat !important;
  position: relative;
  z-index: 100;
  height: 36px;
  width: 100%;

}

2) I have checked with firebug Net monitor and found that red-bg.png is successfully loaded on both the page with HTTP code 200 OK

3) The data is loaded by an ajax function.

4) The class name tr-row-7 has given to row dynamically using jQuery. The function is something like this

$(document).ajaxComplete(function(){
  $("#reportArea table tr", this).each(function(i){$(this).addClass("tr-row-" + i);});
});

Both the pages using the same jQuery (ajaxComplete()) for row class assignment. Still page B is not able to show image in the background

Any ideas?

Answer 1

Finally got this working. Actually, it was CSS/jQuery combined issue, from the long list of operations, jQuery was adding few parents to this table and that was causing the issue.

Due to this, the position of the image was disturbed and was displayed in out of page area.

Thank you all for your answers/comments, they got me working!