WordPress Theme Displaying Incorrectly In Chrome

Question

I'm having a problem with http://taxlienagents.com/ and how it is displaying in Google Chrome. When I open the site in Google Chrome, the center Tab Area seems to cover the main text above it. If you take a look at this link , you should be able to see what I am talking about versus when opening the site in FireFox. I tried playing around with the Z-Index, but that didn't seem to fix it. The other issue that I seem to be having is with rolling over the buttons ("How to," "Coaching," and "Done for You") the highlight only covers about 2/3 of the button, I think this is an issue with FancyBox.

If anyone could give me any advice on how to fix this, it would be much appreciated.

Answer 1

you have several JS related errors :

• 1 You load jQuery 2 times, in 2 different versions (one on-site, one from google)

--> remove one of them

• 2 you have an error in adia-paper.js that keeps Fancybox from triggering right - and it blocks the JS execution.

--> try to change

$(document).ready(function() {

   $("#form-trigger").fancybox({
    'width'             : 600,
    'height'            : 526,
.....

to

jQuery(document).ready(function() {

    //contact form modal window
   jQuery("#form-trigger").fancybox({
    'width'             : 600,
    'height'            : 526,
    'autoScale'         : true,
    'transitionIn'      : 'fade',
    'transitionOut'     : 'fade'

• 3 you trigger fancybox on a non-existing DIV (#form-trigger)

  --> although it is not the major cause for your problem , it is better to trigger JS only when needed...

Jquery - when encountring a big issue, blocks and stops from executing any functions further down the line, and your "slideshow" is also JS driven . Different browsers treat those errors differently - and it is also depending on your own browser settings.

FF - Firebug Chrome and Opera all give the same consul errors.

If you fix all those problems and the problem persist - we can keep on de-bugging - but I am pretty sure that one of those, or all together are the culprit..

EDIT I you still have other errors - but I do not think they are the problem. I do believe however that it can be because you edited the letabs JS and added some expression regarding height. strangely chrome sets the div height le-tabs_content_container to 58 px .. i believe it comes from the script . try to set the heights for all the parent / children divs (and remove that script) - It worked for me instantly on the debugger..

Answer 2

Here are your issues of tabs http://validator.w3.org/check?uri=http%3A%2F%2Ftaxlienagents.com%2F&charset=%28detect+automatically%29&doctype=Inline&group=0 . Before asking for help, help yourself by validating your code @ validator.w3.org