Is Firefox a P.I.T.A. to design with?

[lozina]

As much as I like using Firefox for web browsing it's got some pretty quirky behavior when it comes to trying to design a web page on it. I have a simple table that has a width of 600 and I set align to center, yet it does not center. I'm guessing firefox gets screwed up because there is a div inside the table (despite the div having a fixed width), because on another similar table it aligns just fine. Anyone else have a similar problem and found a way around it?

 

[lozina]

Well I found out what was confusing Firefox but I really don't know why. I had a CSS class on that table which included "margin : 10px". As soon as I removed that one property, the table centers.... odd

 

[kamper]

Firefox is an excellent place to do design. It generally has very good standards support. If you find something working on another browser (IE) that isn't working on firefox, you're probably breaking standards (but of course there are always exceptions to that). Check out the WebDeveloper plugin. It gives you easy access to viewing the internals of your layout in a number of ways (like outlining table cells, divs and the like).

 

[CTho9305]

IIRC, stuff like "align" doesn't propagate down into tables they way you probably expect. Also, you're likely confusing align and text-align. Before complaining that the layout is "wrong", you need to run your code through a verifier, and figure out if you want to render in "standards" or "quirks" mode (the behavior can be different sometimes - "quirks" mode does some things a little more like IE, while "standards" modes tries to do the layout correctly).

Firefox and SeaMonkey are excellent for designing pages - I highly suggest looking at the DOM Inspector - it can be very helpful when you're trying to figure out why something shows up the way it does.

 

[fs5]

WebDeveloper plugin, colorzilla, and dom inspector are great for firefox. Microsoft's script debugger is better than firefox's javascript console though..

For html/layout firefox adhere's to standards. However, for javascript it can be a pain in the a$$ for dhtml. You write a lot more code to work around some of the quirks in firefox when doing dhtml.

It also is much more lenient when it comes to javascript. It lets you slide on many more things in IE. So when you fire the page up in IE you spot bugs much easier than in firefox.

 

[CTho9305]

Microsoft's script debugger is better than firefox's javascript console though..

There's much more than the javascript console - the DOM Inspector and Venkman (the JavaScript Debugger) are both powerful tools.

You write a lot more code to work around some of the quirks in firefox when doing dhtml.

Quirks in Firefox, or standards bugs in IE?

It also is much more lenient when it comes to javascript. It lets you slide on many more things in IE. So when you fire the page up in IE you spot bugs much easier than in firefox.

I've found the opposite. Working in a stricter environment helps catch problems better - if Firefox warns me about "Warning: Undeclared variable coutner" (enable JS Strict Mode for extra reporting), I'll realize I typo'd "counter". That's a simple example, but there are more complex cases where the stricter environment helps significantly.

 

[fs5]

Originally posted by: CTho9305
I've found the opposite. Working in a stricter environment helps catch problems better - if Firefox warns me about "Warning: Undeclared variable coutner" (enable JS Strict Mode for extra reporting), I'll realize I typo'd "counter". That's a simple example, but there are more complex cases where the stricter environment helps significantly.

right, I was saying IE complains more than firefox. As for venkman, I haven't tried it but I'm sure as hell going to check it out now.

 

[hdeck]

gotta use the box model hack when you are creating that stuff in css or it won't show up correctly.

 

[kamper]

Originally posted by: CTho9305
Venkman (the JavaScript Debugger)

:thumbsup: Can be a little tricky to work with at times but it sure gets the job done.

 

[dukdukgoos]

Firefox is much easier than IE to develop with... IF you code to W3C standards. When you set margin: 10px on the table, you told it to have a 10px margin on all sides of the table, including the left and right sides. This overrides how you properly center something, which is to set the left and right margin to "auto". Try changiing your rule to "margin: 10px auto"

 

[Zugzwang152]

test with any gecko-based browser, fix for IE later. I typically test a page with Firefox, Opera, IE and Netscape on Windows, and Safari and Firefox on the Mac.