Firefox V/s Internet Explorer For Web Design

[saqib431 0]

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 0]

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.

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/wiki/Box_Model_Hack

[stevethedog 0]

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 4]

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 testApparently Firefox 3 Alpha meets the Standards, too, but it isn't ready for a public release yet, although there is a Topic on the Xisto which offers a download for testing. Search the Trap for the posting by Buffalohelp.

[odomike 0]

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 0]

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 0]

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

[odomike 0]

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 0]

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 0]

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 :XD: And I must tell you you can extract many crucial parts of a site with it

[jlhaslip 4]

Hey, Snake, grab the Firefox Web Developer's Extension and play around with it. It is an amazing tool... :XD:

[Codemaster Snake 0]

Sure I'll check it out!

[mahirharoon 0]

best way is to make firefox code and ie code then with js make them compactible by using the 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

Notice from rvalkass:

Added CODE tags.

[Sprnknwn 0]

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.

[gogoily 0]

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