Banner's height shifts and goes over content, only with Firefox browser
This is a random page in my site where the behavior takes place. ( http://accountabletest.com/services/) Notice how the banner's height shifts and goes over content. The issue happens only in Firefox, not in Safari, Chrome or even IE (IE used to make a weird effect too, but when I replaced the % with specific px quantities, the issue stopped). All subpages but the homepage are affected. I don't know why is this happening. The issue takes place in small screens and also in big ones (I use a media query for min-width=144px).
All Replies (13)
This template has the most peculiar use of boxes; stuff sticks out all over the place. I've also got a horizontal scrollbar, which is never a good sign.
What I notice on the Services page (http://accountabletest.com/services/) is that if I move my mouse over any of the links in the two boxes on the right side, the body content moves down a considerable distance. I can't understand why that should occur. When the window is wide, this moves the text out of the banner, but when the window is narrower, it opens up a large gap.
Modified by jscher2000 - Support Volunteer
When I view source on the page, there are 137 lines above the DOCTYPE declaration, which should be line 1. I think there's something seriously messed up in your templates.
I've noticed the same thing. If you move the mouse over the sidebars the effect takes place. If you just load the page with no movement, the page renders fine. What you mention about the DOCTYPE declaration is because in using a wordpress template. But that does not seem to affectany other browser. Only Firefox.
If you disable JavaScript while loading the page then the content also is moved down.
It looks that a script adds some content that moves up the main content.
There are also weird things when you make the wind quite small.
Using the Inspector shows that the content is not really in the container, but that there are negative margins active.
The height of div.bannercustom is also to large with 580px and should probably be 400px (auto) as that is the height of the banner image.
You should probably check the margin of the div.headwhite2 (margin-top:-5% -> 8%).
Hi gonpires, I realize that some browsers are more tolerant of nonstandard and downright invalid HTML, but Firefox often is pickier. No WordPress template should put content above the opening <html> tag. The only thing above that should be your DOCTYPE declaration.
I've just disabled javascript using the about:confg command, and the problem seems to have disappeared. Should I remove the javascript code?
Modified by gonpires
Hi gonpires, the JavaScript is what makes the site design responsive to resizing. If you don't need that aspect of the template, you could remove that part. However, I don't know which of the script files is causing the problem, so it's hard to suggest how to remove just the problematic parts without removing important functionality.
Thank you @jsher2000 for your accurate support. Glad to know there's someone there just in case. Have a good week!.
Hi again!
I've arranged the DOCTYPE declaration and also removed the Javascript code entirely from the code (wasn't needed, but was included in the template), as mentioned by @jscher2000 .
Moreover, I've checked the margin of the div.headwhite2 (margin-top:-5% -> 8%), and replaced the % with accurate pxs, as recommended by @cor-el. Did also tried switching the banner's heigh (then I returned to how it was, because no changes were seen on the issue).
The problem persists: Banner's height switches upon reload and the div 'headwhite2' moves down while moving the poiner over the sidebar's links.
I'm still seeing the height of div.bannercustom as 580px and the margin of div.headwhite2 as -5%, so it looks that you weren't successful in making the changes that I proposed and that you posted above.
.bannercustom{ position: relative;
z-index: 11;
left: 0px;
width: 100%;
top: 0px;
float: left;
height: 580px; /*auto or 400px*/
}
.headwhite2{ position: relative;
z-index: 88;
left: -2px;
width: 1070px;
background-color: white;
float: left;
margin-bottom: 4%;
margin-top: -5%; /* 8% */
}
@cor-el, Please clear your cache. My code is exactly as you recommend.
.bannercustom{ position: relative; z-index: 11; left: 0px; width: 100%; top: 0px; float: left; height: auto; }
.headwhite2{ position: relative; z-index: 88; left: -2px; width: 1070px; background-color: white; float: left; margin-bottom: 4%; margin-top: 8% ; }
Thank you for your response. From your experience, have you ever been through something similar?, I just don't know how to handle this.
Modified by gonpires
Did you upload the new code?
A reload and bypass the cache still shows the old code.
Here is a screenshot from Google Chrome.
Sorry I have two divs under the same name (because they are used on different media queries for different screen sizes). You were inspecting the site on a smaller screen than I was. Now I'm certain that the divs are the way you recommend. You can see that the problem is still there though. @cor-el