How can I develop a CSS based layout that is 100% browser compatible?

Question

We are in the process of creating a few layouts for various external and internal websites.

One of the developers is using the not-so best practice of switching his CSS file (one for FF and one for IE) based on the user agent. :/ Others are sticking with table based layouts because they are browser compatible.

I would like some minor guidance into how to use CSS to layout and arrange elements. This must be browser compatible. Grid layouts or "CSS frameworks" cannot be used as they are not flexible for what is being done here.

For example, if we are given images from an outside design firm that are 90 pixels wide, we are not going to fit them into an 60px width grid cell. And we are not going to resize them to fit. If the firm designs the main page it would look silly to click on a link and see all of the filler logos/graphics reduce in size.

Need some kind of resource or advice to point me in the right direction.

Edit: here is the added twist. We do not touch any HTML, we are using component based design from JSF and Oracle ADF... They will render HTML, we use CSS to align and style them.

Edit2: We can add styles and attributes to the HTML before it is rendered. Just keep in mind that there is no .html file we are editing, it is being generated by the components.

Answer 1

As far as layout you can see if this site can be a good reference. http://matthewjamestaylor.com/blog/perfect-2-column-left-menu.htm

Also there are frameworks such as Blueprint.

Yahoo also has css framework which is more complicated.

Answer 2

The only real way to get layouts working across browsers is to spend time testing in every browser. Various versions of IE have their own special problems, so use conditional comments to serve additional stylesheets to them.

Start with good semantic valid HTML and don't try anything too complicated with the layout and you'll be fine.

If you don't want to use use a CSS library/framework, it comes down to experience and testing.

Answer 3

A common approach these days is to write your CSS so that it works for Firefox (and other modern non-IE browsers), and then add IE-specific fixes using IE conditional comments.

Unfortunately, any page layout that isn't trivially simple is going to run into bugs in IE 6 and IE 7 that can only be solved by giving those browsers slightly different CSS.

And at the end of the day, you have to test your HTML/CSS in all the browsers you're targeting; there really is no substitute for this.

Answer 4

100% browser compatibility? Sounds like you need some sort of unholy devil magic and/or a lot of cursing and crying.

If you don't want to use any type of grid layout or CSS framework, you're going to be stuck having to just do a lot of trial and error and a LOT of checking for differences between the browsers.

Good luck in your endeavor. You'll need it.

Answer 5

100% browser compatible websites probably comes mostly from experience combined with trial and error - mostly. It has become easier with the launch of IE8, as it is (at least) fully CSS2-compliant. You'd still want IE7 and IE6 to work reasonably well, though. Thorough testing is vital.

Keep in mind that 100% browser compatible doesn't necessarily mean they have to look identical (Should websites look the same in all browsers?). Minor differences should be accepted for a complex layout, and will probably have to be there for some time.

Here's a few links that might be worth to take a look at:

• Little Boxes
• Containing floats
• HTMLdog Advanced CSS
• http://layouts.ironmyers.com/

Answer 6

The only thing I can add to @Edeverett and @Dev.e.loper's responses is the suggestion to combine them.

Start with solid, valid, semantic (meaningful) (X)HTML markup. Keep it simple from the markup perspective. Use a well known CSS Library/Framework. Test, Test, Test.

Answer 7

There is no way to create a CSS based layout that is 100% compatible in all browsers because there are browsers which don't pass the ACID test. In fact, most browsers don't pass this test.

You can only hope for something which looks good on all browsers (or which degrades gracefully on browser with bugs and/or "features").

This is by design: CSS was never meant to make things look the same on all browsers, it's just a way to tell the browser what you want. Browser developers are pretty free what they should do with your wishes.

Answer 8

Browsers are different in their rendering. It's not a bad thing to have clean, separate CSS files rather than hacking a single file that "just-about-works" in every browser.

Although rare, there is a time and a place for tables, and you've just got to pick out when that is. When dev time and UI take a reasonable sacrifice for the sake of "best-practise not using tables" you're not necessarily onto a winner.

Every layout is so utterly different in its nuances that browser bugs(/differences) are impossible to predict accurately - although some are more common than others.

I mention differences as well as bugs because a lot of where browsers are inconsistent with each other is down to different and possibly equally valid interpretations of the HTML standard.

As for guidance on browser compatibility there is no one solution other than to test, test, test.

Install as many browsers as possible (FF, Chrome, IE, Safari, Flock, Opera etc.). But it gets tricky keeping different versions of different browsers running concurrently. This is where websites like browsercam.com (commercial) and browsershots.org (free) come in handy. They take snapshots of your website in about as many browser/OS combinations as you could think of.

Browsercam.com actually lets you log into machines and play around with the sites aswell, which can be handy debugging interactive CSS and JS.

My advice would be:

• Read a couple of books on CSS
• Check to make sure you're not using anything browser specific (if you're unsure, check everything on Google) - for example any CSS properties starting "-moz" are specific to Mozilla based browsers (like Firefox)
• Test, test, test

Finally, remember to make sure you understand DocTypes and how they affect your CSS; exactly the same CSS in the same browser will be different with a different DocType. It defines how the browser treats your (X)HTML and CSS. So watch out when you're wondering why "this worked on xyz.com but not here!"

Answer 9

Ok. I know I am going to get a million boos for this, but if you feel, that your css is getting overcomplicated, if you see, that you are using a hack for every browser you are supporting, if you can't take it no more, just use the gosh darn tables!

Putting that aside, the only way to ensure, that your markup/styles work in every browser (by the way, define "every" - are we talking IE6 every?) you have no way, but, as people already indicated, test it in all those browsers. I've seen people use some third-party sites for that, say browsershots.org to limited success. Maybe that will help you.

Answer 10

Firstly, you need to pick one methodology and stick with it. Having one developer do things one way and others do it in a diametrically opposite way is asking for trouble before you even start.

Secondly you need to throw away the idea of an identical experience in every browser - if that's hard to grasp then think of it this way: A browser is only a single way for your users to consume your content. Are you also planning on offering an identical experience to every person visitng your site using a mobile browser? or a text based browser? Or a screen reader? What about IE5? What about the thousands and thousands of user-agents available to your users?

It's not all bad news. There are a lot of resources out there that can help with getting layout correct using CSS and plently more that can help with the bugs inherent in IE. Some you might find useful are:

• Position is everything
• PPK's QuirksMode
• A List Apart

Answer 11

I would suggest that the first step would be to use some form of reset stylesheet (Eric Meyer's version is here: http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/ and the YUI version here: http://developer.yahoo.com/yui/reset/) to take away the browsers' default styles which seems to be the basis for some of the browser inconsistencies. It doesn't entirely level the field, but it smooths some of the bumps out of the way for a cleaner starting point.

Answer 12

My advice is to just start trying to make it work. When you come across a problem, google for an answer for a while. If you can't find one THEN ask a question in a forum. I think this is how most people learn their CSS craft as a lot of the bugs and fixes are far from obvious and you just have to gradually become a victim of, and then learn the solution to all the CSS browser bugs that are out there.

Answer 13

MY advice would be to stop trying to make it 100% cross-browser compatible. Spend your time and resources designing for the big boys - IE7/8, FF, Safari, (Chrome?), and MAYBE Opera as they most likely represent over 98% of your viewing audience. You could include IE6 in there too, but cmon, it's 2009 already and we're two browser versions away. Designing for IE6 now was like designing for IE4 when IE6 came out. But that's your call.

In my experience, for the 1-2% of users using non-standard browsers, it's not worth your time (which last I checked, equalled money) to try and please everyone. However, if time and money are unlimited, have fun pulling your hair out.

Oh, and send me some of that money, since it's unlimited and all :D

EDIT - start your developing in FireFox and tweak from there. It seems to be the most "correct"