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

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.