Member Avatar for Member #46692

Hi all,

I'm making a website in front-page and I am using tables.

When rendered in other browsers such as Opera, chrome etc the positioning seems all different. Why is this, and is there a better way to do it?

Like maybe css?

  • 2 Contributors
  • 3 Replies
  • 93 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by Member #46692

Dani AI

Generated

Good progress so far — found a practical fix and pushed the right direction by moving layout control into CSS. Cross‑browser table differences usually come from a few concrete causes: missing or old DOCTYPE (which triggers quirks mode), different browser default styles and font metrics, and extra markup emitted by WYSIWYG tools like FrontPage. Confirm a standards DOCTYPE and validate the HTML to rule out markup problems (see the W3C validator). For background on quirks vs standards rendering refer to the MDN notes on quirks mode ().

If staying with tables, force predictable column behaviour with explicit widths and the CSS table layout algorithm rather than leaving browsers to guess. Example:

table {
  table-layout: fixed;
  width: 800px;
}

For a more future‑proof approach, replace layout tables with CSS Grid or Flexbox so the page is consistent and responsive. A centered fixed‑width container is easy and robust:

.wrapper {
  max-width: 980px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 16px;
}

Quick checklist: add a standards DOCTYPE, validate the output (https://validator.w3.org/), inspect FrontPage output for extra tags, avoid absolute pixel placement if you need responsiveness, and prefer table‑layout:fixed only when keeping tables for legacy reasons.

Recommended Answers

All 3 Replies

Member Avatar for matthewkeating

You would do CSS:

CSS

table 
{
        position: absolute;
	left: 200px;
	top: 20px;
}

HTML

<div id='table'>
// insert table here
</div>
Member Avatar for Member #46692

ok but the reason I use tables in front page is because of their drag and drop usability. Can you do such a thing with css?

I am basically using border-less tables as the confines of the layout...

Edited by Member #46692 because: n/a
Member Avatar for Member #46692

OK I figured it out. Looks like I can still use tables which is easier from my design point.

Just have to specify the positioning in pixels instead of percent and click on cell properties to center it. This way it appears to render the same across all browsers.

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.