Hi all,

I just created a website:
However, the page displays differently on Opera and Firefox and IE.

I've been trying to solve this issue for days now but in vain.

The problem is probably in the stylesheet, which we can't see.

Check for the following incompatibility errors:

1. Putting size styles (width, height) in the same tag or style that contains nonzero surrounding styles (margin, border, padding).

IE nests them in the wrong order, placing the surrounding styles inside the size styles. Other browsers obey the standard, placing the surrounding styles outside the size styles.

The cure is to nest two tags, one with the size styles, and the other with the surrounding styles, in the order you really want them.

2. Putting measurement dimensions on zero values in styles, or omitting dimensions on other values.

If you put 0px, 0pt, 0% in a style, Firefox throws away the entire style. Just put a 0 by itself. On the other hand, if you omit a dimension for a nonzero style value, the browser might pick something other than what you intended.

Put measurement dimensions on all nonzero values that need them. Don't put dimensions on zero values.

3. Using absolute positioning.

Browsers do not agree on how to render this. Don't use it.

4. Using nonstandard extensions.

Don't use anything that is not a universally recognized element. And watch using deprecated elements - browser support is sketchy. Both drop various browsers into quirks mode, where they attempt to render nonstandard code as well as they can.

5. Declare a doctype and a character set.

Failure to do this correctly throws the browser into quirks mode.

6. Set the vertical alignment style for all table elements.

IE and FF differ on the default behavior of this attribute.

7. Using negative sizes.

Browsers don't agree on how to use these, and some drop into quirks mode when they are used.

8. Close all tags in the way the doctype requires.

Failure to close tags also throws the browser into quirks mode.

9. Don't use pixels to define any size other than an image or a border.

Other sizes can render strangely, especially if the number is large.

Here is a page containing other tips:


#content {
    float : center;    
    font-size : 13px;   
    margin-left: 165px;
    width : 70%;

this text is invisible to me
13 dots in 0.016 inch dot pitch .208 inches hi thats small, its four point paper type.
all font sizes on screen should be in ems
then the font size adjusts around the basefont set by the user for the users preference.
picture your screen being rendered on a cell phone
165 margin on a screen 200 wide ??
all measurements except for actual images and borders should be relative. ems and %ages
what looks good on your desktop may only look good (in any browsers) on your desktop, browsershots.org is good for images of other browsers and other OS and other screens

eyes see dark on light better
than light on dark background