[02/03] FireFox Page Rendering is Different

Web pages are displaying as designed when using IE but incorrectly when using FireFox. And not small differences, major problems. Contols on the Left, in a Panel, are appearing centered and overlapping Labels. Labels with lengthy text (set in the code behind page) are not wrapping but extend off the page.

I am not sure how to fix these types of problem. If I knew generally what causes this to happen I would have a starting point but right now its all trial and error. I move things around, try this or that but am making it worse.

What are some good general rules to "live by" to keep all browsers happy? What TargetSchema should I generally use? What about Flow Layout vs Grid Layout? Absolute vs Relative? Properties (like Height and Width) vs using Styles.

Any links or documentation would be appreciated.

Welcome to web development.

What you see in VS is what you get in IE, simply because they are one and the same. Convenient, but awkward at the same time.

There are not really any good general rules that you can apply consistently to eliminate these sorts of problems. They are simply quirks of each browser that you will gradually get to know over time. These quirks come down to bugs, feature set support, and differences in interpretation of the standards.

You should always use stylesheets to control the look and feel of a page. Their use results in no difference in appearance (vs attributes), but is the technically correct way to achieve said appearance. Presentational elements and attributes are all deprecated and as such should not be used. Document structure should be kept totally separate from presentational information - that's a fundamental principle of modern web development.

Likewise, tables should not be used in structuring the page - you should always use CSS for layout. The use of tables should be restricted to marking up and presenting tabular data only.

One tip - design the page firstly using in Notepad, and check it as you go in both Firefox and IE (Opera will generally look much the same as Firefox). Then use your resulting stylesheet and markup when you apply it in VS. The drag-drop page designer in VS will quite simply produce a page that works in IE; anything more is sheer luck. Get used to coding the HTML and CSS by hand and you will bypass these problems.

Another tip, CSS-specific this time, is to develop your stylesheet first for Firefox, then make a separate stylesheet specifically to correct oddities in IE. You can then include this via a conditional comment (IE-specific extension), as follows:

HTML Code:

---

<!--[if lte IE 6]>
  <link rel="stylesheet" type="text/css" href="ie-fixes.css" />
<![endif]-->

---

Have fun :)

Always use FlowLayout.

Learn HTML/Web design first because a page will render only as well as the developer's knowledge of web design extends. Visual Studio does have its fault though: It starts off with the GridLayout and most developers start using that as the de facto standard.

To start with, I always create a 'template' page in some other HTML Editor and then start using it in VS.