Member Avatar for innovativeatul

Can any one suggest some trick and tutorials to make table less layout compatible with all browsers. Say if we are making a 3 column layout how we can set the compatibility in IE AND Firefox

  • 5 Contributors
  • 4 Replies
  • 139 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by MidiMagic

Dani AI

Generated

Solid thread so far: gives a reliable classic approach, flags browser-specific hacks, rightly warns against overusing them, and points out box-model pitfalls. For a maintainable, future-proof three-column layout, prefer modern layout modules and a small set of engineering rules rather than per-browser hacks.

Make width math easier with box-sizing: border-box, then use CSS Grid (or Flexbox) for the columns. Example (replace class names as needed):

/* simpler width math across browsers */
*, *::before, *::after {
  box-sizing: border-box;
}

/* three-column using Grid */
.layout {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  gap: 16px;
}

Keep graceful fallbacks and feature detection rather than fragile hacks. Use @supports or Modernizr to apply Grid/Flexbox where available and provide a stacked or simpler flow layout elsewhere. Build a small toolchain (Autoprefixer/PostCSS) so vendor prefixes are handled automatically, and include a baseline stylesheet such as Normalize.css to reduce default-browser differences.

Practical checklist: 1) ensure a proper HTML5 doctype to avoid quirks mode, 2) use box-sizing: border-box so padding/borders don’t break widths (this addresses ’s point), 3) prefer Grid/Flexbox with @supports fallbacks, 4) validate markup (validator.w3.org) and use cross-browser services (BrowserStack) for testing, and 5) reserve hacks only for tiny, documented exceptions. Useful references: MDN on CSS Grid and box-sizing, and Normalize.css for a consistent baseline.

Recommended Answers

All 4 Replies

Member Avatar for cmills83

set your body padding/margins to 0, have a container div with a width then 3 divs inside with widths and float:left; is probably the easiest way. Just have ff, ie6 and ie7 open as you build the site and test along the way.
div { margin:0; padding:0; }
#container { width:850px; }
#div1 { width:200px; float:left; }
#div2 { width:400px; float:left; }
#div3 { width:250px; float:left; }

then html

<div id="container">
<div id="div1">col 1</div>
<div id="div2">col 2</div>
<div id="div3">col 3</div>
</div>

As you build the site post or google any specific problems you run into

Member Avatar for joshua.tilson

There are also numerous sites out there on "CSS Hacks" that will give you tips and tricks on getting your layout workign just right between browsers.

One the is popular is the <!--[if IE]> trick for style sheets
check it out

Good luck!

Member Avatar for vishwebdesign

Can any one suggest some trick and tutorials to make table less layout compatible with all browsers. Say if we are making a 3 column layout how we can set the compatibility in IE AND Firefox

Cross-browser compatibility is simple hard-work. Don't get involve too much in hacks, else you'll only complicate your css. Sometimes you just need to over-ride your styles and the work is done. If you've ever did table-less designs, you must be able to learn from your own mistakes and perfectionate your work.

Member Avatar for MidiMagic

Trick: For cross-browser-compatibility,You can't have defined widths in the same div that has margins, borders, and/or padding. Nest them in the order you want.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.