Welcome to WebmasterWorld Guest from 188.8.131.52
Forum Moderators: not2easy
The long answer is sort of. The latest generation of web browsers is far more compliant with web standards than what was available even three years ago. If you design for "standards mode," chances are the page will look more similar in modern browsers than it would in older generations. I usually design for a current generation browser, then create "backported" CSS containing the bug fixes and compromises needed for Internet Explorer 6, and insert it using IE conditional statements.
IMHO the real answer, however, is that designing for pixel perfection is poor design. It is no longer a matter of making a site look the same IE and NS, or IE and FF. People will look at a website on an iPhones or Blackberry, then go back to the office and look at it on a 30-inch widescreen monitor. An aging population will be bumping up default font sizes. We should be aiming for flexible designs that may not appear exactly the same from screen to screen, but remain attractive and usable.
pixel perfection is poor design.
I have always intuitively believed this and despise corporate type sites, and developers especially, that design that way. No end to crying about a couple of pixels for no good reason than to cram a template down the user's or buyer's throat.
Flexible, floating design is so much easier and much better for the user. Mobile devices really need their own stylesheets and designs IMO. It's too much to ask for a design to render on a 30" screen and degrade to a mobile device. Bandwidth and load time are key to mobile device success. It is a whole nother animal.
Is there any code that I can use to make all browsers show my web page correctly or at least the same in some way?!
Well, I say yes, you can, but it means starting with the limitations of the all browsers, and working within those confines, not starting with your unbridled vision and forcing the browsers to cooperate (which they may not.) Allow me to digress for one moment . . .
Piet Mondrian worked with a palette of primary, high chroma colors only, and basic geometric shapes to demonstrate the impact of color and design independent of visual imagery. In this way, he limited his palette to produce an artistic expression different from any other artists of his time.
In the same way, the various limitations of browsers and user environment narrow our "window" of the approaches to design we can use. If you code to Standards mode and incorporate methods of graceful degradation into your design methods, there's no reason whatsoever your sites won't look almost identical in all conditions, width the exception of text only or small-screen clients, like palm pilots, etc.
This requires a little compromise in your "artistic requirements." For example, in your environment, you want the page to fill the full screen width, but you have to consider a) monitors narrower than yours, and b) the newer wide-screen monitors far wider than yours. So instead of setting a width to your screen width, you might set a width of 95% width a max-width and min-width property (arguments aside that these still have problems in some browsers.)
But when experimenting with this, you find that when you reduce to the min-width, or size up to the max-width, the elements within your container move around breaking your layout. So what do you do? You compromise: change your inner elements so they don't break when resized, or when the text is resized.
It really does require a new way of thinking, one where you have to predict what would happen in any of the thousands of environments you will never have access to. It may not be easy, but it can be done.
A few methods to help achieve this:
Code to Standards Mode. The most important thing IMO is that the browsers render in Standards Mode. When you are in Quirks Mode, many of your selectors will fail, breaking your layout. Use a valid doctype and validate your code, this is more important than you can ever imagine when trying to achieve this goal.
Don't use browser-specific hacks or effects. I've gotten a lot of disagreement on this, but I still say, in my experience, it is completely possible to design a page without hacking up the CSS or the HTML with conditionals to make IE and even IE6 get along. I do it all the time. If you encounter a situation where IE6 won't play nicely? DON'T DO THAT! Your design is not so earth-shaking that it can't live without whatever effect you were hoping to achieve. Kill it and do it another way.
The previous is the one people seem to have the biggest problem getting around. Some of them will spend countless hours trying to get a thing to work, blaming the browser (and rightly so,) driving themselves crazy. It's not worth it, really. Scrap the idea and go at it another way, try something else. In the long run, you wont have to work around that bug for the life of the web site. Think long term, not short term; most of the time, it's a time and money issue, you want to get this done and the check cashed, but that is short term. If this client stays with you, this issue may plague you for years to follow and be far worse. Speaking from experience on that one . . .
This is why it's so intensely critical to test BEFORE you get knee deep into development. Take your initial phase 1 design, run it through all your tests. There is nothing worse than launching a site live after all the content has been populated and finding a menu is placed over the main headline instead of where it belongs . . . then scurrying back to square 1 to try and fix it on all your pages.
Allow room for miscalculation. D_Blackwell touched on this; if your design vision is so critical that an extra pixel here or extra pixel there is going to destroy your layout, consider the possibility that, instead of a browser "bug," it's a poor design approach. Web design is more than the visual appearance; it's also a design in terms of engineering so that when "things go wrong" they go in such a way that it won't destroy your design.
It really requires a new way of thinking, and an understanding that "design" is far more than page composition.