Okay, I don't know if I'm the only one on here who gets confused a lot by the jargon assoceated with webdesign, but I figured that there are a few questions on this site to do with it, so i thought it was a good idea to create a topic on the matter. So, here it is:

And an opening question is as follows:

I often get asked how is it that when designing a webpage in a program, such as frontpage or dreamweaver, it does not always appear the same way it was designed in the progam when viewing the page in the browser, e.g. the left navigation bar may not be exactly where it is in the internet explorer as the plce it is in firefox?

Heh the simple answer is not all broswers will render the page the same. They have their own style of buttons, scroll bars etc. This is one of the problems you have to face when building websites intended for use by different broswers. Not only the visual apperance will be different in some cases loose coding can lead to functionality of the website being slightly different across broswers.

WYSIWYG editors and browsers all have their own rendering engine. Although there's a thing known as web standards, not all browsers (e.g. Internet Explorer) have a goal at reaching or meeting these standards. WYSIWYG editors is a different story, as their rendering engine doesn't necessarily have to meet standards, only the coding does. Even then, not all WYSIWYG editors build for standards (e.g. Frontpage). Even popular ones like Dreamweaver have been known not to code for standards. However, there are free and open-source WYSIWYG editors that try to meet standards.

Yeah I can vouch for Dreamweaver has I delt with websites that coding is top notch and it displays find in Dreamweaver, but make a change big enough and the websites gets completely destroyed in Dreamweaver. Although it may looked destroyed in Dreamweaver it comes out perfectly fine. Of course there are a handful of coders out there who use the WYSIWYG browser and bust out awesome sites just using the tool bars that come with the editors, but of course I stick with old methods and I rarely use the WYSIWYG browser to make changes, such as changing the size of a table or editing some words.

Of course thus the reason the Acid test has become so popular in last couple of years because it literally tests browsers with specific CSS and html and see if it will display an image properly. Although firefox is the only one to do this without the need to have virtual PC running and that is have different versions of its browser installed at the same time. You won't get that with IE though because of integrated everything is and so you either have to dual boot your computer or installed Virtual PC on your computer.

Of course if your code is clean then you don't have to worry about needing to make major changes to your website, but if you have to then it is recommended that you design layouts based on several browsers and connect them with a javascript that will read the browser that is being used and then display the page according. Of course to save yourself time it is recommending that you know php and or ajax that way when updating hte website you only need to change one page instead of several.

To the Opening Poster:

Have you tried NVU (or Komposer)?
A wysiwyg Editor that started out as a Mozilla project but has since been split off from the Mozilla group?

Freeware. Google it.

yeah ive noticed that but what i want to no is how do you build or rather sructure a website to view in the way ment in most browsers i would say exact positioning is a nono when it comes to that as it never works out the way you plan but hey im new so i dont no much.


wel thats brilleant exscept for one thing i dnt no jack abouth code is there a dummys guide to dooing somethinf like this script positioning that reads all browsers ?

Well if your CSS and HTML coding is really tight and I mean flawless to the point that on any browser you barely see any difference then you don't really need it. However, if your site is complex and regardless how many hacks you use to get it right and not have to create more pages design for specific then you will have fun working with these scripts.

Script #1 - PHP
Script #2 - PHP
Script 3 - Javascript
CSS related sites working with browser detection

Hopefully though one day all the browsers will come together as one and finally get rid of this ridiculous problem.