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?
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.
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.
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.
Markup Validator
CSS Validator
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.
Related
I am making a website, where when i preview it in safari. It turns out exactly as i want it to be. But when i test it out with firefox.
In my page i have a element that is aligned on the page using
Padding-left and Margin-top. Which works perfectly when i preview it in safari. But when i open the file in firefox. The element's Margin-top increases by a few pixels.
How do i code my css file so that i can have the same page for different browsers. I have tried looking on the web for a solution, but none of them so far has helped with the problem.
Reply's will be much appreciated.
As jsteinmann said, check use http://validator.w3.org/ to ensure your page validates. This will take some time to figure out if you are new, but it is an essential step.
If you are having an issue with FireFox, you are probably going to die when you look in IE. Bookmark this link! http://msdn.microsoft.com/en-us/library/ms537512(v=vs.85).aspx
You have a lot to learn and google will help: https://www.google.com.au/search?q=introduction+to+cross+browser+testing&oq=introduction+to+cross+browser+testing&aqs=chrome.0.57.5763&sugexp=chrome,mod=12&sourceid=chrome&ie=UTF-8
In future, use stackoverflow for specific questions with code examples. You will find that you get specific answers quite quickly.
Also, don't forget to tick the answer that you find most useful, and also vote some up a level. That's why people spend the time answering your questions.
Enjoy the long road ahead :)
Specify all four margin and all four padding values explicitly. That will eliminate the diffferences in the browsers' built-in default stylesheets.
There can be several reasons why your finding your layouts aren't cross-browser compatible, so it would take a considerable amount of info of the markup and css to make any kind of determination on how to help you code a 100% W3C valid web page.
I would suggest using a css framework like blueprint or 960 for your layouts, so you have less issues in this way. It's a good way to start and maintain projects, and learn how to create layouts if you choose not to use a framework.
Also, I would suggest testing all of your projects in chrome and firefox first, then safari, simply because of the amount of users that use those two browsers compared to safari. I would also say, if it looks good in chrome, it will probably look good in safari and firefox, but it's always worth testing.
Webkit is an awful renderer in my opinion. As a web designer/developer, I take into account how my design looks at every magnification. Webkit handles this extremely poorly. Margins, padding, and borders all get rendered extremely poorly across various magnifications and there is no CSS you can use that is "cross-zoom" compliant in WebKit. Zoom in and out of any webpage in IE, Firefox, Opera and it is consistent. Take a look at this site, for instance:
http://development.mminc.co/davidphotos/
Try using the carousel at the bottom at different magnifications in IE or Firefox. Works fine, right? Now try the same thing in Chrome or Safari. BOOM! A developer's nightmare! Please, if anyone knows of any tricks of the trade to get Webkit to behave with something that even Trident is able to successfully do I'd like to hear it. I've heard of a jQuery zoom plugin, but that is sort of a last resort. I've looked everywhere for the issue but no one even mentions Webkit zoom issues. It's like it's taboo or something. Personally I think it's one of the biggest blunders of the modern browser era, especially when such a (otherwise) great browser like Chrome is giving me more trouble with presentation issues than IE7.
EDIT: I feel I should be more general and use an example where it is obvious only HTML and CSS are implemented.
http://www.gamespot.com/
Webkit forces a line-break with the top menu w/ zoom tests, but other browsers don't. It is a major issue with the engine and if there are any concrete solutions I'd like to hear them. If there isn't then I think this issue should be addressed and resolved immediately; it is an eyesore to users and a nightmare for developers. The fact that it isn't addressed anywhere on the net is troublesome.
This isn't answering how to fix WebKit zoom issues in general, but it should help with your specific problem.
You're using jCarousel.
Even the simple demo shows the same problems you describe.
So, that plugin is simply broken when it comes to zooming with WebKit browsers.
You could either ask the author of the plugin for advice, or find a different carousel plugin.
For instance, this one doesn't seem to have any problems when you zoom in using a WebKit browser:
http://www.thomaslanciaux.pro/jquery/jquery_carousel.htm (look at the "dispItems" demo)
With lots of talk and bickering among developers about how IE breaks standards, is it worth supporting mozilla and webkit CSS?
Examples
-moz-border-radius
-webkit-border-radius
Of course there are many more, but I just want to know everyone's thoughts.
Thanks
For IE, we were (are?) using proprietary features in order to eliminate rendering bugs. At least, in the case of FF and WebKit, we're using them to improve the design. It's progressive enhancement in this case. No one suffers if they have no border-radius feature, but we as developers get more satisfaction for using some CSS3 features. Our designs are more pleasing and W3C gets the feedback it needs in order to improve and then approve the CSS3 draft.
Rounded corners are proposed in the W3C CSS3 working draft. The proprietary extensions in Gecko and WebKit are already likely to conform to the working draft.
Given that rounded corners are purely aesthetic, there's no disadvantage to users with browsers who do not support rounded corners.
When the standard becomes final, it's a simple matter of replacing these proprietary rules with the standardised ones.
If you define -moz-border-radius and -webkit-border-radius, make sure and define -khtml-border-radius (Konqueror), -opera-border-radius, and plain old border-radius as well (for future-proofing purposes).
We tend to use the proprietary methods followed by the CSS3 spec version for when the method becomes more widley supported.
http://www.w3.org/TR/css3-background/#the-border-radius
If necessary (which isn't often) we use JQuery + IE conditional tags to render the same for IE.
http://malsup.com/jquery/corner/
http://www.quirksmode.org/css/condcom.html
It really all depends on your target audience, we wouldn't generally use unsupported CSS on a public facing site as 89% of our users are still using IE 6/7 so it would be useless to most of them.
We currently use it on a few admin systems and some internal systems; mostly to give the design team exposure to the new techniques.
Consider your target audience, browser specs based on analytic's and how necessary it really is first.
I'd support both, IE still has a big chunk of the user space, with Firefox and others (opera, safari etc..) occupying a smaller percentage of the browser market.
using mozilla only stuff might be ok if you can control what your clients are using, by recommending it in some way (if you're writing a web app. with a fixed user base) and even then someone will still insist on using IE.
I know its a pain in the backside supporting both, but I don't think web developers have much choice in the matter :(
In the case of border-radius, I'd say use the Mozilla/Webkit syntax if you don't mind IE/Opera users having squared corners.
If you need everyone to see the same thing, it's best to stick with the old techniques for now. Similarly, any non-universal CSS (say, using #font-face to download a custom symbol font) which is going to break the site for some people should stay out.
There's no harm in implementing CSS3 features so long as they degrade gracefully. So long as rounded corners, or what have you, aren't critical to your layout there's no harm having them there for the people who are running bleeding edge web browsers.
I know from personal experience that having those properties(specifically the corner radius ones) are very much a time-saver. Now of course it would be nice if css would just implement it into itself but right now I think that those properties are very helpful. I see no reason why we shouldn't support them. Mozilla's and Safari/Chrome's engines are just trying to make life a little easier.
I don't think this is a good practice. However you'd like that the site you're working on appears the same on every browser. That's why that's not a solution. It's not professional to have different layouts on different browser.
But if you don't care about that, or your application is based on only that browser - so it's completely fine!
Looking back at Stackoverflow podcast with Litmus (Podcast 78). The podcast discussed briefly the browser incompatibilities and quirks, especially with IE6 (a claim echoed everywhere). Litmus solution is to render the page in all the different browsers and look for differences.
However, I wonder how much incompatibility can be detected by simply analyzing the html and css directly, without actually rendering it.
I'm quite a newbie in this field. But I saw many references out there ... that document the IE 6 bugs and limitation, and how to avoid them when writing new documents.
If that's the case, then can a tool be made to validate and analyze the CSS and report any potential compatibility problems with the CSS?
Are there some incompatibilities that cannot be detected (due to lack of documentation) and potential limitation of such tool (when interacting with javascript and such)?
When we were developing Browsera, we tried to go about detecting cross-browser issues by looking at CSS styling alone. The problem is, it's the interaction between elements that causes the problem, rather than a specific style.
For example, if it were always the case that setting a margin would result in a double-margin, it would be detectable. However, the double margin bug in IE only occurs when there is a float in the same direction, and only for the first element in the row.
In addition to many of the IE6 layout engine issues, a lot of issues we detect are caused by different default stylesheets of browsers. For example, default margins and font size/rendering vary widely across browsers, which is probably the number one cause of layouts that look "not quite right" when you open them in other browsers.
The page seen by an Internet Explorer user is in fact built by IE parsing html and css; so, by definition, it is possible to build a tool that, knowing IE bugs, report potential problems.
Anyway, I don't think it would be easy.
Sure it can, but that's not the point of Litmus's business.
You can analyze a site and report on all the stuff that would render differently, but that wouldn't help much. Litmus's business is not designed to let you know what stuff is incompatible, it's designed to show you how it will be rendered, so you can figure out if and where your site needs improvement.
Making a website look exactly the same across all browsers is very hard, and takes a lot of resources. Often you'll need to compromise and make sure your site still looks decent on all these browsers.
No analysis tool can tell you if your site still looks decent.
My webpage is suffering from two IE6 rendering bugs. Each of them have workarounds, but unfortunately said workarounds are incompatible with each other.
Here's a minimized test case. The behavior in Firefox/Safari is the desired/correct one. IE7 is unknown, since I don't have access to it right now.
First bug: #content has overflow: auto and contains a relatively-positioned div. IE6 incorrectly gives the relatively-positioned div a 'fixed' appearance. Workaround: Set position: relative on #content.
Second bug: The page sometimes shows a modal popup. The z-index on the popup and background are set really high to stop anything behind them from being interacted with. This works fine until I set position:relative on #content, which makes IE6 treat the z-index property completely wrong.
How can I make these bugs play nicely with each other? (Note: Remotely formatting the hard drives of users still running IE6 is not an option, much to my dismay.)
Edit: Here's a second test case that shows what happens when I apply position: relative to content. The first bug ('fixed' appearance of #content-header) is solved, but it causes the z-index bug to kick in and mess up the modal background.
There are a myriad of implementation as to how to avoid the massive issues with ie6 (and below) conformity. The only one that has actually worked for me (to a great extent even) is Dean Edward's solution.
Try to insert the following line in your main header:
<!--[if lt IE 8]><script src="http://ie7-js.googlecode.com/svn/version/2.0(beta)/IE7.js" type="text/javascript"></script><![endif]-->
-- and see how it goes from there (and what you still need to handle, since it probably won't fix everything).
The script size is a mere 30kb, and will only be loaded in ie6 and ie7.
The google code url is (obviously) http://code.google.com/p/ie7-js/
Implement something like we've done at Ra-Ajax.org (hint, visit the site with IE ;)
Seriously, even prototype.js and 37signals have STOPPED supporting IE6 now, I think it's time to move on...
I don't think using a library is too bad of a penalty to minimize my time working around ridiculous IE bugs.
We ended up using the bgiframe jquery plugin (http://plugins.jquery.com/project/bgiframe). It implements the iframe "shield" technique in a library. I figure that making IE6 users have to have a bit more of a library download penalty (which isn't really all that much) so that I don't have to go crazy about IE6 bleedthru is worth it.
P.S. I think the web developers of the world should start a class action lawsuit to force Microsoft ether to offer the equivilant of firebug for IE6 and IE7, make sure all IE6 and IE7 instances are upgraded to standards, or remove all versions of IE6 and IE7 from all computers on the Internet, or bail-out all web developers with a payment of $1M each for their pain and suffering!
While it may be the wrong solution, and probably way overkill, jQuery can do modal popups similar to this and works on IE6. I'll probably get downvoted for such a simple answer, but it is still worth considering, or at least looking at, other solutions before reinventing the wheel.