Firefox V/s Internet Explorer For Web Design

saqib431

Jul 23 2007, 06:22 AM

hi friends.
I have noticed one thing that when we surf web with columns on it we see that internet explorer shows the site in a nice way.
But when we surf the same site with firefox, it destroys the whole structure of site. and shows the columns very clearly and boldly.
Can any body tell me what's wrong with firefox?

9block

Jul 23 2007, 06:40 AM

I believe it has to do with the difference the browsers read and interpret CSS. CSS is a language used to modify the apperance of web elements such as fonts, paragraphs, tables, ect. There is a problem with the way FF and IE read the "padding" command. Now depending what browser the CSS coder used... the results may vary with overlap or thinker borders/gaps.

I first found this out when I was working on 9block.789mb.com - if you view the site in Ie and FF, it looks different. I coded it in FF tho, so its optimized for FF (I never finished the site, or plan on it.). With a little research on google, i've found they have called this the IE Box Model Problem... and it is a mistake on IE's part - not FF's.

QUOTE

According to the W3C, an assigned 'width' (and 'height') of a box refers to the 'content area' of a box only. The padding, borders, and margins are then added to this value to arrive at the total box width. If the 'width' property is omitted, the total box width is the same as the 'content area' of the surrounding container element.

All well and good. Unfortunately, all CSS enabled versions of IE before IE6/strict use a different box model. In that model, the padding and borders are counted as part of any assigned 'width' or 'height'. In the absence of borders and padding, the two models agree. However, if a box has an assigned "width', and if borders and/or padding are added, the standard box model causes the overall box width (between the outer border edges) to increase, while in IE's model the 'content area' gets squeezed by the same amount. This is a major problem for proper page layout.

You can read more here: http://css-discuss.incutio.com/?page=BoxModelHack

stevethedog

Jul 23 2007, 07:21 AM

I've been a firefox man for years but I am starting to come around to IE7 as I have more and more problems with firefox's compatibility.

jlhaslip

Jul 23 2007, 01:05 PM

The Box Model is interpreted differently on the two Browsers, as already pointed out. And IE7 is better at rendering to the W3C Standards as pointed out, also. In addition, these Browsers also handle Table based Layout differently, too, And Floats, Margins, etc.
Firefox is nearer to being a Compliant Browser, so I recommend coding in Firefox and hacking for IE6/7. Use the IE Conditionals to alter your CSS file for them. The IE-only CSS file needs to contain overrides for the 'broken' CSS, not all the CSS.

Opera and Konquerer are the only Browsers which meets the Standards completely. (not sure about Safari) There is a site which demonstrates W3C Compliance using a CSS-based image.

search:Acid 2 test

Apparently Firefox 3 Alpha meets the Standards, too, but it isn't ready for a public release yet, although there is a Topic on the Trap17 which offers a download for testing. Search the Trap for the posting by Buffalohelp.

odomike

Jul 23 2007, 01:12 PM

I think its most likely because of the mozilla engine. Thats y firefox is behaving that way. It once messed up my site. When I view the site on internet explorer, everything will be fine but once I switch to firefox, it distorts a lot of the cells and tables in there.

Well,I had to find a work-around that problem and I was finally able to correct it. I would advice you to use both internet explorer and firefox when designing your website because they use different engines n like you all know, not every web surfer uses internet explorer. It wont be like when someone, somewhere views your website, the who0le thing will be in shambles.

For me, I have Internet Explorer, Mozilla Firefox, Netscape 9.0b and Opera all installed in my computer. This is because I use all ofthem to troubleshoot my websites in case of errors.

fffanatics

Jul 23 2007, 09:20 PM

IE and Firefox both interpret CSS in different ways. Firefox tends to follow the standards better than IE but as a web designer, i make sure my site looks best in IE since it still is the most used browser. However, there are ways to make your website look good in both of them and all the other browsers. To do this, you just make sure you test your site on all the browsers you have and make sure that you design it in such a manner that you are able to find work-arounds for what the browsers interpret incorrectly.

Soviet

Aug 13 2007, 09:24 AM

When i m doing webs im doing it for Firefox.. IE is bad for me. Im using Firefox many years

odomike

Aug 18 2007, 05:23 PM

QUOTE

I've been a firefox man for years but I am starting to come around to IE7 as I have more and more problems with firefox's compatibility.

Ok wel;, I aint having any problems whatsoever with firefox n the rest of 'em. My problem here is internet explorer which keeps on distorting my web pages n it aint displaying the tables, cells, rows n columns in a proper manner.

arnz

Aug 20 2007, 07:37 AM

I would try to make the site as compatible to most browsers as possible. Of course they are some aspects which may seem only workable to the Windows operating system, considering the Microsoft monopoly, but it seems many WYSIWYG editors do try to include test functions to many multiple browsers.

Codemaster Snake

Aug 20 2007, 10:28 PM

I think for serious web designing one should consider testing the final product on every possible platform. THerefore one should design keeping n mind the framework of every popular browser. Wether it's IE or FF. You should test it on every explorer. You can never be sure that your site will alwys be viewed on IE or FF. every one can browse your site with his fav. explorer.

P.S I know some geeks in my circle who use lynx for browsing

And I must tell you you can extract many crucial parts of a site with it

Latest Entries

gogoily

Dec 6 2007, 04:24 AM

You should consider the CSS display differences between FF and IE when you design webpage

Sprnknwn

Nov 29 2007, 05:02 PM

I know it sucks, but a good designer should try to make their design looks good and with the less differences possible in all browsers. It sucks because if you think about it, it shouldn't be work of the webmaster, but of the browsers that should unify their criteria. But, as they're competitors, I suppose this won't happen and we'll have to be doing tricks and fixes forever just to make websites that look decent in both (and others like Opera, Konqueror, Safari...). People used to make websites thinking in how IE would read them but nowadays fortunately the thing is changing and I admit that I give priority to Firefox.

mahirharoon

Nov 29 2007, 04:51 PM

best way is to make firefox code and ie code then with js make them compactible by using the code :

CODE

if(navigator.userAgent.indexOf("Firefox") != -1){
var nxturl = "browserfx.html";
}

else if (navigator.appVersion.indexOf("MSIE") != -1){
var nxturl = "browserie.html";
}

else {
var nxturl = "browsidmi.html";
}

document.location = nxturl;

browserie.html is ie compactible page
browserfx .htmlis firefox compactible page
browseridmi.html is for the rest

Added CODE tags.

Codemaster Snake

Aug 20 2007, 11:30 PM

Sure I'll check it out!