How can I achieve a consistent layout in all browsers?

By : fmsf

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).


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

By : fmsf


I find the best policy to avoid pain is to follow these rules:

  1. Build in a more-compliant and developer-friendly browser like firefox first, test thoroughly in IE (and safari/chrome(webkit) and opera) periodically.
  2. Use a strict doctype- you don't necessarily need perfect markup, but it should be very good — good enough to avoid browser quirks modes, since quirks are by definition not standard
  3. Use a reset style sheet. Note that depending on the sheet's contents this item may be incompatible with the goal of #2.
  4. Use a javascript framework like jQuery or Prototype - they can hide some javascript and DOM incompatibilities.
  5. Use good semantic layout- it's more likely to degrade nicely for a mis-behaving browser
  6. Accept that it won't be perfect and don't sweat the really small variances

Follow those rules and there aren't as many problems in the first place.

For a TODO reference, see this question:

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

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.


By : Haoest

This video can help you solving your question :)
By: admin