I have another problem: there is a media query at 1000px that removes panels in the #right sidebar. The moment (or within a px or so) of the panels disppearing, the central column Content drops down to the bottom of the page as if there was a float:left instruction. But within a few more pixeels it comes back into position.
Safari(on my Windows PC) is the only browser where it does not show. Any other browser - IE9, FF, Chrome, Opera, as you narrow the screen and appraoch the 1000px break point the central part goes down as in the screen shot above, but rapidly comes back into place, if you continue narrowing.
if you move the mouse very slowly leftwards you should see it.
This is the other way round. All’s well with safari. It is every OTHER browser that decide misbehaving. I suppose there must be soemthing intrisically wrong in my media quesries at 1000 px.
Why are you using Safari on Windows to test your sites? It’s like saying I’m going to make this work on a device that no on else has.
Your first test must be Chrome because that has the lion share of the market. After Chrome test on Firefox and IE8+.
The problem with that old version of Safari is that its media queries are faulty and do not account for the vertical scrollbar (as stated in the specs) and are therefore about 20px out from other browsers.
This is where your approach is faulty and not even modern browsers have the same width scrollbar anyway and on mac the scrollbar is removed altogether until its needed.
You will need to use a media query of about 1020px to make sure that content doesn’t drop.
Bear in mind none of this would happen if you had used the code I gave you several times now. A site should be fluid and not fixed at any particular dimension and this problem would never occur (max-width is fine). A layout should always be allowed to flex a little and not be a series of fixed width elements.
I do not use Safari. i use a worse one: IE9… Howver, when I think I’m done I try them all, including Safari. But I take yours and Ryan’s point about the fact that people on Windows do not use Safari,
I am very grateful The problem seems resolved. I’m so near the end I feared it had been all for nothing.
I am also aaware that I may be abusing the forum’s helpfulness and will try to use the grey cells a bit more before I panick and shout for help!
No, Safari was the only one that was displaying it incorrectly.
The specs clearly state that the scrollbar must be taken into account in the media queries and Safari was not doing this.
As Mittenague said above Safari was displaying it as you wanted which is not the same thing as doing it right because you were both interpreting the specs incorrectly.
If we seem to question you or labour a point then it is because we are trying to make you do it the right way and so that anyone else watching can also learn.