Wandering div in all browsers but Safari

Hi

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.

http://pintotours.net/Work/MYTEST/bali.php

I’ve tried altering all the widthe, percebtages. max-widths a a few other options at that break-point but can’t understand what is causing it.

Help…

Could you say more? I can’t see that in Safari or any other browser. :confused:

Hi ralph

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.

Thought we had this discussion about Safari Windows :wink: .

Hy Ryan

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.

Hi,

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. :smile:

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.

1 Like

qim, are you testing for Netscape or AOL browser too? Let us know when you need help with that, we can do our best.

Hi Paul

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!

many, many thanks

Perhaps some hypnotherapy can be of help; make you forget Safari Windows exists :slight_smile: .

Just to add that this thread had nothing to do with Safari. In fact, safari was the only one that displayed correctly!

That statement is not exactly accurate.

Safari Windows displayed it like you wanted it to.

The point is, whether or not it displays a page like you want it to, you are wasting your time and effort bothering with it at all.

As said before, if you want to test Safari, do so on a Mac or use a service like browsershots

1 Like

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.:slight_smile:

Hi

I’m not defending Safari

I was only saying that the thread was abiout the other browsers.

As for safari: point taken!

Thanks

Don’t worry, we’ve seen it all before :smile:

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.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.