Firefox Vs. Internet Explorer

[Torner]

Hi,

Now am developing a site for my company, am using HTML and CSS for site designing.
If I view the page in Firefox and IE, Firefox looks correct, but in IE the page looks some extra spaces.

Is there any tag (or) code is available to fix this issue.. (or)
Please advise me a solution to correct the issue.

Thanks for your help in advance.

[notjustgraphics]

Hi Torner

You have run into the single most frustrating problem web developers have - Cross Browser Compatibility.

Internet Explorer seems to do its own thing with no regard for the standard. Alas, all browsers have the quirks.

Each and every issue you encounter will have it's own workaround, hack, fix, or solution so unfortunately, no, there is no 'tag' or 'code' that will magically make it all work.

My best advice is to use google and search for the problem you are having ie 'Internet Explorer Extra Space' etc...

You could also post a link here for us to review... you may get some suggestions.

Another thing to remember is that different versions of Internet Explorer will behave differently also.. so make sure you test your site in both IE6 and IE7

Good luck!

Mike.

[Jacorre]

My suggestion is that during the coding process, you test in multiple browsers with each change. For example, code the header and then test in multiple browsers and make adjustments as necessary. Then move onto the subheader and test and adjust as necessary. Do it in pieces instead of coding the entire page and then checking in other browsers. If you catch the problem beforehand, you may save yourself headaches in the end because one problem usually creates another.

I do have a tutorial on how to test in multiple browsers when using Dreamweaver.

[Jolt]

Easiest development processes.....

1) Code for Safari
2) Check in Firefox (Should be almost no adjustments needed, maybe 1 or 2)
3) Check for IE7 (Should be pretty solid but may need another 2 or 3 adjustments)
4) Check for IE6 (By this time the code should be fairly solid, however there will still be several things that need adjusting.)
5) Check any other browsers you wish.

The reason I code this way is because Safari is exceptionally standards compliant and since Firefox is as well, the two will almost always be the same on either the PC or Mac Platform. Moving to IE you can specifically filter CSS for IE only. This allows you to fix issues just for that browser. If you code for IE then try to fix for Safari/FF you'll find you are fixing a great deal more than if you code the other way around. I leave IE6 until last because, being the piece of junk it is, it often requires the most attention when sorting out compatibility problems and with CSS filters you can spend all the time you need correcting for only that browser.

[notjustgraphics]

Hey Jolt

No one can fault your logic...

These comments are intended for other readers to consider...

My concern would be that Safari counts for only 1.6% of all users.

IE6, the piece of junk that it is, is still more widely used than IE7.

Firefox has finally overtaken the #1 spot for single version browser. Although if you combined users of IE6 and IE7, explorer still has a wider popularity.

I've always found it interesting that people say 'Standards Compliant' when no 2 single browsers render the same.

One would assume that a 'Standard' would be indocturned across more than just a single browser.

You can find browser statistics here: Browser Statistics

Its also difficult to test in both IE6 and IE7 because you cant have both installed on the same machine.

Just more to consider about cross browser compatibility.

Cheers.

[Jolt]

My development path does not factor in the amount of users which may be utilizing any particular browser. It's a path designed to create a site that works in all of them. What difference does it make how many users are launching a particular browser? Even if the user base is 1.6% if 10 people visit a site I design 2 of them getting errors is unacceptable to me. 100% compatibility across browsers and platforms is always my goal. The point is that people are using those browsers. The amount or users is quite irrelevant. If you ran a local candy store, would you throw out 2 of every 10 customers?

One would assume that a 'Standard' would be indocturned across more than just a single browser.

That is what "standard" means. And this is why Safari and Firefox are dramatically similar in most cases. It's IE that is not a standards compliant browser. IE7 is closer than IE6 but both are far from being standards compliant.

I realize that Safari has a small user base, but honestly it is by far the most standard compliant browser out there (and the only one that has color management built in.) By coding with the most compliant browser available you learn to code properly, then adjust for the browser issues. In 99% of the cases you'll find coding for Safari and Firefox will be seamless. There are very rare occasions where you must choose between one or the other for a particular code structure, but in general they are pretty much the same. If you don't want to code for Safari first, then code for Firefox first. But never, ever code a site using IE as the preview browser, ever.

As for testing IE6 and 7.. dual boot system. Or a Mac with Parallels and two Win installations.

[Gjbphp]

Originally Posted by Jolt

What difference does it make how many users are launching a particular browser? Even if the user base is 1.6% if 10 people visit a site I design 2 of them getting errors is unacceptable to me. 100% compatibility across browsers and platforms is always my goal. The point is that people are using those browsers. The amount or users is quite irrelevant. If you ran a local candy store, would you throw out 2 of every 10 customers?

1.6% means that out of every 1000 people, 16 of them might be using Safari, not 2 in 10.

Personally, I've never liked Macs, and as all of them appear to have Firefox and so on preinstalled, I code for Firefox, and take into account the quirks/benefits of IE. This works for 98.4% of the internet population.

[Sarcasm]Why not also code for Opera and a few other things, like old Netscape Navigator (RIP) at the same time? I have a friend who still runs that. In the end you have either a very limited site that works perfectly for everyone (and you've spent hours /day making it, testing it, dual booting it, etc). [/sarcasm]

[notjustgraphics]

Yes Jolt! I wholeheartedly agree that you should NOT code for IE first.

As for Safari, i have no experience with it's differences from firefox... every site i've done seems to work just fine in both. (Although i have encountered differences between the mac and pc versions of safari with padding)

My point was, and Gjbphp has eluded to it, that you can spend hours tracking down a solution to even 1 disrepancy and may never have a vistor to the site use Safari.

In fact more people use mobile browsers built into devices such as Blackberries, Cell phones, and iTouch Ipods than use Safari but most developers do not code for mobile devices unless their is a perceived need or a client requests it.

That said, if a person does want to ensure 100% browser compatibility regardless of the time required, then absolutley your approach makes complete sense and i would not have known to start with Safari... i have always coded for Firefox fixed for IE and checked it in Safari.

When you say Safari is the most Standard Compliant browser, to which standard does it comply? The W3 consortium Standard or the working standard (which seems to be non-standard)?

[kellygg08]

One more trick that I have discovered..

Validate your code. I find that if I do this, then go back and fix all the invalid tags it almost always fixes browser problems for me.

The W3C Markup Validation Service

[Jolt]

Ya know.. Mac-bashing is so 1980s and childish. I can't roll my eyes enough when someone starts spouting off bigotry about Macs. Most often they've never even touched one. They are simply another platform. I won't participate in any argument of that nature.

For the record, Macs do not have Firefox pre-installed. They use Safari. Being closed minded will never result in a good developer/designer.

[Gjbphp]

Originally Posted by Jolt

Ya know.. Mac-bashing is so 1980s and childish. I can't roll my eyes enough when someone starts spouting off bigotry about Macs. Most often they've never even touched one. They are simply another platform. I won't participate in any argument of that nature.

For the record, Macs do not have Firefox pre-installed. They use Safari. Being closed minded will never result in a good developer/designer.

I have indeed used Macs, the University of Zürich, where I completed my Master of Science in IT, had the choice of either Macs or Linux based computers for everyday use. Every one of the nearly two thousand Macs there has Firefox installed. So maybe instead of accusing me of bigotry, or Mac bashing, note the "Personally, I've never liked Macs", as I actually prefer Microsoft based pcs. So, sadly, I'll just have to continue being closed minded and a poor developer.

[chatake]

This is a common problem when developing sites. It is due to the fact that preset spaces are different in firefox/mozilla than IE. You can rectify this issue by resetting all paddings and margins (set them to 0) at the beginning of your CSS file for the tags you feel create the problem. I usually do that at the beginning of my CSS file and later on in the document set the appropriate margins and paddings.

If this is not enough you can also target your code for IE only, put the IE specific settings in a separate CSS file and have it load via a conditional rule (so that if at a later stage IE does not need the target codes anymore, you can simply remove them without having to search your whole CSS file )

[notjustgraphics]

Great tips Chatake

Here is a snippet of CSS that i put at the top of all my CSS files....

@charset "utf-8";
/* CSS Document */
/*------------------------------ GLOBAL RESET SETTINGS--------------------------- */

* {
margin: 0; padding: 0;
text-decoration: none;
font-size: 100%;
outline: none;
font-family:Arial, Helvetica, sans-serif;
}

code, kbd, samp, pre, tt, var, textarea, input, select, isindex { 
font: inherit;
font-size: 13px; 
}

dfn, i, cite, var, address, em {
font-style: normal;
}

th, b, strong, h1, h2, h3, h4, h5, h6 {
font-weight: bold;
}

a, img, a img, iframe, form, fieldset, abbr, acronym, object, applet {
border: none;
}

table {
border-collapse: collapse;
border-spacing: 0;
}

caption, th, td, center {
text-align: left;
vertical-align: top;
}

body {
line-height: 1em;
}

q {
quotes: "" "";
}
ul, ol, dir, menu {
list-style: none;
}

sub, sup {
vertical-align: baseline;
}

a {
color: inherit;
}

/* --------------------------END GLOBAL RESET ------------------*/

[Jolt]

Originally Posted by Gjbphp

Every one of the nearly two thousand Macs there has Firefox installed.(

The Macs did not arrive with Firefox on them. I've purchased Macs for over 20 years and not a single one comes with Firefox.

[Gjbphp]

Originally Posted by Jolt

The Macs did not arrive with Firefox on them. I've purchased Macs for over 20 years and not a single one comes with Firefox.

I'd have been very surprised if the first Macs came with Firefox, or actually if they came with any "software" at all