0

I'm having major rendering issues in Safari with the web application I'm working on. Most of the design is done with divs using absolute positioning. This renders fine on Internet Explorer, Firefox, Chrome, Opera, Netscape, and konqueror. In Safari, it's just a jumbled mess.

Does Safari lack support for absolute positioning of div elements?

What is the best way to trouble shoot and find out what is going on with the safari browser? alt text

UPDATE: I'd like to note I did find the issue, and I would like to thank everyone that gave suggestions. It was the WebKit's "Inspect Element" that gave the most useful information. It appears that their were conflicts with inline styles and styles from the CSS. While safari grabed the styles from the .css file, the rest of the browsers were using the inline styles. i was able to see those conflicts with the information in the tool that was suggested.

Glorfindel
  • 21,988
  • 13
  • 81
  • 109
stephenbayer
  • 12,373
  • 15
  • 63
  • 98
  • can you post a small snippet of a test case that exhibits this behaviour? – Owen Nov 10 '08 at 04:19
  • I'm using the Web Inspector that Jim mentioned, and it's giving me great information to trouble shoot these issues. – stephenbayer Nov 10 '08 at 04:20
  • what's weird is after I loaded the webkit stuff, my safari isn't breaking anymore. – stephenbayer Nov 10 '08 at 04:29
  • Why would you jump to the conclusion that a browser like safari doesn't support absolute positioning, when a quick google and some commonsense would have easily told you otherwise. A 30 second test set up would have shown that it was supported and that the problem was in your code. – micmcg Nov 10 '08 at 06:58

2 Answers2

3

1. Safari's support?

Safari is actually a decent browser. If it has its flaws, they aren't any worse than those of any other browser, and they aren't of the class of the old IE browsers, which had very serious problems and lacked even basic support for web standards. To answer you question specifically, yes, it does support absolute positioning.

Safari can certainly render modern X/HTML CSS designs, and since your audience is largely using Safari anyway, you may as well forget the notion of dismissing the browser. It's a good browser, and in any case we're powerless to change it. We simply need to take care of these bugs, whatever they are.

2. How to go about debugging?

Without having a specific example, it's not something anyone can really help you to do. It seems fair to say that you're having some issues controlling css-based layouts. You may have some invalid markup, which in some cases could produce the kind of extreme browser-specific abnormalities you've described.

Start with the basics. Validate your markup and CSS.

Make sure you're rendering in standards mode.

Seek out answers to specific questions

If everything validates and you're still having problems, you'll have to track them down one by one. Even if you rebuild the page, piece by piece in Safari in order to see where things begin to unwind, it will be worth it to do. If during this process you really don't understand why a certain behavior exists, you'll at least have a specific question that you can use to poke around for answers. It may be answered already on SO, and if it isn't, you can ask it.

Community
  • 1
  • 1
keparo
  • 33,450
  • 13
  • 60
  • 66
  • What's a good way to validate the css? and inline styles. The frustrating thing is that it displays fine in every browser on the planet except for Safari, and Safari is the most important one to the users. – stephenbayer Nov 10 '08 at 03:56
  • I've added some links to validation services (see above). – keparo Nov 10 '08 at 04:02
  • thank you for all the assistance. I'm not a design person, and when faced with design issues, I'm pretty lost. – stephenbayer Nov 10 '08 at 04:38
3

The problem may lie somewhere in your JavaScript; one of the most noticeable things about Safari is that it likes to stop executing JavaScript after any errors.

CSS is likely not the issue, since Safari has better standards and CSS support than any other browser out there (alright, I said it.)

Use the built-in Web Inspector in a recent nightly build of WebKit to track down your issues.

Jim Puls
  • 79,175
  • 10
  • 73
  • 78
  • I did use the Web Inspector in the nightly build of Webkit, and it was great... unfortunately it did not have the rendering problems I'm seeing. :( – stephenbayer Nov 10 '08 at 04:37