Target Safari and Opera only?

Question

I have a problem with a layout that works fine in firefox, chrome, and IE, but in Safari and Opera, for some reason it displays differently.

I have a container div for the header, and a container div for the content, and at the same time they are both inside a "whole container."

The problem is that Safari and Opera display the content container higher than Firefox, Chrome and IE. And, then, when I change the size of the window, the contents not only get centered (as they should) but also the content container moves down (and it should't). This does not happen in Firefox, Chrome, or IE.

I do not paste the code because I have no idea what part is causing the problem to happen, and there's a lot of code.

Can I target Safari and Opera specifically using Javascript or something else so that I can fix the CSS?

Answer 1

Welcome to browser's inconsistencies!

It has been said, over and over again, to abandon tabled layouts in favour of div's layouts.

I tried for the last two years, on many sites.

I don't want to design code with "if IE, if Safari, if this or if that".

I reverted to table's layouts!

The beauties of it:

- I don't need to have any "if" conditions.

- It is treated the same way by ALL browsers.

- I can update a cell with ajax without messing the layout.

- I do not have te problems of "overflow: do something", which is dealt with differently by all browsers.

- My sites work on ALL browsers the same way.

- I can cope with ANY screen width, any browser versions, and the resize works perfectly.

Conclusions:

- Tableless websites are a pain in the ***.

- Until ALL browsers follow PRECISELY the W3C specs (which will probably take another 10 years or so), I'll stick to tabled layouts!

Now: what do your customers want?

(and, just to add insult to injury: no two browsers interpret CSS the same way...)

Answer 2

It would be much better to have one working CSS for all browsers.



The problem may not lie in the CSS at all; if your HTML file is not W3C-compliant, you will likely encounter rendering differences between browsers. The easiest way to check is with this Firefox extension:

https://addons.mozilla.org/en-US/firefox/addon/249



Once you're not getting any errors or warnings from the HTML Validator, then it's time to move on to the CSS. You're going to have a lot fewer headaches keeping up with browser revisions if you can get them all to work properly form a single stylesheet.



Worst case scenario, you absolutely can't get it fixed. There are ways to determine the browser via JavaScript:

http://www.quirksmode.org/js/detect.html

And ways to change the stylesheet via JavaScript:

http://www.alistapart.com/articles/alternate/

Answer 3

If you're writing in PHP or ASP, you drop a conditional statement into the head of your document that test for browser type... If it's FF, IE, Chrome it will use your first stylesheet, and if it's Safari or Opera it will use a different stylesheet (which you will need to write)...

Answer 4

I actual have used it slightly and that i think of it somewhat is sweet. i like it so lots greater effectual than IE. yet I in many situations use a mac, so in line with possibility i'm biased. It handles virtually precisely like the mac version. initially there have been a good style of bugs despite if it somewhat is greater effectual than it was.