Why Doesn't This Work?

Dysan

How come the page at the following URL, displays fine using Internet Explorer (IE), but doesn't display correctly using FireFox (FF)?

The rounded corner images, should line up with the square corners of the DIV.

How do I get it to work in both web browsers?

URL: http://www.freewebs.com/ticstacs/Corners/Index.html

NogDog

Start by using a fully qualified doctype declaration, and get rid of the empty line before it at the start of the document.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">

Make sure that is the very first line of the file. Then I suspect you'll find IE and Firefox will be more similar in what they are doing, and you can tweak the layout to get it the way you want.

Also, be sure to run your page through the HTML Validator, fix all markup errors, then do the same with the CSS Validator.

PS: If creating a new page, there is really no good reason to use a Transitional doctype. Use a Strict doctype and do things right, and reserve the Transitional one for legacy pages that you do not have the time and/or money to update to the 21st century.

Dysan

What's the difference between "Transitional" and "Strict"? - Do all browsers support it?

Dysan

Hi, how come the page found at the following URL, gets displayed differently when view in Firefox, compared with Internet Explorer (IE)?

How do I get both browsers to display the same?

URL: http://www.freewebs.com/ticstacs/table/index.html

dougal85

because, browser standards are not fully followed by all browsers.

Thus, you need to learn the problems and know how to fix them for the broswers.

Generally speaking, internet explorer is the one with all the problems.

NogDog

The Transitional doctype allows for the use of a few HTML tags and several attributes which have been deprecated (for several years now, actually). Most of these deprecated items were used for visual presentation, and have been superseded by the use of CSS styling.

Frankly, most browsers will probably render the deprecated elements even if you use a Strict doctype, but if you use a Strict doctype and create HTML markup that validates correctly with it, then you know you have at least created a well-formed document that should be parsed correctly by any standards compliant browser, search engine, PHP or JavaScript DOM function, etc.; and is a document representing the current best practice of using HTML for marking up the structure and meaning of the document while using CSS to define the visual layout and presentation (assuming that you are not using tables for page layout, but only for the markup of tabular data).

NogDog

Different browsers have different default margin, padding, line height, etc. values for different elements. If you are going to design pages such that you are concerned with output being identical to the exact pixel, then you are going to have to explicitly define the desired values for those attributes for each such element you use. A fairly common thing some people do is to start their main stylesheet with something like:

* {
   margin: 0;
   padding: 0;
   line-height: 1.2em;
}

This will zero out all the margins and paddings and set an explicit default line-height. Then as you work on your layout you can adjust the values of specific elements, classes, or IDs to get the desired spacings.

Dysan

How do I create the table shown in my plan at the following URL, using a table & CSS, that displays exactly the same in Internet Explorer (IE) and FireFox (FF)?

http://www.freewebs.com/ticstacs/table/plan.bmp