How to Achieve a Consistent Layout in All Browsers

How can I achieve a consistent layout in all browsers?

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:

https://stackoverflow.com/questions/72394/what-should-a-developer-know-before-building-a-public-web-site

What is the best technique for consistent form, function between all web browsers (including Google Chrome)?

I am in a similar situation, working on a web app that is targeted at IT professionals, and required to support the same set of browsers, minus Opera.

Some general things I've learned so far:

• Test often, in as many of your target browsers as you can. Make sure you have time for this in your development schedule.
• Toolkits can get you part of the way to cross-browser support, but will eventually miss something on some browser. Plan some time for debugging and researching fixes for specific browsers.
• If you need something that's not in a toolkit and can't find a free code snippet, invest some time to write utility functions that encapsulate the browser-dependent behavior.
• Educate yourself about known browser bugs, so that you can steer your implementation around them.

A few more-specific things I've learned:

• Use conditional code based on the user-agent only as a last resort, because different generations of the "same" browser may have different features. Instead, test for standards-compliant behavior first — e.g., if(node.addEventListener)..., then common non-standard functions — e.g., if(window.attachEvent)..., and then, if you must, look at the user-agent for a specific browser type & version number.
• Knowing when the DOM is 'ready' for script access is different in just about every browser. A good toolkit will abstract this for you.
• Event handlers are different in just about every browser. A good toolkit will abstract this for you.
• Creating DOM elements, particularly form controls or elements with attributes, can be tricky with document.createElement and element.setAttribute. While not standard (and kinda yucky), using node.innerHTML with strings that contain bits of HTML seems to be more reliable across browser types. I have yet to find a toolkit that will let you use element.setAttribute to add a 'name' to a form element in IE.
• CSS differences (and bugs) are just as important as JS differences.
• The 'core' Javascript features (String, Date, RegExp, Array functions) seem to be pretty reliable and consistent across browsers, especially relative to the DOM/CSS/Window functions. There's some small joy in the fact that the language isn't entirely different on every platform. :-)

I haven't really run into any Chrome-specific JS bugs, but it's always one of the first browsers I test.

HTH

Consistent font-size across browsers (web development)

Use px (pixels) instead of pt (points) for your font size units. Then you'll be dealing with pixel sizes.

Beware however, depending on how your site is used. There have been lawsuits (in the US) over accessibility issues on websites that result from "hard-coding" the font size.

Image sizing not consistent in different browsers

Instead of just setting height and width, set both min and max:

const StoryThumbnail = styled.img`
  min-width: 240px;
  max-width: 240px;
  min-height: 220px;
  max-height: 220px;
  object-fit: cover;

  @media (max-width: 900px) {
    width: 100%;
    min-height: 350px;
    max-height: 350px;
  }
`;

Creating layout for a specific browser

use these(put it on the head):

Target ALL VERSIONS of IE

<!--[if IE]>
    <link rel="stylesheet" type="text/css" href="all-ie-only.css" />
<![endif]-->

Target everything EXCEPT IE

<!--[if !IE]><!-->
    <link rel="stylesheet" type="text/css" href="not-ie.css" />
 <!--<![endif]-->

Target IE 7 ONLY

<!--[if IE 7]>
    <link rel="stylesheet" type="text/css" href="ie7.css">
<![endif]-->

Target IE 6 ONLY

<!--[if IE 6]>
    <link rel="stylesheet" type="text/css" href="ie6.css" />
<![endif]-->

Target IE 5 ONLY

<!--[if IE 5]>
    <link rel="stylesheet" type="text/css" href="ie5.css" />
<![endif]-->

Target IE 5.5 ONLY

<!--[if IE 5.5000]>
<link rel="stylesheet" type="text/css" href="ie55.css" />
<![endif]-->

Target IE 6 and LOWER

<!--[if lt IE 7]>
    <link rel="stylesheet" type="text/css" href="ie6-and-down.css" />
<![endif]-->

<!--[if lte IE 6]>
    <link rel="stylesheet" type="text/css" href="ie6-and-down.css" />
<![endif]-->

Target IE 7 and LOWER

<!--[if lt IE 8]>
    <link rel="stylesheet" type="text/css" href="ie7-and-down.css" />
<![endif]-->

<!--[if lte IE 7]>
    <link rel="stylesheet" type="text/css" href="ie7-and-down.css" />
<![endif]-->

Target IE 8 and LOWER

<!--[if lt IE 9]>
    <link rel="stylesheet" type="text/css" href="ie8-and-down.css" />
<![endif]-->

<!--[if lte IE 8]>
    <link rel="stylesheet" type="text/css" href="ie8-and-down.css" />
<![endif]-->

Target IE 6 and HIGHER

<!--[if gt IE 5.5]>
    <link rel="stylesheet" type="text/css" href="ie6-and-up.css" />
<![endif]-->

<!--[if gte IE 6]>
    <link rel="stylesheet" type="text/css" href="ie6-and-up.css" />
<![endif]-->

Target IE 7 and HIGHER

<!--[if gt IE 6]>
    <link rel="stylesheet" type="text/css" href="ie7-and-up.css" />
<![endif]-->

<!--[if gte IE 7]>
    <link rel="stylesheet" type="text/css" href="ie7-and-up.css" />
<![endif]-->

Target IE 8 and HIGHER

<!--[if gt IE 7]>
    <link rel="stylesheet" type="text/css" href="ie8-and-up.css" />
<![endif]-->

<!--[if gte IE 8]>
    <link rel="stylesheet" type="text/css" href="ie8-and-up.css" />
<![endif]-->

Different browsers show different page heights

The possible reason to why you get black space at bottom or a scrollbar is the way browsers work with percentages calculations. You can find an explanation Here.

The trick will be to define #footer outside of container and set

#footer{
position: absolute;
bottom: 0;
width: 100%;
height: 9%;
}

And also set height of #header to 9% to allow for contingency in calculation.

How do you keep zoom between pages consistent? via CSS?

Because the zoom level is controlled by the browser itself, the way it behaves on a per page basis cannot be adjusted using CSS/HTML/JS.

A workaround would be to create custom zoom buttons with JS and the CSS transform property. You would then want to save the zoom level to a cookie and apply the current saved zoom level to each page the user loads.

---

Related Topics