ansaurus

Question

Why does all browsers do not set all output perfectely ?!!?

Answer 1

+17 A:

The problem is that not all browsers use the same rendering engine or rendering rules. This is a constant source of grief for web developers, and it's not something that seems to be going away anytime soon.

Make use of CSS whenever possible, as browsers tend to comply best when under strict stylesheet rules. Beyond that, good luck and welcome to web dev :)

Dave McClelland 2010-08-20 12:44:02

Answer 2

+18 A:

You miss the tag <!DOCTYPE>, in the first line of page.

Ex:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt;

If you don't put it, IE will activate quirks mode, and very strange things will happen. When a browser activate quirks mode, many things change, as box model.

NOTE: many browsers has quirks mode, not only IE (I know that firefox has too).

More about quirks mode.

List of doctypes.

Topera 2010-08-20 12:44:26

DocType compresses the output. So, The whole picture become small !!!

Sarang 2010-08-20 13:24:02

I have used strict,loose as well as trasitional.

Sarang 2010-08-20 13:24:27

@Sarang: Doctype makes the browser render the page as accurately as it can as that type of document. If it makes things "small", that's because they're written as small things.

Chuck 2010-08-20 17:34:32

Answer 3

+1 A:

To be cross browser you need several tools, a lot of experience, and, in case of IE, a lot of luck. In addition to the other answers here, you can use Yahoo CSS which give you a common base (all browsers don't have the same default values): http://developer.yahoo.com/yui/reset/

greg 2010-08-20 13:21:37

Answer 4

+62 A:

How to fix this page

Let's help you out here a bit...

Use a Doctype

See @Topera's answer

To make everything center aligned

Please do not use

var winSize = $(window).width();
var margin = (winSize-1000)/2;;
  $('#main').css({'margin-left':margin,'margin-right':margin});  
}

Instead, use the CSS property margin: 0 auto. As a rule of thumb, always use a CSS solution instead of a Javascript where possible.

To create equal height columns

See:
http://www.positioniseverything.net/articles/onetruelayout/equalheight
http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks

Use the correct terminology and better class name

To avoid confusion, please do not refer to non-frame elements as frames. For more about what frames are, see: http://reference.sitepoint.com/html/elements-frames-windows

Give your classes meaningful names. The reason for this is the same for any other language - so that when you come back later three month later you won't be scratching your head at classes named l, r and h.

Use semantically valid HTML

The align and text-align attributes are officially deprecated; please see the above solution on making things center aligned and the CSS property text-align property instead.

HTML elements give meaning to the content they are wrapped in. The headers you have for each 'frame' should be marked up with <h2> or <h3> headings instead - while divs are generic block level elements with no meaning, the h1 to h6 set of elements (for want of a better word) tells the browser that the text contained in them are headings.

CSS Box Model

Please have a look at how the box model and floats work in CSS. bottom and top are not valid values for the CSS float property.

http://dev.opera.com/articles/view/30-the-css-layout-model-boxes-border/#cssboxmodels
http://reference.sitepoint.com/css/boxmodel
http://www.smashingmagazine.com/2007/05/01/css-float-theory-things-you-should-know/

The Real Problem Here

is not with the browsers. IE8 surprisingly misbehaves much less than its predecessors. Try writing better HTML and CSS instead.

Yi Jiang 2010-08-20 13:28:49

@Yi Jiang: that's a phenomenal answer, I wish I could give ya +2 or more.

Dean J 2010-08-20 13:35:27

+1 for the last sentence

Joel 2010-08-20 15:23:27

Dean, I'll do the +1 on ur behalf.

2010-08-26 08:44:31

awesome answer!!

stephenmurdoch 2010-08-28 18:41:13

Answer 5

+4 A:

use a doctype: list at the moment i would use -> XHTML 1.0 Strict, XHTML 1.1, HTML5 (do not if you are not familier with the problems that could occur
use a reset: eric meyers reset for xample is a good one
use a clearfix (and know when to use it) for example the new clearfix by Jeff Starr

using this three things, its a good start to let your website look the same in all browsers. after that you must learn about custom browser bugs, like double margin bug and so on.

choise 2010-08-20 13:29:36

+1 for mentioning using a reset - you don't know if you're dealing with browser quirks until the playing field is level.

ireddick 2010-08-20 19:22:21