The Old Joel on Software Forum: Part 4 (of 5) - Cross-browser web development

Cross-browser web development

I'm finally getting around to putting up my own web site. (I'm just setting up the structure at this point, so I'm not posting a link. Sorry - the stub content is too cheesy :^))

When I look at it in IE it looks great, but in Firefox it blows. I'm no great HTML/CSS whiz, so I'm looking for some general advice.

Right now there are a lot of nested tables, and I think that's whats giving me the problems. If I figure out how to get rid of tables and do all the layout with CSS will the cross-browser issues be minimal? If so, what's a good CSS reference?

Nick
Friday, March 19, 2004

Here are some CSS links that I had bookmarked that proved useful (some are just reference sites):

http://www.yourhtmlsource.com/stylesheets/
http://www.tijs.org/css/
http://www.csszengarden.com/
http://129.69.59.141/css1pqr.htm
http://glish.com/css/
http://www.blooberry.com/indexdot/css/index.html

Hope this helps
Mike

MikeG
Friday, March 19, 2004

I'm no CSS guru, but I can confidently tell you that mainly due to IE's many layout bugs, CSS-only layout is a PITA when dealing with cross-borwser issues.

Greg Hurlman
Friday, March 19, 2004

Unfortunately using CSS won't eliminate cross browser issues. Plus CSS positioning has a bit of a learning curve, renedered harder by those same cross browser dfferences. In my opinion it's worth learning if for no ether reason than you stand a chance of understanding your markup six months later.

Using CSS or not You're much better off developing to a more stringent browser such as firefox and then fixing anything that doesn't work in IE.

IE often "forgives" invalid markup that won't display correctly on any other browser.

Ken McKinney
Friday, March 19, 2004

My experience with CSS positioning and layout leads me to the following advice:

Don't.

It's a completely unproductive waste of time to even try wrestling with the multitude of quirks for each browser.

Your best bet is to use CSS as much as you can, but stick with tables for page layout, etc because tables generally behave in a reliable, well-understood manner. Besides, the end user doesn't care how you implemented it.

Of course, if you're just using CSS positioning as an exercise in self-education that's different. In a business setting though, it's more important to focus on getting things done.

Burninator
Friday, March 19, 2004

If your site has problems rendering a complex table driven site in the Gecko engine (Firefox/Mozilla/etc) compared with IE, you may have a poorly coded table structure or badly nested tables or missing or poorly paired tags.

Poorly paired tags and bad nesting of tables is one of the reasons many developers ended up using CSS for layout - there isn't as much of a problem with that.

Note that CSS has some cross browser problems with positioning and display, but these are not very complex and can be worked around in most situations. However it is more than a first timer would probably be comfortable with.

If you'd like, email me your website (or post it here) and I'll take a look at the markup and see if I can't spot the error.

And always run your code through the w3c validator, it will help you catch most bugs related to open tags and nesting.

Lou
Friday, March 19, 2004

The original poster in this thread provides a link to a stylesheet called IE7 which apparently fixes any IE css bugs.

http://discuss.fogcreek.com/joelonsoftware/default.asp?cmd=show&ixPost=123659

Wayne
Friday, March 19, 2004

You might find that if you use a DOCTYPE (e.g. HTML 4) the rendering becomes a bit more consistent, take a look at http://www.alistapart.com/articles/doctype/

As a general tip try to avoid nesting tables too much because rendering deeply nested tables is really slow.

Walter Rumsby
Friday, March 19, 2004

If you have to provide pixel-perfect layouts in a cross-browser way, just shoot yourself.

Accept a little whitespace and that whitespace will be slightly different from browser to browser and you'll have a much easier time.

Richard P
Friday, March 19, 2004

Nick, are you coding the html by hand or what?

Li-fan Chen
Friday, March 19, 2004

Wayne said IE7 "...apparently fixes any IE css bugs." I hope he meant to type "many", not "any".

IE7 is a very cool hack, but it fixes bugs (and simple lack of implementation) related mainly to CSS selectors, the methods by which CSS can find the elements to which style rules should be applied.

Unfortunately, IE7 doesn't address most of IE's bugs regarding CSS layout, incl. the badly broken box model, in which IE applies extra space in the wrong direction around box borders, which means its calculations for width of elements with padding and margins come out wrong, as illustrated in Tantek Celik's Box Model Hack: http://www.tantek.com/CSS/Examples/boxmodelhack.html

This and a number of other deficiencies in IE's CSS support make it a nightmare for doing CSS-based layouts. There are workarounds -- mostly they consist of ugly, and uglier, hacks. They smell bad, and developers should know what that means.

I'd echo the thoughts above. Use a mixed model: basic tables (as simply built as possible) for creating the layout grid, and CSS for applying typographic style.

When it works, CSS makes things much cleaner, simpler and easier, so it works as its own canary in a coalmine: As soon as applying CSS makes things more painful, rather than less, you know you're skating on thin ice.

odinprotectsus
Friday, March 19, 2004

Just to clarify, my tables only have 1 level of nesting. The CSS is used to stylize the content, including cell shading and borders. I am hand coding it for the most part. The site won't be very and the content will be fairly static once it's set up.

Nick
Friday, March 19, 2004

"stylesheet called IE7 which apparently fixes any IE css bugs"

I think only Microsoft could fix the bugs. That guy made a kludge work around. MS is too busy with delayhorn to be bothered to make a standards compliant browser.

As400
Friday, March 19, 2004

"The original poster in this thread provides a link to a stylesheet called IE7 which apparently fixes any IE css bugs."

Eh? I haven't said anything. Until now!

John Topley (www.johntopley.com)
Sunday, March 21, 2004

Building sites using Web standards (layout-table-free XHTML, CSS, and JavaScript/DOM) can give you nice clean code that saves bandwidth, makes pages accessible for people with disabilities, is easier to maintain and redesign, automatically works on other devices like PDAs, and is backward- and forward- compatible.

The CSS layout stuff has a bit of a learning curve, but using CSS for as much as possible will save you time in the long run. It's not the end of the world to use a table for basic layout if you really have to, either.

One of the central ideas in the Web standards approach is that, aside from a few CSS hacks to get around some browser issues, you don't do any specific coding for individual browsers--no more sniffin.'

Check out:

http://www.zeldman.com/dwws/
http://www.meyerweb.com/eric/css/
http://www.webstandards.org
http://www.alistapart.com

Bob
Monday, March 22, 2004