OK, bit the bullet the other day and installed firefox. Added a couple of plugins to get it working just the way I want. Pretty slick little browser I must say. So I decide to take a look at my asp.net site which I'm currently working on, and it looks terrible in firefox. In explorer it looks ok. The problem is I have no idea of where to begin to try and figure out what's wrong.

I'm sure others must of had this problem, so any helpful hints, tricks or websites to get things to render correctly would be helpful. I believe firefox is more html compliant than explorer which begs the question, should I be focusing on designing the website with firefox in mind?

You should design with both in mind. Firefox and IE interprete position using css and many other small issues that cause sites to look completely different. What types of problems are you experiencing? Do you have much css in your design? If so there are many sites and blogs that talk about the individual issues you'll find through a google search. Another great resource is Eric Meyer he has two books that are well respected. His second book helped my make the move from table positioning to a strong css design. Everything doesn't have to become css, since some things are more natural in tables. Here's his site http://meyerweb.com/. Let us know any specific problems you run into and we'll be able to help.

You should design with both in mind. Firefox and IE interprete position using css and many other small issues that cause sites to look completely different. What types of problems are you experiencing? Do you have much css in your design? If so there are many sites and blogs that talk about the individual issues you'll find through a google search. Another great resource is Eric Meyer he has two books that are well respected. His second book helped my make the move from table positioning to a strong css design. Everything doesn't have to become css, since some things are more natural in tables. Here's his site http://meyerweb.com/. Let us know any specific problems you run into and we'll be able to help.

Thanks for the info, I will take a look at the myer site shortly. Basically, I have a site designed around tables but have several css files. I have a ui control suite that uses these css files for displaying controls. While the controls seem to render ok in both browsers, it's really the table stuff I think which is causing me the problems. Table cells get out of whack, and if I change things to work in firefox(width, align, etc,) it then renders incorrectly in explorer. The reverse also happens aswell (making it work in ie, causes firefox problems) It's really frustrating as I'm no html, css expert. So your insights are helpful and I hope it will lead me to a solution.

Thanks

I would really recommend this book http://www.amazon.com/gp/product/0735714258/102-5445824-9116930?v=glance&n=283155&n=507846&s=books&v=glance I was an all tables guy for a long time, since I always did programming and not much site design. He talks a lot about how to transition to css. It's difficult to make something show up correct in the two different browsers though. Firefox is much better at strictly interpretting the standards, while IE has been around a lot longer and so they can't just change how they interpret things or all of the working sites would start breaking. This is another decent site http://www.positioniseverything.net/ .

erichar11 wrote:

...it's really the table stuff I think which is causing me the problems. Table cells get out of whack...

double check all your closing tags, IE is very forgiving when it comes to missing closing tags in tables.

It can take a little while to get everything working the way you want in both browsers. Of couse, it is also compounded by the way Visual Studio "helps" you when it generates code for you.

For starters, you should run your code through the following validation services: - XHTML Validation: http://validator.w3.org/ - CSS Validation: http://jigsaw.w3.org/css-validator/

Of course, you won't be able to get it to pass all of the XHTML validations because of Visual Studio (should change with VS2005), but you really can't bother trying to compare one browser to the other or work through presentation issues until your code is as valid as possible. As the previous poster mentioned, IE is pretty lenient in "correctly" interpreting and displaying some pretty awful XHTML output. But more stringent browsers like FF to balk at trying to interpret it.

I would also recommend Dan Cederholm's two books on CSS. Visit http://www.simplebits.com/ for more info.

Of course, one quick and cheap way to learn is to View Source on the author's site and figure out how they put together their HTML.

Two other recommended sites: - http://www.quirksmode.org/ - http://www.alistapart.com/ - You will probably need to search the archives as they covered a lot of CSS basics a year or two ago.

Hope that helps!

erichar11 wrote:

I believe firefox is more html compliant than explorer which begs the question, should I be focusing on designing the website with firefox in mind?

Yes, that is how I design sites these days. If it works in FF, it should work in IE (including JavaScript). And then it should also work in the later versions of Netscape also. And generally Opera falls into line also with just a little more work. Plus, when you code to the specifications and standards and something doesn't work correctly, you always have the high ground knowing that your code is correct and valid and that it is the browser that isn't interpreting and implementing the standards correctly.

For the record, before FF I used to code specifically for IE. I leveraged all of their JavaScript extensions (JScript) as much as I could; relied on how they interpreted CSS; etc. But once FF gained ground and proved itself, I changed my tune and starting coding (as much as possible) to standards. I'm not much of a designer, but I like the black and white implementation of standards to get results.

Thanks everyone for the help. After doing some reading on the sites mentioned above I had a suspicion that my problem was the "border box problem". So I downloaded this firefox extension called WebDeveloper, http://chrispederick.com/work/webdeveloper/ It's pretty slick. The extension has a toogle to display firefox using ie's border box method, and viola, everything rendered exactly like ie. Just modified a css class and problem was solved. Well, not quite, but I'm getting there.