CSS, DIVs & browser compatibilty issues?

Question

Hello,

I've just coded a site using a table-less div layout. It was designed using Firefox as the main reference browser and displays perfectly just the way I want it.

However, in other browsers such as Safari or IE7, the divs are off by a good few pixels. That's normal and I know how to make browser specific stylesheets but:

In Safari, for example, all divs are off by about 10px relative to the container. Now, there are two particular divs which seem off by more than that (approx 87px).

Why does this happen & why do different browsers render the layout differently anyways? Surely, "left: 700px; top: 450px;" is the same in every browser just like a pixel is the same everywhere?

Any explanations are much appreciated!

Cheers.

Answer 1

This is a known issue, alright, and why server-side technology is the proof of concept for fixing the variety of browsers, OS, graphic cards, download bandwidth. And it will only get worse as Microsoft introduces cloud computing with silverlight (silverlining??? I know I'll have nothing to do with it). MS has let it be known they have no intention or conception about standards.



If you want it done all client side, use tables and let the various browsers lay out your gift to the world wide web.

Answer 2

Things are rendered differently in different browsers because programmers aren't as good as they would like to be.



The CSS you're usingis a standard, that SHOULD be implemented as it is described in the corresponding ISO or RFC document, but often is NOT. There are javascript scripts available to make IE more standard-compliant w.r.t. CSS, but I don't know if the same exist for Safari.



You might also want to make sure that your stylesheet and webpage themselves are standard-compliant, to increase the chances that they will display correctly in different browsers.



http://jigsaw.w3.org/css-validator/ for css

http://validator.w3.org/ for (X)HTML

Answer 3

you need to give a code sample. try declaring top and left properties without the 'px' after them. this way it becomes cross-browser compatible



also mention style="position: absolute;" to make sure that the divs are placed where u want them. mention height and width also because divs auto-fit around the contained text by default. I can offer no further advice without seeing ur code sample.

Answer 4

hi the float:right causes the sinking. and the #follow have not empty space to lift up and align with welcome.png. i hope this help: