lennisLately, we've been experiencing some strange behavior on our WordPress site, which temporarily manifested as css-like problems. I was wondering whether someone might be experiencing similar issues, or know of solutions.
We’re using a slightly re-styled version of rockinbizred-20 theme for this site http://www.lhl.uab.edu/scmla2008/.
Here are the issues:
Main content area (div tag) not displaying background color in Firefox
This issue first appeared a month ago after someone posted a new item to the site. Only Firefox was affected by this error.
The content tag was not rendering properly in the browser. From the output, it seemed as though the tag contained no information, and the text was positioned below the tag.
I inspected the page, and could find no malformed code or formatting errors. Also, I move the site to a test server, but could not replicate this problem in said test environment. As a shot in the dark, I moved the style-sheet code (style.css) to a new location within the page’s header on the live site. This code was moved from above to below the less than IE7 style-sheet code (<!--[if lt IE 7]>).
At the time, this modification seemed to resolve the problem -- even though the latter code was not being included in Firefox browser output. To test whether the error could be re-produced, I restored the code in the page’s header to the original (pre-error) location within the header tag of the index page the following day. For reasons not understood, the page worked with the original page configuration equally well in IE (v6 & v7), Firefox and Safari without any error. To date, we have not experienced this same error.
Header area (div tag) overpowered the main content area in IE6.0
Earlier this week, another issue surfaced after someone posted a new item to the site. This time, only IE (v6.0) was affected by this error.
As in the previous example, the principle tag was not rendering properly in the browser. In this case, the header tag seemed to overpower the main content area, which forced everything down the page by the length of a full screen. I inspected the page’s code, and could find no formatting errors.
While attempting to troubleshoot, I modified the main style sheet (style.css). First, I removed the header id's 'position: relative' tag from the style sheet. This caused the header to shorten slightly, but it was still overpowering the main content area. More strangely, once the scroll bar was used to navigate the page, the header returned to the proper place within the page, and placed black lines through the text. Next, I restored the header id's position tag and set its border to '1px.' Although this change should not have had anything to do with the height setting, the header’s div tag was restored to the original position. In turn, this caused the right-side menu was pushed to the bottom. After some minor adjustments to the main content area properties in style.css, the page was back to normal.
To test whether the error could be re-produced, I restored the style-sheet properties to their original (pre-error) settings. As in the former example, the page worked equally well in IE (v6 & v7), Firefox and Safari and without error. To date, we have not experienced this same error.
Can anyone offer some explanation for this erratic behavior? In both cases, I restored the site to the pre-error settings without reproducing the errors, so both errors seem to have been self-correcting after a few days. Also, we have no reason to suspect a virus on our server. Any information you may have would be most welcomed.
