How can I achieve a consistent layout in all browsers?

Question

Hey,

I'm near ending the repetitive alarms at my little learning project. It's still full of bugs, but as it is a weekend project I'm correcting them slowly. My problem is inconsistency of layout across browsers.

At the moment, I'm trying to improve the "My Alarms" box after login (Just don't try to hack my website, it's still very unstable).

Question

What kind of tricks, hacks, tips, etc. can you give me to ensure cross-browser layout compatibility?

Answer 1

Design and test against FireFox...

Then make the few changes needed for working in IE.

I'm an IE guy, but this drives me crazy when I have it looking good in IE and then Firefox gets it right/wrong. I understand Firefox is closer to standards, but IE makes good assumptions... so

ARGH! )

Answer 2

Code to a standards-compliant browser first, then use conditional stylesheets to fix the issues in various versions of IE. Most other problems will be minor, it's IE that generally requires the most effort to force it to match up.

Answer 3

You need a proper doctype so that the page renders in standards compliant mode.

W3C: Recommended list of DTDs

Keep to the standards as far as possible. That's what the browsers are built to follow, so that is the best common ground that you can find. Also, that is what browsers will follow in the future, so you get the best possible prediction for how the code should look to work with future browser versions.

When building, first test the page in a browser that is not Internet Explorer. If you first build for IE, you will be relying on it's rendering errors, and then you will have great problems to make it look the same in browsers that doesn't have those errors. Firefox is the most common non-IE browsers, and also one of the most neutral when it comes to following the standards.

The Firebug add-on for Firefox lets you see exactly what styles are applied to each element, and you can also tweak the styles in real time, so that is a very handy tool.

Try to make the layout as simple and robust as possible, and keep to the original semantics of html if possible. Search engines look for content in elements that was intended for it, like a header in a h1 tag, and text in a p tag, so by following the original intention for the markup you make your page more visible on the web.

You may have to add some extra styles to suppress quirks in IE, like specifying a height for elements that should manage to figure out their height by themselves, adding display:inline; to floating elements (which still will be block elements) to fiddle the internal rendering flags of IE, or using overflow:hidden to suppress the urge of IE to make all elements at least one character high. Use padding rather than margin where either works, as IE has problems to collapse margins correctly.

Use conditional tags only as a last resort. By using version specific code you get code that you may have to maintain for every new browser version that is released.

Answer 4

In addition to Joel's answer, I've found that it helps to keep things simple as much as possible. Also, using wrapping divs helps a great deal - you can apply simple styles to the wrappers that ought to work across all browsers.

Answer 5

My ticket into oblivion: Use nested tables for design. Another method is: just create your site as a big image instead of html. Downside is, it is slow and limits functionality.

Answer 6

It sounds silly, but for each request, you can render all your content to a single image file, then respond to the request with nothing else but that one file.

Okay?

Answer 7

I work hard to ensure my website designs are cross browser compatible. My process is as follows:

1. Sketch the rough layout idea in photoshop. or even on a piece of paper.
2. Mock up a screen shot in photoshop (insert fav photoeditor here).
3. Start building the site based on the above design.
4. Decide which browsers are important to be compatible with.
5. Test the site with each major design change with these browsers
6. There are some CSS hacks which I've been forced to use inorder to get all of the target browsers working. I try to avoid stooping to these as they may have longer unexpected side effects with some future browser version.
7. Last step is to review the final product in all of the test browsers. There will be minor differences, this is where you need to decide when to draw the line. Because a LOT of time can be easily spent pushing pixels.

Generally speaking I target the top 4 browsers: IE-7, IE-8, FF, Chrome & Safari. I recently used a CSS hack for fixing an issue with IE-7:

width: 50px;
*width: 45px;  /* IE-7 Hack */

This works by using a little bit of invalid CSS (*) the other browsers listed will correctly ignore this hack, but IE-7 reads it. As it is read last it is applied

hint: consider the actual browser market share. This may differ significantly with your actual visitors. Record which browsers are visiting your site at some future time and ensure you are covering at least the majority of the browser makes + versions