Member Avatar for Mahen

Hi all,

I just created a website:

However, the page displays differently on Opera and Firefox and IE.

I've been trying to solve this issue for days now but in vain.

  • 3 Contributors
  • 4 Replies
  • 102 Views
  • 3 Days Discussion Span
  • Latest Post Latest Post by almostbob

Dani AI

Generated

Cross-browser layout differences usually come down to three things: the browser rendering mode (doctype), how widths/padding/borders are computed, and whether positioning removes elements from the normal flow. posted the stylesheet and later used absolute positioning as a quick fix; that can work but is brittle across viewports. raised the usual checklist ideas and emphasized using relative units — those directions are on point but the thread lacked a short, practical diagnosis + safer alternatives.

Quick diagnostic checklist

  • Confirm the page is in standards mode (valid doctype and charset). See background on quirks vs standards mode: Quirks Mode and Standards Mode — MDN.
  • Run the HTML/CSS through the W3C validators to catch malformed markup that forces quirks: W3C Validator.
  • Use the browser developer tools (computed/layout pane) to inspect the computed width/margin/padding for the sidebar and content columns. The rule that actually wins is what matters.

Safer layout approaches

  • Normalize box calculations with a global box-sizing rule so widths include padding and borders:
    *, *::before, *::after {
box-sizing: border-box;
}
  • Prefer a flow-based layout (floats with a clearfix, or modern layout like flexbox/grid) instead of absolute positioning. Example (flexbox skeleton):
    .container { display: flex; }
.sidebar  { width: 13rem; }
.main     { flex: 1; }

    Also use relative units (em/rem/%) for fonts and spacing so designs adapt to different displays, as suggested.

Testing and troubleshooting
Create a minimal reproducible file that isolates the two-column layout to quickly see which rule causes the discrepancy. Visual tests across viewport sizes and browsers will show whether the absolute-position fix overlaps or breaks at other widths. For modern projects, flexbox or grid gives predictable cross-browser behavior and reduces the need for brittle positioning.

Recommended Answers

All 4 Replies

Member Avatar for MidiMagic

The problem is probably in the stylesheet, which we can't see.

Check for the following incompatibility errors:

1. Putting size styles (width, height) in the same tag or style that contains nonzero surrounding styles (margin, border, padding).

IE nests them in the wrong order, placing the surrounding styles inside the size styles. Other browsers obey the standard, placing the surrounding styles outside the size styles.

The cure is to nest two tags, one with the size styles, and the other with the surrounding styles, in the order you really want them.

2. Putting measurement dimensions on zero values in styles, or omitting dimensions on other values.

If you put 0px, 0pt, 0% in a style, Firefox throws away the entire style. Just put a 0 by itself. On the other hand, if you omit a dimension for a nonzero style value, the browser might pick something other than what you intended.

Put measurement dimensions on all nonzero values that need them. Don't put dimensions on zero values.

3. Using absolute positioning.

Browsers do not agree on how to render this. Don't use it.

4. Using nonstandard extensions.

Don't use anything that is not a universally recognized element. And watch using deprecated elements - browser support is sketchy. Both drop various browsers into quirks mode, where they attempt to render nonstandard code as well as they can.

5. Declare a doctype and a character set.

Failure to do this correctly throws the browser into quirks mode.

6. Set the vertical alignment style for all table elements.

IE and FF differ on the default behavior of this attribute.

7. Using negative sizes.

Browsers don't agree on how to use these, and some drop into quirks mode when they are used.

8. Close all tags in the way the doctype requires.

Failure to close tags also throws the browser into quirks mode.

9. Don't use pixels to define any size other than an image or a border.

Other sizes can render strangely, especially if the number is large.

Here is a page containing other tips:

http://geocities.com/midimagic@sbcglobal.net/webtips.htm

Member Avatar for Mahen

This is my CSS Script.

As you can see i tried to play with the #leftcolume and
#rightcolumn with the margins,but in vain.

Member Avatar for almostbob 
#content {
    float : center;    
    font-size : 13px;   
    margin-left: 165px;
    width : 70%;
  }

this text is invisible to me
13 dots in 0.016 inch dot pitch .208 inches hi thats small, its four point paper type.
all font sizes on screen should be in ems
then the font size adjusts around the basefont set by the user for the users preference.
picture your screen being rendered on a cell phone
165 margin on a screen 200 wide ??
all measurements except for actual images and borders should be relative. ems and %ages
what looks good on your desktop may only look good (in any browsers) on your desktop, is good for images of other browsers and other OS and other screens

eyes see dark on light better
than light on dark background

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.